:root{
  --brand:#0f62fe;           /* Primary */
  --brand-ink:#fff;
  --ink:#111827;            /* Gray-900 */
  --muted:#6b7280;          /* Gray-500 */
  --paper:#ffffff;          /* White */
  --bg:#f8fafc;             /* Slate-50 */
  --accent:#fbbf24;         /* Amber-400 */
  --radius:14px;
  --shadow:0 10px 30px rgba(2,8,23,.06);
}

html,body{height:100%}
body{background:var(--bg); color:var(--ink)}
.navbar .navbar-brand .brand-accent{color:var(--brand)}
.brand-accent-text{color:var(--brand)}

.topbar{font-variant-numeric:tabular-nums}

.hero{min-height:56vh}
.hero .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; filter:grayscale(60%)}
.hero .container{position:relative}

.card{border-radius:var(--radius); box-shadow:var(--shadow)}
.service-card{background:var(--paper); border:1px solid #e5e7eb; border-radius:var(--radius)}

.footer{background:#fff}

.tag-tile{background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:.6rem 1rem; display:inline-block; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.chip{background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; border-radius:999px; padding:.35rem .7rem; font-size:.85rem}

.icon-list{list-style:none; padding:0; margin:0}
.icon-list li{margin:.5rem 0}
.icon-list i{color:var(--brand); margin-right:.35rem}

.page-header{background:linear-gradient(0deg, rgba(15,98,254,.06), rgba(15,98,254,.06)), #fff; border-bottom:1px solid #e5e7eb; padding:2.2rem 0}
.page-header h1{margin:0}

.floating-cta{position:fixed; right:16px; bottom:16px; border-radius:999px; box-shadow:var(--shadow)}

/* Images */
.object-fit-cover{object-fit:cover}
.ratio > img{width:100%; height:100%}

/* Forms */
.form-label{font-weight:600}

/* Utilities */
.rounded-3{border-radius:var(--radius)!important}
.shadow-sm{box-shadow:var(--shadow)!important}

/* Brand mark beside "Spivey Logistics" */
.navbar-brand{
  display:flex;               /* keep logo + text on one line */
  align-items:center;         /* vertical centering */
  gap:.5rem;                  /* space between logo and text */
  line-height:1;              /* keeps 1em = visual text height */
}

/* Logo scales to the text size */
.navbar-brand .brand-logo{
  height:1em;                 /* exactly the text height */
  width:auto;                 /* keep aspect ratio */
  vertical-align:middle;      /* fine-tune baseline alignment */
  transform:translateY(-1px); /* tiny nudge if needed */
}

/* Optional: bump size slightly on larger screens */
@media (min-width: 992px){
  .navbar-brand .brand-logo{ height:3.05em; }
}