/* ================================
   UTEKK — UPDATED CSS (Copy/Paste)
   LOCKED-IN BASE + UPDATE:
   - HEADER LOGO increased ~2.5x larger (per your request)
   - Badge-style plate remains
   - Header overflow visible (no clipping)
   ✅ UPDATE: HERO uses OFFICIAL HERO desktop (ONLY hero changes)
      https://i.postimg.cc/dQjbZ3LV/OFFICIAL-HERO-desktop.jpg
   ✅ FIX: Prevent hero image from bleeding into Trust Bar / other sections
   ✅ FIX: Neutralize any prior “hero::before padding-top hacks”
================================== */

:root {
  --bg: #0b1220;
  --bg2: #101a2f;
  --text: #0f172a;
  --white: #fff;
  --muted: #cbd5e1;
  --accent: #d61f26;
  --accent2: #1e3a8a;
  --card: #0f1b33;
  --stroke: rgba(255, 255, 255, 0.12);

  /* ✅ OFFICIAL HERO (DESKTOP) — HERO ONLY */
  --hero-img: url("https://i.postimg.cc/dQjbZ3LV/OFFICIAL-HERO-desktop.jpg");

  /* Keep the rest of the site backgrounds stable */
  --site-bg-img: url("https://i.postimg.cc/7LfBTg9v/Hero_Plane.jpg");
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
html,
body {
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(1160px, 92%);
  margin: 0 auto;
}

/* Top bar */
.topbar {
  background: linear-gradient(90deg, var(--bg), #071022);
  color: var(--muted);
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 0;
}
.topbar__right {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.sep {
  opacity: 0.5;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn--small {
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 800;
}

/* Header / Nav */
.header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: visible; /* IMPORTANT: allows bigger badge-style logo */
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
}

/* ================================
   LOGO (2.5x BIGGER)
================================== */
.brand {
  display: flex;
  align-items: center;
  line-height: 0;

  /* badge plate */
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  padding: 12px 18px;

  /* allow it to “sit” taller than header */
  margin-top: -56px;
  margin-bottom: -56px;

  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}
.brand img {
  height: 160px; /* ✅ 128px * 2.0 = 160px */
  width: auto;
  max-width: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.18));
}

.nav {
  display: flex;
  gap: 18px;
  align-items: center;
  font-weight: 700;
  color: #0f172a;
}
.nav a {
  padding: 8px 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover {
  border-bottom-color: var(--accent);
}

.nav__toggle {
  display: none;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 800;
}

/* ================================
   HERO — OFFICIAL DESKTOP HERO (FIXED)
   - Forces NEW hero image even if inline style exists
   - Removes any old hero::before “padding-top” tricks
   - Keeps the section stable (no page break)
================================== */
.hero {
  position: relative;
  min-height: 520px;
  color: var(--white);
  overflow: hidden;

  /* ✅ If your HTML had inline background-image on .hero, this overrides it */
  background-image: var(--hero-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ✅ Neutralize any prior hacks that can “break” layout */
.hero::before {
  content: none !important;
}

.hero__bg {
  position: absolute;
  inset: 0;

  /* ✅ Use the same hero image on the bg layer (in case your layout relies on it) */
  background-image: var(--hero-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  transform: scale(1.02);
}

/* overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 520px;
}
.hero__content {
  max-width: 640px;
  padding: 38px 0;
}
.hero h1 {
  margin: 0 0 14px;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: 0.6px;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.hero p {
  margin: 0 0 18px;
  color: #e2e8f0;
  line-height: 1.55;
  max-width: 560px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 12px;
}
.hero__call {
  margin-top: 6px;
  color: #e2e8f0;
  font-weight: 700;
}

/* TRUST BAR (kept stable — NOT using the hero image) */
.trust {
  position: relative;
  color: #e5e7eb;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  background: radial-gradient(
      900px 240px at 35% 0%,
      rgba(120, 70, 200, 0.28),
      rgba(0, 0, 0, 0) 60%
    ),
    linear-gradient(180deg, rgba(7, 16, 34, 0.96), rgba(11, 18, 32, 0.96));
}
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--site-bg-img);
  background-size: cover;
  background-position: 50% 22%;
  opacity: 0.22;
  transform: scale(1.02);
  pointer-events: none;
}
.trust::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.trust__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 16px 0;
}
.trust__item {
  border-radius: 14px;
  padding: 12px 14px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}
.trust__item img {
  width: 100%;
  height: 102px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35));
}
.trust__phone {
  font-weight: 900;
  letter-spacing: 0.6px;
  font-size: 18px;
  color: #ffffff;
}

/* Sections */
.section {
  padding: 54px 0;
  background: white;
  color: #0f172a;
}
.section--dark {
  background: linear-gradient(180deg, #0b1220, #0f1b33);
  color: var(--white);
}
.section__title {
  text-align: center;
  margin: 0 0 14px;
  font-size: 26px;
  letter-spacing: 1px;
  font-weight: 900;
}
.section__title--light {
  color: var(--white);
}
.section__lead {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 28px;
  line-height: 1.65;
  color: #334155;
}
.section__lead--light {
  color: #cbd5e1;
}

/* THEMED BACKGROUNDS: Capabilities + Compliance + Pet (kept stable) */
#capabilities.section,
#compliance.section,
#pet.section,
#pet-transport.section,
#pettransport.section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      980px 320px at 40% 0%,
      rgba(120, 70, 200, 0.22),
      rgba(0, 0, 0, 0) 62%
    ),
    linear-gradient(180deg, rgba(7, 16, 34, 0.96), rgba(11, 18, 32, 0.96));
  color: #e5e7eb;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#capabilities.section::before,
#compliance.section::before,
#pet.section::before,
#pet-transport.section::before,
#pettransport.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--site-bg-img);
  background-size: cover;
  background-position: 50% 18%;
  opacity: 0.18;
  transform: scale(1.02);
  pointer-events: none;
}
#capabilities.section::after,
#compliance.section::after,
#pet.section::after,
#pet-transport.section::after,
#pettransport.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
#capabilities.section > .container,
#compliance.section > .container,
#pet.section > .container,
#pet-transport.section > .container,
#pettransport.section > .container {
  position: relative;
  z-index: 1;
}
#capabilities.section .section__title,
#compliance.section .section__title,
#pet.section .section__title,
#pet-transport.section .section__title,
#pettransport.section .section__title {
  color: #ffffff;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}
#capabilities.section .section__lead,
#compliance.section .section__lead,
#pet.section .section__lead,
#pet-transport.section .section__lead,
#pettransport.section .section__lead {
  color: #cbd5e1;
}
#capabilities.section p,
#compliance.section p,
#pet.section p,
#pet-transport.section p,
#pettransport.section p {
  color: #e2e8f0;
}

/* Compliance */
.compliance {
  max-width: 820px;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 20px auto 0;
  max-width: 520px;
}
.checklist li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 700;
  color: #0f172a;
}
.checklist li::before {
  content: "✓";
  margin-right: 10px;
  color: var(--accent);
  font-weight: 900;
}

#capabilities.section .checklist li,
#compliance.section .checklist li,
#pet.section .checklist li,
#pet-transport.section .checklist li,
#pettransport.section .checklist li {
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#capabilities.section .checklist li::before,
#compliance.section .checklist li::before,
#pet.section .checklist li::before,
#pet-transport.section .checklist li::before,
#pettransport.section .checklist li::before {
  color: #ff4b55;
}

/* RFQ form */
.form {
  max-width: 860px;
  margin: 0 auto;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  color: #e2e8f0;
}
input,
select,
textarea {
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  outline: none;
}
input::placeholder,
textarea::placeholder {
  color: rgba(226, 232, 240, 0.65);
}
.form__fineprint {
  color: #cbd5e1;
  font-size: 12px;
  margin-top: 10px;
}

/* Footer */
.footer {
  background: #071022;
  color: #cbd5e1;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 26px 0;
}
.footer__brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footer__brand img {
  height: 44px;
}
.footer__meta {
  line-height: 1.5;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 900;
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(203, 213, 225, 0.85);
}

/* WHO WE ARE – Image Banner (balanced: show stars + keep plane) */
.who-we-are-image{
  width:100%;
  min-height:810px; /* ✅ more vertical room so the plane isn’t chopped */
  background-image:url("https://i.postimg.cc/FsXsWpJN/WHO_WE_ARE_purple_banner.jpg");
  background-size:cover;
  background-repeat:no-repeat;

  /* ✅ Balanced crop: keeps top star map AND bottom plane */
  background-position:center 28%;

  position:relative;
}

/* MISSION-READY SERVICES – Image Banner */
.mission-ready-image {
  width: 100%;
  min-height: 810px;
  background-image: url("https://i.postimg.cc/kMQ6PtHy/MISSION-READY-SERVICES-background.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
}

/* Responsive */
@media (max-width: 768px) {
  .mission-ready-image {
    min-height: 420px;
    background-position: center top;
  }
}/* SERVICES – Image Driven Tiles */
.services-image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  background: linear-gradient(180deg, #0b1220, #0f1b33);
}
.service-tile {
  position: relative;
  min-height: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 10, 25, 0.85),
    rgba(5, 10, 25, 0.35),
    rgba(5, 10, 25, 0.12)
  );
}
.service-label {
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1.25;
  text-transform: uppercase;
  z-index: 2;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* Tile images */
.service-tile.logistics {
  background-image: url("https://i.postimg.cc/3RhvHhkH/Logistics-and-Courier.jpg");
}
.service-tile.obc {
  background-image: url("https://i.postimg.cc/k5Q2sHfR/On-Board-Courier-(OBC).jpg");
}
.service-tile.govprime {
  background-image: url("https://i.postimg.cc/c19rFwMm/Government-and-Prime-Contractor-Support.jpg");
}
.service-tile.medical {
  background-image: url("https://i.postimg.cc/k5v5KbgH/Medical-and-Regulated-Transport.jpg");
}
.service-tile.pet {
  background-image: url("https://i.postimg.cc/8cjk2XBH/Pet-Transport.jpg");
}

/* Hover */
@media (hover: hover) {
  .service-tile:hover::before {
    background: rgba(5, 10, 25, 0.35);
  }
}

/* Responsive */
@media (max-width: 980px) {
  .nav {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
  }
  .header__inner {
    gap: 10px;
  }
  .services-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brand {
    margin-top: -48px;
    margin-bottom: -48px;
    padding: 10px 16px;
    border-radius: 20px;
  }
  .brand img {
    height: 270px;
  } /* 108px * 2.5 */
}

@media (max-width: 768px) {
  .who-we-are-image {
    min-height: 420px;
    background-position: center top;
  }

  .trust__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust__item {
    height: 118px;
  }
  .trust__item img {
    height: 88px;
  }

  .hero {
    min-height: 560px;
  }
  .hero__inner {
    min-height: 560px;
  }
  .hero__bg {
    background-position: center !important;
  }

  .brand {
    margin-top: -40px;
    margin-bottom: -40px;
    padding: 9px 14px;
    border-radius: 18px;
  }
  .brand img {
    height: 230px;
  } /* 92px * 2.5 */
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: 30px;
  }
  .form__row {
    grid-template-columns: 1fr;
  }
  .footer__contact {
    align-items: flex-start;
  }
  .services-image-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 600px;
  }
  .hero__inner {
    min-height: 600px;
  }

  .brand {
    margin-top: -34px;
    margin-bottom: -34px;
    padding: 8px 12px;
    border-radius: 18px;
  }
  .brand img {
    height: 210px;
  } /* 84px * 2.5 */
/* ======================================================
CAPABILITIES SNAPSHOT — BACKGROUND FIX (FINAL)
Ensures plane, truck, and runway stay visible
====================================================== */

.capabilities-bg {
  position: relative;

  background-image:
    linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.28)),
    url('https://i.postimg.cc/hGkZV9R2/CAPABILITIES-SNAPSHOT-BACKGROUND.jpg');

  background-size: cover;
  background-position: center bottom; /* CRITICAL FIX */
  background-repeat: no-repeat;

  min-height: 420px; /* prevents cropping */
  display: flex;
  align-items: center;
}

/* Overlay polish to protect text readability */
.capabilities-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.45),
    rgba(0,0,0,.20),
    rgba(0,0,0,.55)
  );
  z-index: 1;
}

/* Content stays above overlay */
.capabilities-content {
  position: relative;
  z-index: 2;
}

/* Text styling for contrast */
.capabilities-bg .section__title {
  color: #ffffff;
}

.capabilities-bg .section__lead {
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .capabilities-bg {
    min-height: 360px;
    background-position: center 80%;
  }
}/* Hide visually but keep for SEO / screen readers */
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}/* ===== WHO WE ARE banner title fix ===== */
.who-we-are-image{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 28px; /* adjust up/down */
}

.who-we-are-image h2,
.who-we-are-image .section__title{
  width: 100%;
  margin: 0;
  text-align: center;
  color: #fff !important;
  z-index: 2;
  position: relative;
  text-transform: uppercase;
}

/* optional: add a subtle dark overlay behind text for readability */
.who-we-are-image::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}/* =========================================================
   MOBILE OVERRIDES — make mobile view show full site cleanly
   Paste at the VERY BOTTOM of style.css
========================================================= */
@media (max-width: 768px) {

  /* 1) Remove the “badge plate” overhang that causes overlap */
  .brand{
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  /* If you still want it big on desktop, but sane on mobile */
  .brand img{
    height: 140px !important;   /* adjust 120–160 to taste */
    max-width: 100% !important;
    width: auto !important;
  }

  /* 2) Give the hero room so text/buttons don’t get buried */
  .hero{
    padding-top: 18px !important;
    min-height: auto !important;
  }

  /* If your hero has an inner container/wrapper, this helps spacing */
  .hero .container{
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  /* 3) Scale headline + paragraph so it doesn’t blow up / clip */
  .hero h1, .hero__title{
    font-size: clamp(28px, 7vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .hero p, .hero__lead{
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  /* 4) Buttons: full width + stacked = “complete site” feel */
  .hero .btn, .hero a.btn{
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 10px 0 !important;
    text-align: center !important;
  }

  /* 5) Trust badges grid: tighten up */
  .trustbar, .trust-grid{
    gap: 12px !important;
  }
  .trustbar img, .trust-grid img{
    max-width: 100% !important;
    height: auto !important;
  }

  /* 6) WHO WE ARE section: keep background + readability */
  #about, .who-we-are-image{
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    padding: 28px 16px !important;
  }

  /* If WHO WE ARE is still overlaying weirdly, this usually fixes it */
  #about h2, .who-we-are-image h2{
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 12px !important;
    text-align: center !important;
  }

  /* 7) Kill any accidental horizontal scrolling */
  html, body{
    overflow-x: hidden !important;
  }
}@media (max-width: 768px) {

  /* Clamp WHO WE ARE section width perfectly to viewport */
  #about{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

#about .who-we-are-image{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

  /* Prevent background bleed caused by transforms or positioning */
  #about::before,
#about::after {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

  /* Ensure inner content stays centered and constrained */
  #about .container,
  .who-we-are-image .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}/* ===== Mobile Nav Toggle (Fix) ===== */

/* Make the toggle button visible + clickable */
.nav__toggle{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  cursor: pointer;
  position: relative;
  display: none; /* shown in mobile media query */
}

/* Draw the hamburger (since your button is empty) */
.nav__toggle::before,
.nav__toggle::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: rgba(15,23,42,.85);
  border-radius: 2px;
}

.nav__toggle::before{ top: 16px; }
.nav__toggle::after{ top: 26px; }

/* Mobile menu */
@media (max-width: 900px){
  .nav__toggle{ display: inline-block; z-index: 10001; }

  /* hide nav by default */
  #siteNav{
    display: none;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
    z-index: 10000;
  }

  /* show nav when opened */
  #siteNav.is-open{ display: block; }

  /* stack links */
  #siteNav a{
    display: block;
    padding: 12px 10px;
  }
}/* Stop horizontal overflow site-wide */
html, body { overflow-x: hidden; }

/* WHO WE ARE section / banner should never exceed viewport */
#about,
#about *{
  max-width: 100%;
}

#about{
  width: 100%;
  overflow: hidden;
}
/* =====================================
   CLEAN TRANSPARENT HEADER LOGO (NEW)
   ===================================== */

/* Overrides the badge-style logo ONLY when brand--clean is used */
.brand--clean {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Logo image sizing */
.brand--clean img {
  height: 96px;
  width: auto;
  max-width: 260px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

/* Tablet */
@media (max-width: 768px) {
  .brand--clean img {
    height: 76px;
  }
}

/* Mobile */
@media (max-width: 520px) {
  .brand--clean img {
    height: 64px;
  }
}/* Kill legacy badge positioning when using clean logo */
.brand.brand--clean {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  align-self: center;
}
/* LOCATION — icon + pulse */
.location-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transform: translateY(1px);
}

.star-icon{
  position: relative;
z-index: 1;
   width: 18px;
  height: 18px;
  fill: #d4af37;           /* UTEKK gold */
  filter: drop-shadow(0 0 8px rgba(212,175,55,.25));
}
/* Anchor wrapper for star + pulse */
.location-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 10px;
}
/* pulse ring */
.star-pulse{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
   pointer-events: none;
   width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,215,0,.55) 0%, rgba(212,175,55,0) 70%);
  animation: pulseStar 2.2s infinite ease-out;
}

@keyframes pulseStar{
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}

/* “By Appointment Only” line */
.location-section .by-appointment{
  margin-top: 10px;
  text-align: center;
  font-size: .9rem;
  letter-spacing: 1px;
  color: #d4af37;
  text-transform: uppercase;
  opacity: .85;
}

   /* ===== COMPANY PAGE HERO BACKGROUND ===== */

.company-hero {
  background:
    linear-gradient(rgba(5,10,25,.85), rgba(5,10,25,.92)),
    url('https://i.postimg.cc/Y9J8hFrB/UTEKK-COMPANY-PAGE-logo-1.jpg');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #ffffff;

  position: relative;
  z-index: 1;
}

.page-company {
  background: none;
}

/* ===== COMPANY PAGE HERO BACKGROUND (FORCED) ===== */
.page-company .company-hero {
  background:
    linear-gradient(rgba(5, 10, 25, 0.85), rgba(5, 10, 25, 0.92)),
    url('https://i.postimg.cc/Y9J8hFrB/UTEKK-COMPANY-PAGE-logo-1.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed; /* optional: creates a subtle parallax effect on scroll */
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  position: relative; /* if you add pseudo-elements or overlays later */
}

/* Optional: add a fallback color if image fails to load */
.page-company .company-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5, 10, 25, 0.6); /* extra overlay if needed */
  z-index: -1;
}