:root {
  --qp-navy: #0A2240;
  --qp-navy-dark: #071831;
  --qp-red: #B61313;
  --qp-red-dark: #8f0f0f;
  --qp-slate: #2A2E3B;
  --qp-light: #f6f7fa;
  --qp-muted: #6b7280;
}

* { box-sizing: border-box; }
html, body { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--qp-slate);
  background: #fff;
  line-height: 1.6;
}


/*** START added later after changes 7/17/2026 ***/

/* ---- Logo in navbar ---- */
/*
.qp-logo-img {
  height: 40px;
  width: auto;
  display: block;
  /* Kill the white background against the navy navbar.
     multiply makes white pixels disappear on dark bg,
     leaving only the darker logo marks visible. */

     /*
  mix-blend-mode: screen;
  filter: brightness(1.05) contrast(1.05);
}

*/

/* Hide the old CSS "Q" mark if it still exists elsewhere */
/*
.qp-logo-mark { display: none; }

.qp-brand-text {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .2px;
  color: #fff;
  line-height: 1;
}
  */

/* Slightly taller navbar so the logo breathes */
/*
.navbar { min-height: 72px; }
*/

/* temporarily remove this , it is messing my mobile responsive layout */
/* Mobile: shrink logo + text so nothing wraps */
/*
@media (max-width: 575.98px) {
  .qp-logo-img { height: 34px; }
  .qp-brand-text { font-size: 1rem; }
} 
*/

/* Footer variant — same logo, larger, no blend needed if footer is navy */
/*
.qp-logo-img--footer {
  height: 56px;
  width: auto;
  mix-blend-mode: screen;
}
*/
/*** END added later after changes ***/ 

/* This is a new approach with new logo matching the website background color */ 
.qp-logo-img {
  display: block;
  height: 56px;          /* controls the visible size in the navbar */
  width: auto;           /* keep the 374x289 aspect ratio */
  max-width: 100%;
  object-fit: contain;
  /* mix-blend-mode removed — logo already matches navbar navy */
}

/* Optional: shrink on small screens */
/*
@media (max-width: 576px) {
  .qp-logo-img { height: 42px; }
}
*/

/* 
**********************
 Below is to make email wrap up and not be cut off at end of screen especially if email address is too long
 ********************** 
 */
.footer-email{
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}


h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--qp-navy); letter-spacing: -0.01em; }
.display-serif { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; }
.text-accent { color: var(--qp-red) !important; }
.text-navy { color: var(--qp-navy) !important; }
.text-white-70 { color: rgba(255,255,255,.72); }
.bg-navy { background: var(--qp-navy); }
.bg-slate { background: var(--qp-slate); }
.bg-light-soft { background: var(--qp-light); }
a { color: var(--qp-red); text-decoration: none; }
a:hover { color: var(--qp-red-dark); }

/* Buttons */
.btn-accent {
  background: var(--qp-red); color: #fff; border: 1px solid var(--qp-red);
  font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  padding: .7rem 1.4rem; border-radius: 2px; transition: all .25s;
}
.btn-accent:hover { background: var(--qp-red-dark); border-color: var(--qp-red-dark); color: #fff; transform: translateY(-1px); }
.btn-outline-light-accent {
  background: transparent; color:#fff; border:1px solid rgba(255,255,255,.5);
  font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  padding:.7rem 1.4rem; border-radius:2px; transition:all .25s;
}
.btn-outline-light-accent:hover { background:#fff; color:var(--qp-navy); }

/* Navbar */
.qp-navbar { background: var(--qp-navy) !important; padding: 1rem 0; border-bottom: 3px solid var(--qp-red); }
.qp-navbar .navbar-brand { font-size: 1.1rem; letter-spacing: 1px; }
.qp-logo-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; background:var(--qp-red); color:#fff;
  font-weight:800; margin-right:6px; font-family:'Playfair Display', serif;
}
.qp-navbar .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; padding: .5rem 1rem !important; text-transform: uppercase; font-size: .85rem; letter-spacing: .8px; }
.qp-navbar .nav-link:hover, .qp-navbar .nav-link.active { color: #fff !important; }
.qp-navbar .nav-link.active { border-bottom: 2px solid var(--qp-red); }

/* Hero */
.qp-hero {
  background:
    linear-gradient(135deg, rgba(10,34,64,.92) 0%, rgba(10,34,64,.75) 60%, rgba(42,46,59,.85) 100%),
    /*url('https://images.unsplash.com/photo-1519452575417-564c1401ecc0?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; */
    url('../images/hero-equipment.jpg') center/cover no-repeat;
  color: #fff; padding: 8rem 0 6rem; position: relative; overflow: hidden;
}
.qp-hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 80%, rgba(182,19,19,.25), transparent 55%);
  pointer-events:none;
}
.qp-hero .eyebrow { text-transform:uppercase; letter-spacing:4px; font-size:.85rem; color:var(--qp-red); font-weight:600; }
.qp-hero h1 { color:#fff; font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.05; margin: 1rem 0 1.5rem; }
.qp-hero h1 em { color: var(--qp-red); font-style: italic; font-family:'Playfair Display', serif; font-weight: 700; }
/* added below line for making Specialists white */
.qp-hero h1 ex { color: var(--qp-light); font-style: italic; font-family:'Playfair Display', serif; font-weight: 700; }
.qp-hero .lead { color: rgba(255,255,255,.85); max-width: 640px; font-size: 1.05rem; }
.qp-keywords span { display:inline-block; margin-right:1.5rem; font-family:'Playfair Display', serif; font-style: italic; font-size:1.2rem; color:#fff; opacity:.85; }
.qp-keywords span::before { content:"— "; color: var(--qp-red); }

/* Stats */
.qp-stats { background: var(--qp-slate); color:#fff; }
.qp-stats .stat { padding: 2.2rem 1rem; text-align:center; border-right:1px solid rgba(255,255,255,.08); }
.qp-stats .stat:last-child { border-right:none; }
.qp-stats .stat .num { font-family:'Playfair Display', serif; font-size:3rem; color: var(--qp-red); font-weight:700; line-height:1; }
.qp-stats .stat .lbl { text-transform:uppercase; letter-spacing:2px; font-size:.78rem; margin-top:.6rem; color:rgba(255,255,255,.75); }

/* Section */
.qp-section { padding: 5.5rem 0; }
.qp-eyebrow { text-transform:uppercase; letter-spacing:4px; font-size:.8rem; color:var(--qp-red); font-weight:600; margin-bottom:1rem; }
.qp-section h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }
.qp-section h2 em { color: var(--qp-red); font-family:'Playfair Display', serif; font-style: italic; }
/* My addition to reduce space between sections, used this on index page towards bottom of page for SEO sections */
.qp-section-compact { padding: 3rem 0; }  /* 48px top/bottom */
.qp-section-tight { padding: 1.5rem 0; } /* 24px top/bottom */

/* my add for section */
/*
.qp-section {
  padding: 5rem 0;
}

.qp-section-title {
  color: #0A2240;
  font-weight: 700;
}

.text-accent {
  color: #B61313 !important;
}

.qp-card {
  background: #fff;
  border: 1px solid rgba(10, 34, 64, 0.08);
  border-radius: 0.75rem;
  padding: 1.75rem;
  box-shadow: 0 4px 20px rgba(42, 46, 59, 0.06);
  transition: transform 0.2s ease;
}

.qp-card:hover {
  transform: translateY(-4px);
}

.qp-card h5 {
  color: #0A2240;
  font-weight: 600;
}

.qp-icon {
  font-size: 2rem;
  color: #B61313;
}

.route-list li {
  font-size: 1.1rem;
  font-weight: 500;
  color: #0A2240;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.route-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #B61313;
  display: inline-block;
}
*/
 /* my add for section */

/* Industry cards */
.industry-card {
  background:#fff; border:1px solid #e6e8ee; border-top: 3px solid var(--qp-navy);
  padding:2rem 1.5rem; height:100%; transition: all .3s;
}
.industry-card:hover { border-top-color: var(--qp-red); transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(10,34,64,.25); }
.industry-card .icon {
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background: var(--qp-navy); color:#fff; font-size:1.5rem; margin-bottom:1rem;
}
.industry-card:hover .icon { background: var(--qp-red); }
.industry-card h3 { font-size:1.15rem; margin-bottom:.6rem; }
.industry-card p { color: var(--qp-muted); font-size:.92rem; margin:0; }

/* Value pillars */
.pillar { padding: 2rem; background:#fff; border-left: 4px solid var(--qp-red); height:100%; box-shadow: 0 4px 20px rgba(10,34,64,.06); }
.pillar-stack .pillar { height: auto; }
.pillar h3 { font-size:1.4rem; color: var(--qp-navy); }
.pillar p { color: var(--qp-muted); margin: 0; }

/* Services */
.service-item {
  background:#fff; border:1px solid #e6e8ee; padding: 2rem;
  height:100%; position:relative; transition: all .3s;
}
.service-item::before {
  content:""; position:absolute; top:0; left:0; width:0; height:3px;
  background:var(--qp-red); transition: width .3s;
}
.service-item:hover::before { width:100%; }
.service-item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(10,34,64,.2); }
.service-item .step { font-family:'Playfair Display', serif; font-style: italic; color: var(--qp-red); font-size:.9rem; letter-spacing:2px; margin-bottom:.4rem; }
.service-item h3 { font-size:1.2rem; margin-bottom: 1rem; color: var(--qp-navy); }
.service-item ul { padding-left: 1.1rem; color: var(--qp-muted); font-size:.92rem; }
.service-item ul li { margin-bottom:.35rem; }

/* Why */
.why-block { background: var(--qp-navy); color:#fff; padding: 5rem 0; position:relative; overflow:hidden; }
.why-block::after {
  content:""; position:absolute; right:-100px; top:-100px; width:400px; height:400px;
  background: var(--qp-red); opacity:.08; border-radius: 50%;
}
.why-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.why-item h4 { color:#fff; font-size:1.1rem; margin-bottom:.4rem; }
.why-item h4::before { content:"— "; color: var(--qp-red); }
.why-item p { color: rgba(255,255,255,.75); margin:0; font-size:.95rem; }

/* CTA band */
.qp-cta {
  background: linear-gradient(135deg, var(--qp-navy) 0%, var(--qp-slate) 100%);
  color:#fff; padding: 4rem 0; text-align:center;
}
.qp-cta h2 { color:#fff; }
.qp-cta h2 em { color: var(--qp-red); font-family:'Playfair Display', serif; font-style: italic; }

/* Footer */
.qp-footer { background: var(--qp-navy-dark); color:#fff; }
.qp-foot-links li { margin-bottom:.5rem; color: rgba(255,255,255,.75); }
.qp-foot-links a { color: rgba(255,255,255,.75); transition: color .2s; }
.qp-foot-links a:hover { color: var(--qp-red); }
.qp-footer-bottom { background: #04101f; color: rgba(255,255,255,.5); }
.qp-social { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.08); color:#fff; transition: all .25s; }
.qp-social:hover { background: var(--qp-red); color:#fff; }

/* Page header */
.page-header {
  background: linear-gradient(135deg, var(--qp-navy) 0%, var(--qp-slate) 100%);
  color:#fff; padding: 6rem 0 4rem; text-align:center;
}
.page-header h1 { color:#fff; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.page-header p { color: rgba(255,255,255,.75); max-width: 600px; margin: 1rem auto 0; }

/* Contact */
.contact-card { background:#fff; padding: 2rem; border:1px solid #e6e8ee; height:100%; }
.contact-card .icon { width:50px; height:50px; background: var(--qp-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom: 1rem; }
.form-control, .form-select {
  border-radius: 0; border: 1px solid #d5d9e0; padding: .75rem 1rem; font-size: .95rem;
}
.form-control:focus, .form-select:focus { border-color: var(--qp-red); box-shadow: 0 0 0 .15rem rgba(182,19,19,.15); }
.form-label { font-weight: 600; color: var(--qp-navy); text-transform: uppercase; font-size:.78rem; letter-spacing:1px; }

.alert-success { background: #e8f5e9; border:1px solid #a5d6a7; color:#1b5e20; border-radius:0; }
.alert-danger { background: #fdecea; border:1px solid #f5c6cb; color:#7f1d1d; border-radius:0; }

@media (max-width: 768px) {
  .qp-hero { padding: 5rem 0 4rem; }
  .qp-stats .stat { border-right:none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .qp-keywords span { display:block; margin: .3rem 0; }
}

/* ============================================================
   START: GET A QUOTE PAGE
   ============================================================ */
.quote-hero {
  background:
  /* linear-gradient(135deg, rgba(10,34,64,.95) 0%, rgba(42,46,59,.95) 100%); */ /* removed this as color was off from the rest of other web pages */
  linear-gradient(135deg, var(--qp-navy) 0%, var(--qp-slate) 100%);
  color: #fff;
  padding: 4.5rem 0 4rem;
  border-bottom: 3px solid var(--qp-red);
}
.quote-hero h1 { color:#fff; font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom:1rem; }
.quote-hero h1 em { font-family:'Playfair Display', serif; font-style: italic; }
.quote-hero .lead-light { color: rgba(255,255,255,.78); max-width: 560px; font-size:1.05rem; }
.quote-hero-points { list-style:none; padding:0; margin:1.75rem 0 0; }
.quote-hero-points li { color: rgba(255,255,255,.85); margin-bottom:.6rem; font-size:.95rem; }
.quote-hero-points i { color: var(--qp-red); margin-right:.6rem; }

.quote-hero-card { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); padding: 1.75rem; }
.qhc-row { display:flex; gap:1rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.qhc-row:last-child { border-bottom:0; padding-bottom:0; }
.qhc-num { font-family:'Playfair Display', serif; font-size:1.4rem; color: var(--qp-red); font-weight:700; line-height:1; }
.qhc-row h5 { color:#fff; font-size:1rem; margin:0 0 .15rem; }
.qhc-row p { color: rgba(255,255,255,.6); font-size:.85rem; margin:0; }

/* Steps */
.quote-step { background:#fff; border:1px solid #e6e8ee; margin-bottom:1.5rem; }
.quote-step-head {
  display:flex; align-items:center; gap:1rem;
  padding: 1rem 1.5rem; background: var(--qp-navy); border-left: 4px solid var(--qp-red);
}
.quote-step-head h3 { color:#fff; font-size:1.05rem; margin:0; letter-spacing:.3px; }
.quote-step-head .step-num {
  font-family:'Playfair Display', serif; font-style:italic;
  color: var(--qp-red); font-size:1.1rem; font-weight:700;
}
.quote-step-body { padding: 1.75rem 1.5rem; }
.quote-form .form-label { font-size:.82rem; font-weight:600; color: var(--qp-navy); text-transform:uppercase; letter-spacing:.6px; }
.quote-form .req { color: var(--qp-red); }
.quote-form .form-control,
.quote-form .form-select { border-radius:0; border:1px solid #d9dde5; padding:.65rem .85rem; font-size:.95rem; }
.quote-form .form-control:focus,
.quote-form .form-select:focus { border-color: var(--qp-navy); box-shadow: 0 0 0 .18rem rgba(10,34,64,.12); }
.quote-form .form-check-input:checked { background-color: var(--qp-red); border-color: var(--qp-red); }
.qp-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Service picker tiles */
.service-picker { display:grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.service-opt label {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:100%; min-height:98px; padding:1rem .5rem; cursor:pointer; text-align:center;
  background:#fff; border:1px solid #d9dde5; border-bottom:3px solid #d9dde5;
  color: var(--qp-slate); font-size:.85rem; font-weight:600;
  transition: all .2s ease;
}
.service-opt label i { font-size:1.5rem; color: var(--qp-navy); transition: color .2s ease; }
.service-opt label:hover { border-color: var(--qp-navy); transform: translateY(-2px); }
.service-opt .btn-check:checked + label {
  background: var(--qp-navy); color:#fff; border-color: var(--qp-navy); border-bottom-color: var(--qp-red);
}
.service-opt .btn-check:checked + label i { color: var(--qp-red); }
.service-opt .btn-check:focus-visible + label { outline:2px solid var(--qp-red); outline-offset:2px; }

.dim-group { display:flex; align-items:center; gap:.6rem; }
.dim-group span { color: var(--qp-muted); }

/* Alerts */
.quote-alert { display:flex; gap:1rem; padding:1.1rem 1.25rem; margin-bottom:1.5rem; border-left:4px solid; background:#fff; }
.quote-alert i { font-size:1.3rem; line-height:1.2; }
.quote-alert ul { padding-left:1.1rem; margin-top:.35rem; font-size:.92rem; }
.quote-alert-success { border-color:#1c7c4a; }
.quote-alert-success i { color:#1c7c4a; }
.quote-alert-error { border-color: var(--qp-red); }
.quote-alert-error i { color: var(--qp-red); }

/* Sidebar */
.quote-aside { background:#fff; border:1px solid #e6e8ee; border-top:3px solid var(--qp-red); padding:1.75rem; }
.quote-aside h4 { font-size:1.1rem; margin-bottom:1.1rem; }
.quote-aside-list { list-style:none; padding:0; margin:0; }
.quote-aside-list li { display:flex; gap:.9rem; padding:.85rem 0; border-bottom:1px solid #eef0f4; }
.quote-aside-list li:last-child { border-bottom:0; padding-bottom:0; }
.quote-aside-list i { color: var(--qp-red); font-size:1.15rem; }
.quote-aside-list strong { display:block; color: var(--qp-navy); font-size:.95rem; }
.quote-aside-list span { color: var(--qp-muted); font-size:.86rem; }
.quote-aside-dark { background: var(--qp-slate); border-color: var(--qp-slate); color: rgba(255,255,255,.8); }
.quote-aside-dark h4 { color:#fff; }

@media (max-width: 767.98px) {
  .service-picker { grid-template-columns: repeat(2, 1fr); }
  .quote-step-body { padding: 1.25rem 1rem; }
  .dim-group { flex-wrap:nowrap; }
}
/* END : GET A QUOTE PAGE */