:root {
  --brand-primary: #0d6efd;
  --brand-primary-rgb: 13,110,253;
  --brand-secondary: #6c757d;
  --brand-text: #212529;
  --brand-muted: #6c757d;
  --brand-surface: #ffffff;
  --brand-canvas: #ffffff;
  --brand-border: #dee2e6;
  --brand-radius: 0.375rem;
  --brand-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --brand-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --brand-font-headings: inherit;

/* Brand tints (use RGB so we can do alpha nicely) */
--brand-primary-10: rgba(var(--brand-primary-rgb), .10);
--brand-primary-16: rgba(var(--brand-primary-rgb), .16);
--brand-primary-22: rgba(var(--brand-primary-rgb), .22);

--footer-bg: #0b1220;
--footer-link-hover: #ffffff;

--testimonial-bg: linear-gradient(
    160deg,
    rgba(var(--brand-primary-rgb), .22) 0%,
    rgba(var(--brand-primary-rgb), .14) 45%,
    rgba(var(--brand-primary-rgb), .08) 100%
);

  --bs-body-font-family: var(--brand-font-body);
  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-canvas);

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-secondary);
  
  /* 🔑 button variables */
--bs-btn-color: #fff;
--bs-btn-bg: var(--brand-primary);
--bs-btn-border-color: var(--brand-primary);

--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 85%, #000 15%);
--bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 80%, #000 20%);

--bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 75%, #000 25%);
--bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 70%, #000 30%);

  --bs-border-color: var(--brand-border);
  --bs-border-radius: var(--brand-radius);
  --bs-border-radius-lg: calc(var(--brand-radius) + .25rem);

  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--brand-primary) 85%, #000 15%);
  --bs-btn-hover-bg: #fff;
}

body { letter-spacing: .1px; }
h1,h2,h3,h4 { font-family: var(--brand-font-headings); letter-spacing: -0.2px; }

.card { border: 1px solid var(--bs-border-color); box-shadow: var(--brand-shadow); }
.btn-primary { box-shadow: 0 .5rem 1rem rgba(var(--brand-primary-rgb), .18); }
.btn-primary:hover { transform: translateY(-1px); }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 85%, #000 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 80%, #000 20%);

  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 75%, #000 25%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 70%, #000 30%);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 80%, #000 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 75%, #000 25%);
}

.site-header .navbar {
  border-radius: var(--bs-border-radius-lg);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--brand-shadow);
}

.site-brand-text {
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--bs-body-color);
}

.site-header .nav-link:hover {
  background: rgba(var(--bs-primary-rgb), .08);
}

.site-header .nav-link.active {
  background: rgba(var(--bs-primary-rgb), .12);
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--bs-body-color);
  text-decoration: none;
  border: 1px solid transparent;
}

.icon-link:hover {
  background: rgba(var(--bs-primary-rgb), .08);
  border-color: rgba(var(--bs-primary-rgb), .15);
}

.cms-marquee { border-radius: var(--brand-radius); overflow:hidden; box-shadow: var(--brand-shadow); background:#000; }
.cms-marquee__media { position:relative; min-height:320px; background-size:cover; background-position:center; }
.cms-marquee__overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%); }
.cms-marquee__content { position:relative; padding:clamp(1.25rem,3vw,3rem); color:#fff; max-width:54rem; }
.cms-marquee__content .display-5 { font-weight:800; }

.cms-hero__media {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  box-shadow: var(--brand-shadow);
}

.cms-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
                  90deg,
                  rgba(var(--brand-primary-rgb), 0.75) 0%,
                  rgba(var(--brand-primary-rgb), 0.55) 40%,
                  rgba(0, 0, 0, 0.25) 100%
  );
}

/* Quote styling */
.cms-quote {
  margin: 0 0 2rem;
  padding: 2rem 2.5rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  border-left: 6px solid var(--bs-primary);
  border-radius: 1rem;
}

/* Testimonials: default to a soft brand gradient */
.testimonial-carousel {
    border-top: 1px solid rgba(var(--brand-primary-rgb), .18);
}
.testimonial-carousel .carousel-inner {
  background: var(--testimonial-bg);
}
.testimonial-carousel .carousel-item.tc--noimg .position-absolute.top-0.start-0.w-100.h-100 {
  background-image: none !important;
}
/* For no-image slides, use dark text (since background is light) */
.testimonial-carousel .carousel-item.tc--noimg{
  color: var(--brand-text);
}

.testimonial-carousel .carousel-item.tc--noimg blockquote,
.testimonial-carousel .carousel-item.tc--noimg blockquote p,
.testimonial-carousel .carousel-item.tc--noimg figcaption{
  color: var(--brand-text);
}

.testimonial-carousel .carousel-control-prev i,
.testimonial-carousel .carousel-control-next i {
  color: var(--brand-primary);
  font-size: 1.5rem;
  pointer-events: none; /* ← icon never steals the click */
}

/* Optional: make controls/dots match brand a bit more */
.testimonial-carousel .carousel-indicators [data-bs-target]{
  background-color: rgba(var(--brand-primary-rgb), .55);
}
.testimonial-carousel .carousel-indicators .active{
  background-color: rgba(var(--brand-primary-rgb), .95);
}

.nav-pills .nav-link:not(.active):hover {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.nav-pills .nav-link.active {
  background-color: var(--brand-primary);
}