:root{ --brand:#1C3D73; --brand-rgb:28,61,115;
--accent:#1C3D73;     /* warm gold accent */
  --white-80: rgba(255,255,255,.85);
--muted:#6b7280; }



/* Bigger logo + override Bootstrap's cap */
:root{
  --logo-h-desktop: 96px;   /* try 88–110px */
  --logo-h-mobile:  64px;   /* mobile size */
}

:root{
  --brand:#1C3D73;           /* your brand color */
  --brand-ink:#ffffff;       /* text on brand */
  --brand-hover:#174061;     /* darker hover */
  --radius:10px;
}

/* Primary CTA button */
.btn-brand{
  background:var(--brand);
  color:var(--brand-ink);
  border:0;
  border-radius:var(--radius);
  padding:.6rem 1rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.btn-brand:hover,
.btn-brand:focus{
  background:var(--brand-hover);
  color:#fff;
}
.btn-brand:active{ transform:translateY(1px); }

/* Make the navbar toggler visible on light backgrounds */
.navbar-toggler{ border:1px solid #e5e7eb; }
.navbar-toggler-icon{
  background-image:none; width:1.4rem; height:1.1rem; position:relative; display:inline-block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px;
}
.navbar-toggler-icon::before{ top:0 }
.navbar-toggler-icon::after{ bottom:0 }
.navbar-toggler-icon span{ top:50%; transform:translateY(-50%) }


/* Navbar Logo */
.site-logo{
  height: 70px;           /* adjust height as needed */
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px){
  .site-logo{
    height: 56px;         /* smaller logo on mobile */
  }
}










:root{
  --brand:#1C3D73;     /* deep blue */
  --gold:#F2B441;      /* warm gold */
  --bg:#f7fafc;        /* page bg */
  --card:#ffffff;      /* cards/forms */
  --text:#0f172a;      /* slate-900 */
  --muted:#64748b;     /* slate-500/600 */
  --border:#e2e8f0;    /* light border */
  --radius:16px;
}


/* Banner (compact, in-container) */
.mini-banner{
  position:relative; overflow:hidden; border-radius:20px;
  border:1px solid rgba(28,61,115,.08);
  background:
    linear-gradient(135deg, rgba(28,61,115,.92), rgba(28,61,115,.78)),
    url('/static/images/banners/services.jpg') center/cover no-repeat;
  box-shadow:0 18px 40px rgba(28,61,115,.15);
  min-height:140px; display:flex; align-items:flex-end; padding:20px 22px; margin-bottom:24px;
}
.mini-banner h1{ margin:0; color:#fff; font-weight:900; font-size:clamp(24px,3.4vw,36px) }
.mini-banner h1 span{ border-left:7px solid var(--gold); padding-left:12px }

/* Intro row */
.intro{ margin-bottom:8px; color:var(--muted) }

/* Services grid */
.s-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .s-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){ .s-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .s-grid{ grid-template-columns: 1fr; } }

.s-card{
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; min-height: 100%;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.s-card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(15,23,42,.08); border-color:#d7ddea }

.s-media{
  position:relative; background:#fff; border-bottom:1px solid var(--border);
}
.s-media .ratio{ width:100%; aspect-ratio: 4 / 3; overflow:hidden; display:flex; align-items:center; justify-content:center }
.s-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s }
.s-card:hover .s-media img{ transform:scale(1.03) }

.s-body{ padding:14px; display:flex; flex-direction:column; gap:8px }
.s-eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.3px; color:#244b8e; background:#e9f0ff;
  border:1px solid #dbe5ff; padding:6px 10px; border-radius:999px;
}
.s-title{ margin:0; font-size:clamp(15px,2vw,18px); font-weight:900 }
.s-text{ margin:0; color:#475569; line-height:1.6; font-size:14px }

.s-foot{ margin-top:auto; display:flex; gap:10px; align-items:center; }
.btn{
  display:inline-block; padding:9px 13px; border-radius:999px; text-decoration:none; font-weight:800;
  border:1px solid transparent; transition:filter .15s, transform .15s, background .2s;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.btn-ghost{ background:#fff; color:var(--brand); border-color:var(--brand) }
.btn-ghost:hover{ background:#f1f5ff }

/* How it works */
.how{ margin-top:28px }
.how-head{ margin:0 0 10px; font-size: clamp(18px,2.4vw,24px); font-weight:900 }
.steps{
  display:grid; gap:14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 992px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .steps{ grid-template-columns: 1fr; } }

.step{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px;
  display:flex; gap:12px; align-items:flex-start;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.step .num{
  flex:0 0 40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-weight:900; color:#0b1933; background:linear-gradient(135deg,var(--gold),#ffd88a);
  box-shadow:0 8px 18px rgba(242,180,65,.25); border:1px solid #f5e0ad;
}
.step b{ display:block; margin-bottom:4px }
.step p{ margin:0; color:#64748b; line-height:1.6; font-size:14px }

/* CTA */
.cta{
  margin-top:28px; padding:18px; border-radius:18px; color:#fff;
  background:linear-gradient(135deg, var(--brand), #284f95);
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  box-shadow:0 18px 40px rgba(28,61,115,.18);
}
.cta h3{ margin:0; font-size: clamp(18px,2.6vw,24px); font-weight:900 }
.cta .cta-actions{ display:flex; gap:10px; flex-wrap:wrap }
.cta .btn{ background:#fff; color:#0b1020; }
.cta .btn:hover{ filter:saturate(1.05); transform:translateY(-1px) }
































/* newsletter band */
.nl-band{
  background: var(--brand);
  color:#fff;
  padding: clamp(24px, 4vw, 48px) 0;
}
.nl-title{ font-weight:800; letter-spacing:.2px; }
.nl-text{ color:rgba(255,255,255,.9); max-width:48ch; }
.nl-form{ max-width:520px; margin-left:auto; }
.nl-input{
  background:#e8f0fe;
  border:0; border-radius:.55rem;
  padding:.7rem .9rem;
}
.nl-input:focus{ box-shadow:0 0 0 .2rem rgba(255,255,255,.25); }
.btn-nl{
  background:#fff; color:var(--brand);
  border:0; border-radius:.55rem;
  padding:.7rem 1rem; font-weight:700;
}
.btn-nl:hover{ filter:brightness(.96); }

/* footer */
.site-footer{ background:#fff; padding: clamp(28px, 4vw, 56px) 0; }
.footer-logo{ height:100px; width:auto; }

.ft-head{
  font-weight:800; color:#111827; margin-bottom:.5rem; font-size:1rem;
}
.ft-links{ list-style:none; padding:0; margin:0; }
.ft-links li{ margin:.35rem 0; }
.ft-links a{ color:#4b5563; text-decoration:none; }
.ft-links a:hover{ color:var(--brand); }

.soc{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#eef2ff; color:var(--brand);
}
.soc:hover{ filter:brightness(.95); }

.ft-sep{ border-color:#28292b; margin: clamp(16px, 3vw, 28px) 0; }

.ft-sub{ font-weight:700; color:#111827; margin-bottom:.25rem; }
.ft-muted{ color:#6b7280; }
.ft-link{ color:#374151; text-decoration:none; }
.ft-link:hover{ color:var(--brand); }
.ft-copy{ color:#9ca3af; }

/* responsive */
@media (max-width: 991.98px){
  .nl-form{ margin-left:0; }
}
@media (max-width: 575.98px){
  .nl-title{ font-size:1.4rem; }
  .soc{ width:32px; height:32px; }
}













:root{
  --brand:#1C3D73;
  --accent:#F2B441;
  --ink:#111827;
  --muted:#6b7280;
  --card:#fff;
  --bg:#f8fafc;
  --border:#e5e7eb;
  --shadow:0 12px 28px rgba(0,0,0,.08);
  --radius:16px;
}

/* Container */
.sv-container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* Hero */
.sv-hero{ padding: clamp(28px, 6vw, 64px) 0; background:linear-gradient(180deg,#fff, #f9fbff); }
.sv-title{
  margin:0 0 6px; color:var(--brand);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight:800; line-height:1.15;
}
.sv-sub{ color:var(--muted); font-size: clamp(1rem, .95rem + .4vw, 1.15rem); max-width:70ch }

/* Services Grid */
.sv-grid-wrap{ padding: 18px 0 10px; background:#fff; }
.sv-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width:768px){ .sv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .sv-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.sv-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; display:flex; flex-direction:column; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.sv-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.sv-icn{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
  background:#eef2ff; color:var(--brand); font-size:1.35rem;
}
.sv-card h3{ margin:.35rem 0; font-size:1.15rem; color:#0f172a; font-weight:800 }
.sv-card p{ color:var(--muted); line-height:1.7; margin:0 }
.sv-points{ margin:.2rem 0 0; padding-left:18px; color:#0f172a; line-height:1.6 }
.sv-points li{ margin:.15rem 0 }
.sv-link{
  margin-top:auto; color:var(--brand); text-decoration:none; font-weight:700;
}
.sv-link:hover{ text-decoration:underline }

/* Process */
.sv-process{ background:#fff; padding: 18px 0 6px; }
.sv-sec-title{
  margin:0 0 10px; color:#0f172a; font-weight:800; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
}
.sv-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
@media (min-width:768px){ .sv-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .sv-steps{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.sv-steps li{
  display:flex; align-items:flex-start; gap:10px; background:#fff;
  border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow);
}
.sv-steps .num{
  width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:800;
}

/* Industries */
.sv-industries{ background:#fff; padding: 10px 0 6px; }
.sv-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  background:#f3f4f6; border:1px solid var(--border); color:#0f172a;
  padding:.45rem .7rem; border-radius:999px; font-weight:600; font-size:.95rem;
}

/* FAQ */
.sv-faq{ background:#fff; padding: 10px 0 20px; }
.sv-accordion{ max-width: 900px; }
.acc{
  width:100%; text-align:left; background:#fff; color:#0f172a; border:1px solid var(--border);
  padding:.8rem 1rem; border-radius:12px; font-weight:700; cursor:pointer; margin-bottom:10px;
}
.acc[aria-expanded="true"]{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(28,61,115,.08); }
.panel{
  display:none; padding:.5rem 1rem .9rem; color:var(--muted); line-height:1.7;
}
.panel.is-open{ display:block; }

/* CTA */
.sv-cta{ background: linear-gradient(180deg,#fff, #f8fafc); padding: 24px 0 40px; }
.sv-cta-box{
  background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding: clamp(16px, 3.5vw, 28px); text-align:center;
}
.sv-cta-box h3{ margin:0 0 6px; font-weight:800; color:#0f172a; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); }
.sv-cta-box p{ margin:0 0 12px; color:var(--muted) }

/* Reuse your existing .btn-brand from your site */