/* ===== BLS Company Site — shared styles ===== */

:root {
  --bg: #0b0b0b;
  --bg-raised: #141414;
  --bg-card: #1a1a1a;
  --border: #2a2a2a;
  --gold: #c8a45d;
  --gold-dark: #a3813f;
  --text: #e9f6f1;
  --text-muted: #b9b9b3;
  --red: #b5182b;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.btn-primary:hover { background: #d8b571; }

.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: #6b6b6b;
}

.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(200, 164, 93, 0.08);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 11, 0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  /* Positioning context for the nav dropdown panel, so it aligns with the brand. */
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}

.brand img {
  height: 42px;
  width: auto;
}

.brand-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--text);
  line-height: 1.15;
}

.brand-text small {
  display: block;
  font-weight: 400;
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* The nav is a burger at every width, not just under 860px. Nine top-level links no longer fit
   on one line even on a laptop, and letting them wrap made the sticky header two rows deep on
   every page. One consistent menu also means adding a tenth page later changes nothing here. */
.nav-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 18px;
  cursor: pointer;
}

.nav-toggle:hover { color: var(--gold); border-color: var(--gold); }

/* The open menu drops OVER the page rather than pushing it down. The header is sticky, so
   growing it shifted every page's content the moment the menu opened, and shifted it back on
   close. Anchored to .site-header .container (positioned below) so the panel lines up with the
   brand rather than the raw viewport edge. */
.main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(11, 11, 11, 0.98);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  z-index: 200;
}

.main-nav.open { display: flex; }

.main-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  white-space: nowrap;
}

.main-nav a:hover { color: var(--gold); }

.main-nav a.active {
  color: #000;
  background: var(--gold);
}

/* ---------- Hero (home page) ---------- */

.hero {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--border);
}

.hero-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
}

.hero-logo img { width: 100%; }

.hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 14px;
  line-height: 1.15;
}

.hero .subtitle {
  color: var(--gold);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* Named "connect" rather than "social": iOS content blockers hide elements whose class
   contains that word, which took these buttons off the page entirely for those visitors. */
.connect-row {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.connect-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.connect-row a:hover { background: rgba(200, 164, 93, 0.12); }

.connect-row svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-logo { max-width: 200px; margin: 0 auto; }
  .hero .btn-row, .connect-row { justify-content: center; }
}

/* ---------- Section-nav cards (home page) ---------- */

.section-cards {
  padding: 48px 0;
}

.section-cards h2 {
  font-size: 22px;
  margin: 0 0 24px;
  text-align: center;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.nav-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 20px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.nav-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.nav-card .eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.nav-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--text);
}

.nav-card p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Generic content page ---------- */

.page-hero {
  padding: 20px 0 8px;
}

.page-hero .eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.content-section {
  padding: 24px 0 60px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 44px;
  align-items: start;
}

.content-grid .media {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.content-grid h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin: 0 0 16px;
}

.content-grid .rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 20px;
}

.content-grid p {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.content-grid .btn-row { margin-top: 24px; }

.link-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-list a {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 760px) {
  .content-grid { grid-template-columns: 1fr; }
  .content-grid .media { max-width: 340px; margin: 0 auto; }
}

/* ---------- Icon row (Flexible Logistics) ---------- */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 18px;
  margin: 8px 0 8px;
}

.icon-tile {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 12px;
  text-align: center;
}

.icon-tile svg {
  width: 40px;
  height: 40px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  margin-bottom: 10px;
}

.icon-tile span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* ---------- Review card (Reviews & Trust) ---------- */

.review-block {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

.review-block img { border-radius: 10px; border: 1px solid var(--border); }

@media (max-width: 640px) {
  .review-block { grid-template-columns: 1fr; }
  .review-block img:first-child { max-width: 220px; margin: 0 auto; }
}

/* ---------- Footer CTA band (every page) ---------- */

.contact-band {
  border-top: 1px solid var(--border);
  padding: 48px 0 40px;
  text-align: center;
  background: var(--bg-raised);
}

.contact-band .eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.contact-band h2 {
  font-size: clamp(22px, 3vw, 30px);
  margin: 8px 0 12px;
}

.contact-band p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 26px;
}

.contact-band .btn-row {
  justify-content: center;
}

.site-footer {
  padding: 22px 0 40px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.site-footer a {
  color: var(--gold);
  text-decoration: underline;
}