:root {
  --coltech-gray: #50524f;
  --coltech-red: #c5504d;
  --coltech-blue: #217091;
  --coltech-gold: #e0aa55;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
  --brand-divider-gradient: linear-gradient(
    90deg,
    var(--coltech-blue) 0%,
    var(--coltech-blue) 26%,
    var(--coltech-gold) 26%,
    var(--coltech-gold) 52%,
    var(--coltech-red) 52%,
    var(--coltech-red) 78%,
    var(--coltech-gray) 78%,
    var(--coltech-gray) 100%
  );
  --section-divider-gap: clamp(1.15rem, 2.25vw, 1.65rem);
  --section-divider-gap-tight: clamp(0.35rem, 0.85vw, 0.7rem);
  --section-divider-inner-gap: 0.55rem;
  --section-divider-rings-top: clamp(1.35rem, 2.75vw, 2.15rem);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f172a;
  background-color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.surface-card {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(16,24,40,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
}
.surface-pill {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(16,24,40,0.06);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
}
.bg-brand-accent {
  background: linear-gradient(135deg, var(--coltech-blue), var(--coltech-gold) 60%, var(--coltech-red));
}
.text-gradient {
  background: linear-gradient(135deg, var(--coltech-blue), var(--coltech-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Section title — logo-inspired rainbow mark */
.brand-section-title {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

.brand-section-title.max-w-2xl {
  max-width: 42rem;
}

.brand-section-title__logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.brand-section-title__ring {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: -0.35rem;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  background: transparent;
}

.brand-section-title__ring:first-child {
  margin-left: 0;
}

.brand-section-title__ring--blue {
  color: var(--coltech-blue);
  background: rgba(33, 112, 145, 0.12);
  z-index: 4;
}

.brand-section-title__ring--gold {
  color: var(--coltech-gold);
  background: rgba(224, 170, 85, 0.15);
  z-index: 3;
}

.brand-section-title__ring--red {
  color: var(--coltech-red);
  background: rgba(197, 80, 77, 0.12);
  z-index: 2;
}

.brand-section-title__ring--gray {
  color: var(--coltech-gray);
  background: rgba(80, 82, 79, 0.1);
  z-index: 1;
}

.brand-section-title__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coltech-gold);
}

.brand-section-title__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0f172a;
}

.brand-section-title__gradient {
  background: linear-gradient(
    120deg,
    var(--coltech-blue) 0%,
    var(--coltech-gold) 45%,
    var(--coltech-red) 85%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-section-title__sub {
  margin: 0.75rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #64748b;
}

.brand-section-title--inverse .brand-section-title__heading {
  color: #ffffff;
}

.brand-section-title--inverse .brand-section-title__sub {
  color: rgba(255, 255, 255, 0.88);
}

.brand-section-title.mb-12 {
  margin-bottom: 3rem;
}

.brand-section-title.mb-16 {
  margin-bottom: 4rem;
}

/* Top scroll progress — logo brand colors */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  height: 5px;
  pointer-events: none;
  background: rgba(248, 250, 252, 0.65);
}

.scroll-progress__track {
  display: block;
  width: 100%;
  height: 100%;
}

.scroll-progress__fill {
  position: relative;
  height: 100%;
  width: 0;
  min-width: 0;
  background: var(--brand-divider-gradient);
  box-shadow: 0 0 14px rgba(33, 112, 145, 0.35);
  will-change: width;
}

.scroll-progress__logo {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  transform: translate(40%, -50%);
}

.scroll-progress__logo span {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.2rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: #fff;
}

.scroll-progress__logo span:first-child {
  margin-left: 0;
  color: var(--coltech-blue);
  z-index: 4;
}

.scroll-progress__logo span:nth-child(2) {
  color: var(--coltech-gold);
  z-index: 3;
}

.scroll-progress__logo span:nth-child(3) {
  color: var(--coltech-red);
  z-index: 2;
}

.scroll-progress__logo span:nth-child(4) {
  color: var(--coltech-gray);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress__fill {
    transition: none;
  }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px);} to { opacity:1; transform: translateY(0);} }
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
@keyframes sheen { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
/* Uniform section backgrounds */
section {
  background-color: #f8fafc;
  transition: all 0.8s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* Remove gradient backgrounds and make uniform */
.bg-brand-sheen {
  background-color: #f8fafc;
  transition: background 0.8s ease-in-out;
}

/* Enhanced reveal animations with smoother transitions */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.8s ease-out, transform 0.8s ease-out;}
.reveal.is-visible{opacity:1; transform:none;}

/* Smooth hover transitions for cards */
.surface-card {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(16,24,40,0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  transition: all 0.3s ease-in-out;
}

.surface-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  transition: all 0.3s ease-in-out;
}

/* Smooth button transitions */
.btn-primary, .btn-outline {
  transition: all 0.3s ease-in-out;
}

.btn-primary:hover, .btn-outline:hover {
  transform: translateY(-1px);
  transition: all 0.3s ease-in-out;
}
.nav-blur { background: rgba(255,255,255,0.64); border-bottom: 1px solid rgba(16,24,40,0.06); backdrop-filter: blur(10px);}

/* Mobile drawer — brand gradient strip + tinted panel + link cards */
[data-mobile-menu] {
  position: fixed !important;
  background: linear-gradient(
    165deg,
    rgba(240, 249, 255, 0.94) 0%,
    rgba(248, 250, 252, 0.97) 40%,
    rgba(254, 252, 232, 0.82) 75%,
    rgba(255, 245, 240, 0.9) 100%
  ) !important;
  box-shadow: -10px 0 40px rgba(33, 112, 145, 0.16) !important;
  padding-left: calc(1.5rem + 5px) !important;
}
[data-mobile-menu]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  z-index: 0;
  background: linear-gradient(180deg, var(--coltech-blue) 0%, var(--coltech-gold) 50%, var(--coltech-red) 100%);
  pointer-events: none;
}
[data-mobile-menu] > * {
  position: relative;
  z-index: 1;
}
[data-mobile-menu] > div:first-of-type span.font-semibold {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--coltech-blue) !important;
}
[data-mobile-menu] > div:first-of-type button.surface-pill {
  border-color: rgba(33, 112, 145, 0.22);
  color: var(--coltech-blue);
  background: rgba(255, 255, 255, 0.88);
}
[data-mobile-menu] nav a.surface-card {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(33, 112, 145, 0.14) !important;
  color: #1e293b !important;
  font-weight: 500;
  justify-content: flex-start !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 14px rgba(33, 112, 145, 0.07) !important;
}
[data-mobile-menu] nav a.surface-card:hover,
[data-mobile-menu] nav a.surface-card:focus-visible {
  border-color: rgba(33, 112, 145, 0.38) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--coltech-blue) !important;
  box-shadow: 0 6px 22px rgba(33, 112, 145, 0.12) !important;
}
.nav-link-active { color: var(--coltech-blue) !important; }
.btn-primary { background: linear-gradient(135deg, var(--coltech-blue), var(--coltech-gold)); color:#fff; border-radius:999px; padding:.75rem 1.25rem; box-shadow:0 8px 20px rgba(33,112,145,0.25);}
.btn-primary:hover{ filter:brightness(1.05);}
.btn-outline { border:1px solid rgba(15,23,42,0.10); border-radius:999px; padding:.75rem 1.25rem; background:#fff;}
.chip { border-radius:999px; padding:.35rem .65rem; border:1px solid rgba(15,23,42,0.08); background:rgba(255,255,255,0.84);}
.shadow-soft{box-shadow:var(--shadow-soft);}
.rounded-lgx{border-radius:var(--radius-lg);}
.rounded-mdx{border-radius:var(--radius-md);}

/* Professional spacing for sections */
section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

section.py-10 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

section.py-12 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

section.py-14 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

section.py-16 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

section.pb-8 {
  padding-bottom: 4rem;
}

section.pb-12 {
  padding-bottom: 6rem;
}

section.pb-16 {
  padding-bottom: 8rem;
}

/* Enhanced hero spacing */
.hero-wrap {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/* Professional card spacing */
.surface-card {
  padding: 2rem;
}

.surface-card.p-6 {
  padding: 2.5rem;
}

.surface-card.p-8 {
  padding: 3rem;
}

.surface-card.p-12 {
  padding: 4rem;
}

/* Enhanced grid gaps */
.grid.gap-6 {
  gap: 2rem;
}

.grid.gap-8 {
  gap: 2.5rem;
}

/* Professional margins */
.mb-8 {
  margin-bottom: 3rem;
}

.mb-12 {
  margin-bottom: 4rem;
}

.mt-8 {
  margin-top: 3rem;
}

.mt-12 {
  margin-top: 4rem;
}

/* ============================================
   RESPONSIVE STYLES - MOBILE FIRST APPROACH
   ============================================ */

/* Mobile optimizations (up to 640px) */
@media (max-width: 640px) {
  /* Typography adjustments */
  h1, .text-4xl, .text-5xl, .text-6xl {
    font-size: clamp(1.875rem, 5vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  
  h2, .text-3xl {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    line-height: 1.3 !important;
  }
  
  h3, .text-2xl {
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
  }
  
  .text-xl {
    font-size: 1.125rem !important;
  }
  
  .text-lg {
    font-size: 1rem !important;
  }

  /* Section padding adjustments */
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  
  section.py-10, section.py-12, section.py-14, section.py-16 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  section.py-20 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  
  /* Hero adjustments */
  .hero-wrap {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Card padding adjustments */
  .surface-card {
    padding: 1.25rem !important;
  }
  
  .surface-card.p-6, .surface-card.p-8, .surface-card.p-12 {
    padding: 1.5rem !important;
  }
  
  /* Button adjustments */
  .btn-primary, .btn-outline {
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
  }
  
  /* Grid adjustments */
  .grid {
    gap: 1rem !important;
  }
  
  .grid.gap-6, .grid.gap-8 {
    gap: 1.25rem !important;
  }
  
  /* Margin adjustments */
  .mb-8, .mb-12 {
    margin-bottom: 2rem !important;
  }
  
  .mt-8, .mt-12 {
    margin-top: 2rem !important;
  }
  
  /* Container padding */
  .max-w-7xl, .max-w-6xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Main content top padding */
  main.pt-24, main.pt-32 {
    padding-top: 6rem !important;
  }
  
  /* Footer adjustments */
  footer .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Image adjustments */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Overflow handling */
  body, html {
    overflow-x: hidden;
  }
  
  /* Flexible containers */
  .flex-wrap {
    gap: 0.75rem !important;
  }
  
  /* Better touch targets */
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Mobile menu improvements */
  [data-mobile-menu] {
    width: min(85vw, 320px) !important;
  }
}

/* Tablet optimizations (641px to 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Typography adjustments */
  h1, .text-5xl, .text-6xl {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  }
  
  h2, .text-4xl {
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
  }
  
  /* Section padding adjustments */
  section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  
  section.py-20 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  
  /* Hero adjustments */
  .hero-wrap {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  
  /* Card padding adjustments */
  .surface-card {
    padding: 1.75rem !important;
  }
  
  .surface-card.p-8, .surface-card.p-12 {
    padding: 2rem !important;
  }
  
  /* Grid adjustments */
  .grid {
    gap: 1.5rem !important;
  }
  
  .grid.gap-8 {
    gap: 2rem !important;
  }
  
  /* Container padding */
  .max-w-7xl, .max-w-6xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Main content top padding */
  main.pt-32 {
    padding-top: 7rem !important;
  }
}

/* Desktop optimizations (1025px and up) */
@media (min-width: 1025px) {
  /* Smooth hover effects */
  .surface-card:hover {
    transform: translateY(-2px);
  }
  
  .btn-primary:hover, .btn-outline:hover {
    transform: translateY(-1px);
  }
}

/* Print optimizations */
@media print {
  header, footer, [data-mobile-menu], [data-mobile-backdrop], .wa-float {
    display: none !important;
  }
  
  main {
    padding-top: 0 !important;
  }
  
  body {
    padding-bottom: 0 !important;
  }
  
  .surface-card {
    border: 1px solid #e5e7eb;
    box-shadow: none;
    page-break-inside: avoid;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .surface-card {
    border: 2px solid #000;
  }
  
  .btn-primary, .btn-outline {
    border: 2px solid #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Promo CTA strips — full-width local photo (sharp), overlay for readability
   Asset path relative to assets/css/base.css
   -------------------------------------------------------------------------- */
.section-cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #f1f5f9;
  background-image: url('../images/new-images/webp/natural%20colors%20%282%29.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(248, 250, 252, 0.91) 0%,
    rgba(248, 250, 252, 0.76) 45%,
    rgba(255, 255, 255, 0.64) 100%
  );
}

.section-cta-panel > * {
  position: relative;
  z-index: 1;
}

/* Full-bleed CTA with white/light buttons — photo + cool tint (replaces flat gradients) */
.section-cta-panel-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #0c4a6e;
  background-image: url('../images/new-images/webp/natural%20colors%20%282%29.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-cta-panel-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(8, 89, 125, 0.9) 0%,
    rgba(14, 116, 165, 0.84) 50%,
    rgba(8, 72, 110, 0.92) 100%
  );
}

.section-cta-panel-dark--warm::before {
  background: linear-gradient(
    135deg,
    rgba(154, 52, 18, 0.9) 0%,
    rgba(185, 28, 28, 0.86) 50%,
    rgba(127, 29, 29, 0.93) 100%
  );
}

.section-cta-panel-dark > * {
  position: relative;
  z-index: 1;
}

/* Homepage CTA band — strips + full-bleed media block */
.home-cta-band {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.home-cta-band__strip {
  display: block;
  width: 100%;
  height: 4px;
  flex-shrink: 0;
  background: var(--brand-divider-gradient);
  box-shadow: 0 1px 8px rgba(33, 112, 145, 0.12);
}

.home-cta-band__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(18rem, 42vh, 28rem);
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
}

.home-cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-cta-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-cta-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.82) 0%,
    rgba(15, 23, 42, 0.9) 45%,
    rgba(15, 23, 42, 0.94) 100%
  );
}

.home-cta-band__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
}

.cert-strip--after-cta {
  border-top: 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.cert-strip__gallery {
  max-width: 56rem;
  margin-inline: auto;
}

.cert-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.cert-strip__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: contain;
  object-position: center;
  filter: blur(1px);
  transform: scale(1.005);
}

@media (min-width: 768px) {
  .cert-strip__img {
    max-height: 20rem;
  }
}

.home-cta-band__title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.home-cta-band__lead {
  margin: 0 0 2.5rem;
  max-width: 38rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.home-cta-band__note {
  margin: 2rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.home-cta-band__btn {
  color: #ffffff !important;
}

.home-cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .home-cta-band__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.home-cta-band__outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 1rem 2rem;
  background: transparent;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.home-cta-band__outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* Site-wide contact block — brand gradient background */
.site-contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.25rem;
  border: 1px solid rgba(33, 112, 145, 0.14);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  background: linear-gradient(
    128deg,
    rgba(33, 112, 145, 0.14) 0%,
    rgba(224, 170, 85, 0.16) 48%,
    rgba(197, 80, 77, 0.11) 78%,
    rgba(80, 82, 79, 0.08) 100%
  );
}

.site-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.86) 55%,
    rgba(248, 250, 252, 0.9) 100%
  );
}

.site-contact__bar {
  display: block;
  position: relative;
  z-index: 2;
  height: 4px;
  background: var(--brand-divider-gradient);
}

.site-contact__inner {
  position: relative;
  z-index: 1;
  padding: 1.35rem 1.2rem 1.2rem;
}

@media (min-width: 641px) {
  .site-contact__inner {
    padding: 1.6rem 1.6rem 1.35rem;
  }
}

.site-contact__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(33, 112, 145, 0.12);
}

.site-contact__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coltech-gold);
}

.site-contact__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--coltech-blue) 0%, var(--coltech-gold) 55%, var(--coltech-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-contact__intro {
  margin: 0.35rem 0 0;
  max-width: 30rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
}

.site-contact__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--coltech-blue), var(--coltech-gold));
  box-shadow: 0 6px 18px rgba(33, 112, 145, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-contact__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(33, 112, 145, 0.28);
}

.site-contact__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .site-contact__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.25rem;
    align-items: start;
  }
}

.site-contact__office {
  display: flex;
  gap: 0.85rem;
  margin: 0;
  padding: 1rem 1.05rem;
  border-radius: 0.9rem;
  font-style: normal;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(33, 112, 145, 0.14);
  box-shadow: 0 4px 18px rgba(33, 112, 145, 0.06);
}

.site-contact__office-icon {
  flex-shrink: 0;
}

.site-contact__office-body {
  min-width: 0;
}

.site-contact__office-org {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.site-contact__office-address {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}

.site-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-contact__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem 0.7rem 0.7rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-left-width: 3px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.site-contact__row:hover {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 20px rgba(33, 112, 145, 0.1);
  transform: translateX(3px);
}

.site-contact__row--blue { border-left-color: var(--coltech-blue); }
.site-contact__row--gold { border-left-color: var(--coltech-gold); }
.site-contact__row--red { border-left-color: var(--coltech-red); }
.site-contact__row--accent {
  border-left-color: var(--coltech-blue);
}

.site-contact__row-icon {
  flex-shrink: 0;
}

.site-contact__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.site-contact__row-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.site-contact__row--blue .site-contact__row-label { color: var(--coltech-blue); }
.site-contact__row--gold .site-contact__row-label { color: #9a6f2e; }
.site-contact__row--red .site-contact__row-label { color: var(--coltech-red); }
.site-contact__row--accent .site-contact__row-label { color: var(--coltech-gray); }

.site-contact__row-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

a.site-contact__row:hover .site-contact__row-value {
  color: var(--coltech-blue);
}

.site-contact__row-meta {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}

.site-contact__row-meta a {
  font-weight: 600;
  color: var(--coltech-blue);
  text-decoration: none;
}

.site-contact__row-meta a:hover {
  text-decoration: underline;
}

.site-contact__map-link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--coltech-blue);
  text-decoration: none;
}

.site-contact__map-link::after {
  content: "→";
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
}

.site-contact__map-link:hover {
  color: #0c4a6e;
}

.site-contact__map-link:hover::after {
  transform: translateX(2px);
}

/* Contact strip — minimal, photo background */
.site-contact-band {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  isolation: isolate;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1);
}

.site-contact-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.site-contact-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.site-contact-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(15, 23, 42, 0.88) 0%,
    rgba(33, 112, 145, 0.72) 50%,
    rgba(15, 23, 42, 0.9) 100%
  );
}

.site-contact-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 1.75rem);
  gap: 1.25rem;
}

.site-contact-band__head {
  margin: 0;
}

.site-contact-band__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coltech-gold);
}

.site-contact-band__heading {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #ffffff;
}

.site-contact-band__heading-accent {
  background: linear-gradient(120deg, var(--coltech-gold) 0%, #f5d9a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-contact-band__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  width: 100%;
  max-width: 22rem;
}

@media (min-width: 520px) {
  .site-contact-band__actions {
    flex-direction: row;
    justify-content: center;
    max-width: 32rem;
  }
}

.site-contact-band__pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-contact-band__pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.site-contact-band__pill--sales {
  border-left: 3px solid var(--coltech-gold);
}

.site-contact-band__pill--wa {
  border-left: 3px solid #34d399;
}

.site-contact-band__pill-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
}

.site-contact-band__pill-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.site-contact-band__pill-value {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.site-contact-band__more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-contact-band__more:hover {
  color: #ffffff;
}

.brand-icon--sm {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.6rem;
  flex-shrink: 0;
}

.brand-icon--sm svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* Footer social icons (newsletter column) */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: #217091;
  background: rgba(33, 112, 145, 0.08);
  border: 1px solid rgba(33, 112, 145, 0.18);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social__link:hover {
  color: #fff;
  background: #217091;
  border-color: #217091;
  transform: translateY(-1px);
}

.footer-social__link--wa:hover {
  background: #047857;
  border-color: #047857;
}

/* Floating WhatsApp CTA — bottom left */
.wa-float {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  pointer-events: none;
  margin: 0;
}

.wa-float > * {
  pointer-events: auto;
}

.wa-float__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    0 4px 18px rgba(37, 211, 102, 0.42),
    0 0 0 6px rgba(37, 211, 102, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wa-float__btn:hover {
  transform: scale(1.06);
  box-shadow:
    0 6px 24px rgba(37, 211, 102, 0.5),
    0 0 0 8px rgba(37, 211, 102, 0.16);
}

.wa-float__icon {
  width: 1.65rem;
  height: 1.65rem;
}

.wa-float__card {
  display: none;
  max-width: 16.75rem;
  padding: 1rem 1.15rem;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.07);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14);
}

.wa-float__eyebrow {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.wa-float__title {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.wa-float__sub {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #64748b;
}

.wa-float__link {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #047857;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wa-float__link:hover {
  color: #065f46;
}

@media (min-width: 640px) {
  .wa-float__card {
    display: block;
  }
}

/* Consultation popup (home CTA) */
.consult-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.consult-modal.hidden {
  display: none;
}

.consult-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.consult-modal__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  max-height: min(92vh, 52rem);
  overflow-y: auto;
}

.consult-modal__panel {
  position: relative;
  padding: 1.5rem;
  margin: 0 auto;
}

@media (min-width: 641px) {
  .consult-modal__panel {
    padding: 2rem;
  }
}

.consult-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.consult-modal__close:hover {
  background: #fff;
  color: #0f172a;
}

/* Under fixed header (h-24 = 6rem): global section rules use !important on small screens and were collapsing hero top padding. */
section.hero-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8rem !important;
}

/* In-flow column after absolute layers: grow to fill hero band so title + intro sit vertically centered */
section.hero-top.relative.overflow-hidden > div.relative.z-10 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

/* Breadcrumb — brand-colored pills + band */
.site-breadcrumb-band {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 0.85rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.site-breadcrumb-band__accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--brand-divider-gradient);
}

.site-breadcrumb-band__inner {
  position: relative;
  z-index: 1;
}

.site-breadcrumb-band .site-breadcrumb {
  margin-bottom: 0;
}

.site-breadcrumb {
  margin: 0 0 1.25rem;
}

.site-breadcrumb--inverse {
  margin-bottom: 1rem;
}

.site-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-breadcrumb__item {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.site-breadcrumb__sep {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #cbd5e1;
}

.site-breadcrumb__chevron {
  width: 1rem;
  height: 1rem;
}

.site-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #475569;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.95);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.site-breadcrumb__link:hover {
  color: var(--coltech-blue);
  border-color: rgba(33, 112, 145, 0.28);
  box-shadow: 0 4px 14px rgba(33, 112, 145, 0.1);
}

.site-breadcrumb__home-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  color: var(--coltech-blue);
}

.site-breadcrumb__current {
  display: inline-block;
  max-width: 100%;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  background: linear-gradient(
    135deg,
    rgba(33, 112, 145, 0.1) 0%,
    rgba(224, 170, 85, 0.14) 55%,
    rgba(197, 80, 77, 0.08) 100%
  );
  border: 1px solid rgba(33, 112, 145, 0.18);
  box-shadow: 0 4px 16px rgba(33, 112, 145, 0.08);
}

.site-breadcrumb--inverse .site-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

.site-breadcrumb--inverse .site-breadcrumb__link {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.site-breadcrumb--inverse .site-breadcrumb__link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.38);
}

.site-breadcrumb--inverse .site-breadcrumb__home-icon {
  color: #ffffff;
}

.site-breadcrumb--inverse .site-breadcrumb__current {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}

@media (max-width: 480px) {
  .site-breadcrumb__link span,
  .site-breadcrumb__current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-breadcrumb__item--current {
    max-width: 100%;
  }
}

/* Image hero after breadcrumb (product color pages): vertically center title + body card */
section.hero-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section.hero-stack.relative.overflow-hidden > div.relative.z-10 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  width: 100%;
  color: #ffffff;
}

/* Product color pages: body copy on image hero — white text (overrides Tailwind slate utilities) */
section.hero-stack .relative.z-10 > .bg-white\/88,
section.hero-stack .relative.z-10 > [class*="bg-white/"] {
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

section.hero-stack .relative.z-10 p,
section.hero-stack .relative.z-10 li,
section.hero-stack .relative.z-10 ul,
section.hero-stack .relative.z-10 strong,
section.hero-stack .relative.z-10 [class*="text-slate"] {
  color: #ffffff !important;
}

section.hero-stack .relative.z-10 p {
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}

section.hero-stack .relative.z-10 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

section.hero-stack .relative.z-10 .rounded-full,
section.hero-stack .relative.z-10 [class*="bg-cyan-"],
section.hero-stack .relative.z-10 [class*="bg-blue-"],
section.hero-stack .relative.z-10 [class*="bg-indigo-"],
section.hero-stack .relative.z-10 [class*="bg-orange-"],
section.hero-stack .relative.z-10 [class*="bg-red-"],
section.hero-stack .relative.z-10 [class*="bg-pink-"],
section.hero-stack .relative.z-10 [class*="bg-lime-"],
section.hero-stack .relative.z-10 [class*="bg-green-"],
section.hero-stack .relative.z-10 [class*="bg-emerald-"] {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
}

section.hero-stack .relative.z-10 [class*="text-cyan-"],
section.hero-stack .relative.z-10 [class*="text-blue-"],
section.hero-stack .relative.z-10 [class*="text-indigo-"],
section.hero-stack .relative.z-10 [class*="text-orange-"],
section.hero-stack .relative.z-10 [class*="text-red-"],
section.hero-stack .relative.z-10 [class*="text-pink-"],
section.hero-stack .relative.z-10 [class*="text-lime-"],
section.hero-stack .relative.z-10 [class*="text-green-"],
section.hero-stack .relative.z-10 [class*="text-emerald-"] {
  color: rgba(255, 255, 255, 0.92) !important;
}

@media (min-width: 641px) {
  section.hero-top {
    padding-top: 8.5rem !important;
  }
}

@media (min-width: 1025px) {
  section.hero-top {
    padding-top: 9rem !important;
  }
}

/* Branded icon tiles (organizational blue / gold) */
.brand-icon,
.industry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  color: #ffffff;
  background: linear-gradient(145deg, var(--coltech-blue) 0%, #1a5f78 100%);
  box-shadow: 0 4px 14px rgba(33, 112, 145, 0.28);
}

.brand-icon svg,
.industry-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.brand-icon--lg {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
}

.brand-icon--lg svg {
  width: 1.75rem;
  height: 1.75rem;
}

.brand-icon--gold,
.industry-icon--gold {
  background: linear-gradient(145deg, var(--coltech-gold) 0%, #c4923f 100%);
  box-shadow: 0 4px 14px rgba(224, 170, 85, 0.35);
}

.brand-icon--accent,
.industry-icon--accent {
  background: linear-gradient(145deg, var(--coltech-blue) 0%, var(--coltech-gold) 100%);
  box-shadow: 0 4px 14px rgba(33, 112, 145, 0.22);
}

/* Section dividers — two styles, alternating (logo colors; hero = first section) */
main > section + section:not(.section--no-divider) {
  padding-top: 0;
}

.brand-section-divider {
  display: block;
  margin: 0;
  border: 0;
  opacity: 0.96;
  pointer-events: none;
}

/* A: centered gradient pill */
hr.brand-section-divider--bar {
  display: block;
  height: 5px;
  max-width: 52rem;
  margin: var(--section-divider-gap-tight) auto clamp(0.6rem, 1.2vw, 0.85rem);
  border-radius: 9999px;
  background: var(--brand-divider-gradient);
  box-shadow: 0 2px 14px rgba(33, 112, 145, 0.14);
}

main > section + section:not(.section--no-divider):nth-of-type(even)::before {
  content: "";
  display: block;
  position: relative;
  z-index: 30;
  height: 5px;
  max-width: 52rem;
  margin: var(--section-divider-gap-tight) auto clamp(0.6rem, 1.2vw, 0.85rem);
  border-radius: 9999px;
  background: var(--brand-divider-gradient);
  box-shadow: 0 2px 14px rgba(33, 112, 145, 0.14);
  pointer-events: none;
}

main > section:first-of-type + section:not(.section--no-divider)::before {
  margin-top: clamp(1.1rem, 2.25vw, 1.65rem);
  margin-bottom: clamp(0.65rem, 1.25vw, 0.9rem);
}

/* B: full-width segmented strip + logo rings */
.brand-section-divider--segments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-divider-inner-gap);
  width: 100%;
  margin: var(--section-divider-gap) 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.brand-section-divider--segments .brand-section-divider__rings {
  margin-top: 0.65rem;
}

.brand-section-divider__line {
  display: block;
  width: min(100%, 72rem);
  height: 4px;
  border-radius: 2px;
  background: var(--brand-divider-gradient);
  box-shadow: 0 1px 8px rgba(33, 112, 145, 0.12);
}

.brand-section-divider__rings {
  display: block;
  width: 4.25rem;
  height: 0.95rem;
  background:
    radial-gradient(circle at 12% 50%, var(--coltech-blue) 0.32rem, transparent 0.33rem),
    radial-gradient(circle at 38% 50%, var(--coltech-gold) 0.32rem, transparent 0.33rem),
    radial-gradient(circle at 62% 50%, var(--coltech-red) 0.32rem, transparent 0.33rem),
    radial-gradient(circle at 88% 50%, var(--coltech-gray) 0.32rem, transparent 0.33rem);
}

main > section + section:not(.section--no-divider):nth-of-type(odd)::before {
  content: "";
  display: block;
  position: relative;
  z-index: 30;
  width: min(calc(100% - 2rem), 72rem);
  height: 4px;
  margin: var(--section-divider-gap) auto var(--section-divider-inner-gap);
  border-radius: 2px;
  background: var(--brand-divider-gradient);
  box-shadow: 0 1px 8px rgba(33, 112, 145, 0.12);
  pointer-events: none;
}

main > section + section:not(.section--no-divider):nth-of-type(odd)::after {
  content: "";
  display: block;
  position: relative;
  z-index: 30;
  width: 4.25rem;
  height: 0.95rem;
  margin: var(--section-divider-rings-top) auto var(--section-divider-gap);
  background:
    radial-gradient(circle at 12% 50%, var(--coltech-blue) 0.32rem, transparent 0.33rem),
    radial-gradient(circle at 38% 50%, var(--coltech-gold) 0.32rem, transparent 0.33rem),
    radial-gradient(circle at 62% 50%, var(--coltech-red) 0.32rem, transparent 0.33rem),
    radial-gradient(circle at 88% 50%, var(--coltech-gray) 0.32rem, transparent 0.33rem);
  pointer-events: none;
}

main > section.section--no-divider::before,
main > section.section--no-divider::after,
main > section.section--no-divider + section::before,
main > section.section--no-divider + section::after {
  content: none;
  display: none;
  margin: 0;
  height: 0;
  width: 0;
}