/* ============================================================
   eXenium Technologies — Brand Stylesheet
   Stack: Bootstrap 5.3 + custom brand layer
   Fonts: Manrope · IBM Plex Sans · Montserrat · IBM Plex Mono
   ============================================================ */

/* ── 1. Brand Tokens ─────────────────────────────────────── */
:root {
  --ember:       #F04B23;
  --ember-dk:    #C93B18;
  --ember-lt:    #FDE8E3;
  --navy:        #0F172A;
  --navy-lt:     #1E293B;
  --blue:        #2563EB;
  --green:       #16A34A;

  --tx:          #475569;
  --tx2:         #64748B;
  --tx3:         #94A3B8;
  --divider:     #CBD5E1;
  --card-border: #E2E8F0;
  --alt-bg:      #F1F5F9;
  --canvas:      #F8FAFC;

  --font-display: 'Manrope',       system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-label:   'Montserrat',    system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --nav-h: 68px;
}

/* ── 2. Global Base ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:   var(--font-body);
  font-size:     16px;
  line-height:   1.65;
  color:         var(--tx);
  background:    var(--canvas);
  overflow-x:    hidden;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

img { display: block; max-width: 100%; }

section { padding: 88px 0; }
section.bg-alt { background: var(--alt-bg); }
section.bg-white { background: #fff; }

/* ── 3. Typography helpers ───────────────────────────────── */
.overline {
  font-family:    var(--font-label);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--ember);
  display:        inline-block;
  margin-bottom:  12px;
}

.section-title {
  font-family:    var(--font-display);
  font-size:      clamp(26px, 3.2vw, 40px);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--navy);
  margin-bottom:  14px;
}

.section-body {
  font-size:   16px;
  line-height: 1.7;
  color:       var(--tx2);
  max-width:   580px;
}

.data-tag {
  font-family: var(--font-mono);
  font-size:   13px;
  font-weight: 500;
  color:       var(--ember);
}

.brand-divider {
  width:         40px;
  height:        3px;
  background:    var(--ember);
  border-radius: 2px;
  margin:        16px 0 24px;
}

/* ── 4. Buttons ──────────────────────────────────────────── */
.btn-ember {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    var(--ember);
  color:         #fff;
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   600;
  padding:       12px 26px;
  border:        2px solid var(--ember);
  border-radius: 4px;
  transition:    background 0.2s, transform 0.15s;
  white-space:   nowrap;
}
.btn-ember:hover,
.btn-ember:focus {
  background:   var(--ember-dk);
  border-color: var(--ember-dk);
  color:        #fff;
  transform:    translateY(-1px);
}

.btn-nav-outline {
  display:       inline-flex;
  align-items:   center;
  gap:           7px;
  background:    transparent;
  color:         var(--navy);
  font-family:   var(--font-body);
  font-size:     13px;
  font-weight:   600;
  padding:       8px 16px;
  border:        2px solid var(--card-border);
  border-radius: 4px;
  transition:    border-color 0.2s, color 0.2s;
  white-space:   nowrap;
}
.btn-nav-outline:hover { border-color: var(--navy); color: var(--navy); }

.btn-outline-brand {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    transparent;
  color:         var(--navy);
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   600;
  padding:       10px 26px;
  border:        2px solid var(--card-border);
  border-radius: 4px;
  transition:    border-color 0.2s, color 0.2s;
}
.btn-outline-brand:hover { border-color: var(--navy); color: var(--navy); }

.btn-white-brand {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    #fff;
  color:         var(--ember);
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   700;
  padding:       12px 28px;
  border:        2px solid #fff;
  border-radius: 4px;
  transition:    background 0.2s, transform 0.15s;
}
.btn-white-brand:hover { background: rgba(255,255,255,.88); color: var(--ember); transform: translateY(-1px); }

.btn-ghost-brand {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    transparent;
  color:         #F8FAFC;
  font-family:   var(--font-body);
  font-size:     14px;
  font-weight:   600;
  padding:       10px 26px;
  border:        2px solid rgba(248,250,252,.35);
  border-radius: 4px;
  transition:    border-color 0.2s;
}
.btn-ghost-brand:hover { border-color: #F8FAFC; color: #F8FAFC; }

/* ── 5. Navbar ───────────────────────────────────────────── */
.site-nav {
  position:    sticky;
  top:         0;
  z-index:     1030;
  height:      var(--nav-h);
  background:  #fff;
  border-bottom: 1px solid var(--card-border);
  transition:  box-shadow 0.3s;
}
.site-nav .navbar {
  height:  var(--nav-h);
  padding: 0;
}
.site-nav .navbar-brand img {
  height:     44px;
  width:      auto;
  object-fit: contain;
}

/* Nav links — Montserrat all-caps */
.site-nav .nav-link {
  font-family:    var(--font-label) !important;
  font-size:      10.5px !important;
  font-weight:    600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color:          var(--navy) !important;
  padding:        8px 12px !important;
  border-radius:  4px;
  transition:     color 0.15s, background 0.15s;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active {
  color:      var(--ember) !important;
  background: var(--ember-lt);
}

/* Dropdown — desktop hover behavior */
.site-nav .dropdown-menu {
  border:        1px solid var(--card-border);
  border-radius: 8px;
  box-shadow:    0 10px 32px rgba(15,23,42,.10);
  padding:       6px 0;
  margin-top:    0 !important;    /* gap handled by padding on nav-item */
  min-width:     220px;
  animation:     ddSlide 0.15s ease;
  /* Stay open while cursor travels from trigger to menu */
  pointer-events: auto;
}
@keyframes ddSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Desktop: open on hover, close on mouse-leave ─────── */
@media (min-width: 992px) {
  /* Invisible bridge between nav-link and dropdown-menu prevents gap-close */
  .site-nav .nav-item.dropdown {
    padding-bottom: 6px;
  }
  .site-nav .nav-item.dropdown > .nav-link {
    padding-bottom: 8px !important;
  }
  /* Show menu when nav-item is hovered (CSS fallback) */
  .site-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
  }
  /* Prevent Bootstrap's click-open from conflicting */
  .site-nav .nav-item.dropdown > [data-bs-toggle="dropdown"] {
    pointer-events: auto;
  }
}

.site-nav .dropdown-item {
  font-family: var(--font-body);
  font-size:   14px;
  color:       var(--tx);
  padding:     9px 18px;
  transition:  color 0.15s, background 0.15s;
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
  color:      var(--ember);
  background: var(--ember-lt);
}
.site-nav .navbar-toggler { border: 1px solid var(--card-border); }
.site-nav .navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .site-nav { height: auto; min-height: var(--nav-h); }
  .site-nav .navbar { height: auto; }
  .site-nav .navbar-collapse {
    background:    #fff;
    border-top:    1px solid var(--card-border);
    padding:       14px 20px 20px;
    box-shadow:    0 8px 24px rgba(15,23,42,.08);
  }
  .site-nav .dropdown-menu {
    box-shadow:    none;
    border:        none;
    border-left:   2px solid var(--ember-lt);
    border-radius: 0;
    padding-left:  12px;
    margin-top:    2px !important;
  }
  .nav-cta-wrap { display: none !important; }
}

/* ── 6. Page Banner (inner pages) ───────────────────────── */
.page-banner {
  background: var(--navy);
  padding:    72px 0 56px;
  position:   relative;
  overflow:   hidden;
}
.page-banner::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(240,75,35,.15) 0%, transparent 60%);
  pointer-events: none;
}
.page-banner .banner-img {
  position:   absolute;
  right:      0;
  top:        0;
  bottom:     0;
  width:      40%;
  object-fit: cover;
  opacity:    0.15;
}
.banner-inner { position: relative; z-index: 1; }

.banner-title {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 5vw, 64px);
  font-weight:    700;
  line-height:    1.05;
  letter-spacing: -0.025em;
  color:          #F8FAFC;
  margin-bottom:  12px;
}
.banner-title em  { font-style: normal; color: var(--ember); }
.banner-subtitle  { font-size: 17px; line-height: 1.7; color: rgba(248,250,252,.55); max-width: 560px; }

.breadcrumb-nav {
  display:        flex;
  align-items:    center;
  gap:            8px;
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(248,250,252,.35);
  margin-bottom:  16px;
}
.breadcrumb-nav a   { color: rgba(248,250,252,.45); transition: color 0.15s; }
.breadcrumb-nav a:hover { color: var(--ember); }
.breadcrumb-nav .sep { font-size: 8px; color: rgba(248,250,252,.2); }

@media (max-width: 767.98px) {
  .page-banner { padding: 52px 0 40px; }
  .page-banner .banner-img { display: none; }
}

/* ── 7. Hero (homepage) ──────────────────────────────────── */
.hero-section {
  background:  var(--canvas);
  min-height:  calc(100vh - var(--nav-h));
  display:     flex;
  align-items: stretch;
  overflow:    hidden;
}
.hero-text-col {
  flex:               0 0 50%;
  display:            flex;
  flex-direction:     column;
  justify-content:    center;
  padding:            80px 64px 80px 80px;
  border-right:       1px solid var(--card-border);
}
.hero-img-col {
  flex:     1;
  position: relative;
  overflow: hidden;
}
.hero-img-col img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center;
}
.hero-img-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(15,23,42,.18) 0%, transparent 50%);
}
.hero-label {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-family:    var(--font-label);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--tx2);
  margin-bottom:  20px;
}
.hero-label .label-line {
  width:      28px;
  height:     2px;
  background: var(--ember);
  display:    inline-block;
}
.hero-headline {
  font-family:    var(--font-display);
  font-size:      clamp(44px, 5vw, 68px);
  font-weight:    700;
  line-height:    1.08;
  letter-spacing: -0.025em;
  color:          var(--navy);
  margin-bottom:  10px;
}
.hero-headline em { font-style: normal; color: var(--ember); }

.hero-tagline {
  font-family:    var(--font-display);
  font-size:      clamp(15px, 1.8vw, 20px);
  font-weight:    400;
  color:          var(--tx2);
  letter-spacing: 0.04em;
  margin-bottom:  22px;
}
.hero-tagline strong { color: var(--ember); font-weight: 700; }

.hero-desc {
  font-size:     16px;
  line-height:   1.7;
  color:         var(--tx2);
  max-width:     480px;
  margin-bottom: 36px;
}
.hero-trust-row {
  margin-top:   40px;
  padding-top:  32px;
  border-top:   1px solid var(--card-border);
  display:      flex;
  align-items:  center;
  gap:          18px;
  flex-wrap:    wrap;
}
.trust-label {
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--tx3);
}
.trust-pill {
  height:         26px;
  padding:        2px 12px;
  background:     var(--alt-bg);
  border:         1px solid var(--card-border);
  border-radius:  3px;
  font-family:    var(--font-label);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--tx3);
  display:        inline-flex;
  align-items:    center;
}

/* Proof chip overlay on hero image */
.hero-chips {
  position:  absolute;
  bottom:    28px;
  left:      28px;
  right:     28px;
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
  z-index:   2;
}
.hero-chip {
  background:      rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border:          1px solid rgba(255,255,255,.6);
  border-radius:   8px;
  padding:         10px 16px;
  text-align:      center;
}
.hero-chip .chip-num {
  font-family: var(--font-mono);
  font-size:   20px;
  font-weight: 500;
  color:       var(--ember);
  line-height: 1;
}
.hero-chip .chip-lbl {
  font-family:    var(--font-label);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--tx2);
  margin-top:     3px;
}

@media (max-width: 991.98px) {
  .hero-section    { flex-direction: column; min-height: auto; }
  .hero-text-col   { flex: none; padding: 56px 24px; border-right: none; border-bottom: 1px solid var(--card-border); }
  .hero-img-col    { flex: none; height: 320px; }
}

/* ── 8. Ticker Strip ─────────────────────────────────────── */
.ticker-strip {
  background:  var(--ember);
  padding:     10px 0;
  overflow:    hidden;
  white-space: nowrap;
}
.ticker-inner {
  display:   inline-flex;
  animation: tickSlide 28s linear infinite;
}
@keyframes tickSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tick-item {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-family:    var(--font-label);
  font-size:      10.5px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #fff;
  padding:        0 26px;
}
.tick-sep {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    rgba(255,255,255,.5);
}

/* ── 9. Feature Cards ────────────────────────────────────── */
.feat-card {
  background:    #fff;
  border:        1px solid var(--card-border);
  border-radius: 12px;
  padding:       32px;
  height:        100%;
  transition:    transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.feat-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 14px 36px rgba(15,23,42,.09);
  border-color: rgba(240,75,35,.2);
}
.feat-icon {
  width:         48px;
  height:        48px;
  background:    var(--ember-lt);
  border-radius: 10px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--ember);
  font-size:     22px;
  margin-bottom: 18px;
  flex-shrink:   0;
}
.feat-title {
  font-family:   var(--font-display);
  font-size:     19px;
  font-weight:   700;
  color:         var(--navy);
  margin-bottom: 10px;
  line-height:   1.2;
}
.feat-desc {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--tx2);
  margin:      0;
}

/* ── 10. Service Cards (with image) ─────────────────────── */
.service-card {
  background:    #fff;
  border:        1px solid var(--card-border);
  border-radius: 12px;
  overflow:      hidden;
  height:        100%;
  display:       flex;
  flex-direction: column;
  transition:    transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.service-card:hover {
  transform:    translateY(-5px);
  box-shadow:   0 16px 40px rgba(15,23,42,.10);
  border-color: rgba(240,75,35,.2);
}
/* sc-img-wrap must NOT have overflow:hidden — the icon badge sits below it */
.sc-img-wrap {
  height:      190px;
  overflow:    visible;           /* allow icon badge to overflow downward */
  position:    relative;
  flex-shrink: 0;
}
/* img-clip clips ONLY the photo, keeping the icon fully visible */
.sc-img-wrap .img-clip {
  height:        100%;
  overflow:      hidden;
  border-radius: 0;              /* card itself clips top corners */
}
.sc-img-wrap .img-clip img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  transition:  transform 0.5s ease;
}
.service-card:hover .sc-img-wrap .img-clip img { transform: scale(1.06); }

/* Icon badge: straddles image bottom + card body top */
.sc-icon {
  position:      absolute;
  bottom:        -19px;          /* half below image, half above card body */
  left:          20px;
  width:         38px;
  height:        38px;
  background:    var(--ember);
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  font-size:     17px;
  box-shadow:    0 4px 14px rgba(240,75,35,.4);
  z-index:       10;             /* above both image and body */
}
.sc-body {
  padding:        30px 22px 22px; /* extra top padding clears the protruding icon */
  flex:           1;
  display:        flex;
  flex-direction: column;
}
.sc-title {
  font-family:   var(--font-display);
  font-size:     18px;
  font-weight:   700;
  color:         var(--navy);
  margin-bottom: 10px;
  line-height:   1.2;
  transition:    color 0.2s;
}
.service-card:hover .sc-title { color: var(--ember); }

.sc-desc {
  font-size:     14px;
  line-height:   1.65;
  color:         var(--tx2);
  flex:          1;
  margin-bottom: 16px;
}
.sc-link {
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--blue);
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  transition:     color 0.2s;
}
.sc-link i { font-size: 10px; transition: transform 0.2s; }
.service-card:hover .sc-link i { transform: translateX(4px); }

/* ── 11. Proof / Metrics (Navy band) ─────────────────────── */
.proof-band {
  background: var(--navy);
  position:   relative;
  overflow:   hidden;
}
.proof-band::before {
  content:        'X';
  position:       absolute;
  right:          -40px;
  top:            50%;
  transform:      translateY(-50%);
  font-family:    var(--font-display);
  font-size:      360px;
  font-weight:    700;
  color:          rgba(255,255,255,.025);
  line-height:    1;
  pointer-events: none;
  user-select:    none;
}
.proof-grid {
  display:     grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255,255,255,.06);
}
.proof-item {
  padding:      52px 40px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.proof-num {
  font-family:    var(--font-mono);
  font-size:      52px;
  font-weight:    500;
  color:          var(--ember);
  line-height:    1;
  letter-spacing: -0.02em;
}
.proof-suffix { font-size: 28px; }

.proof-label {
  font-family:    var(--font-label);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #64748B;
  margin-top:     8px;
}
.proof-desc {
  font-size:   13px;
  color:       #334155;
  margin-top:  6px;
  line-height: 1.5;
}
@media (max-width: 991.98px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .proof-grid { grid-template-columns: 1fr; } }

/* ── 12. Approach Steps ──────────────────────────────────── */
.approach-img-wrap {
  border-radius: 12px;
  overflow:      hidden;
  height:        480px;
  position:      relative;
}
.approach-img-wrap img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
}
.approach-img-wrap .ember-bar {
  position:   absolute;
  top:        0; left: 0; bottom: 0;
  width:      4px;
  background: var(--ember);
  z-index:    1;
}
.approach-rating-badge {
  position:      absolute;
  bottom:        24px;
  right:         24px;
  background:    var(--navy);
  border-radius: 10px;
  padding:       18px 22px;
  z-index:       2;
}
.approach-rating-badge .rating-num {
  font-family: var(--font-mono);
  font-size:   32px;
  font-weight: 500;
  color:       var(--ember);
  line-height: 1;
}
.approach-rating-badge .rating-lbl {
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #CBD5E1;
  margin-top:     4px;
}
.approach-step {
  display:        flex;
  gap:            18px;
  align-items:    flex-start;
  padding:        22px 0;
  border-bottom:  1px solid var(--card-border);
}
.approach-step:last-child { border-bottom: none; }

.step-num {
  flex-shrink:    0;
  width:          46px;
  height:         46px;
  background:     var(--ember-lt);
  border:         2px solid var(--ember);
  border-radius:  8px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-family:    var(--font-mono);
  font-size:      15px;
  font-weight:    500;
  color:          var(--ember);
}
.step-title {
  font-family:   var(--font-display);
  font-size:     18px;
  font-weight:   700;
  color:         var(--navy);
  margin-bottom: 5px;
  line-height:   1.2;
}
.step-desc {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--tx2);
  margin:      0;
}

/* ── 13. Industry Tags ───────────────────────────────────── */
.industry-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ind-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  background:    #fff;
  border:        1px solid var(--card-border);
  border-radius: 100px;
  padding:       9px 18px;
  font-size:     14px;
  color:         var(--tx);
  transition:    background 0.2s, border-color 0.2s, color 0.2s;
}
.ind-tag:hover {
  background:   var(--ember-lt);
  border-color: rgba(240,75,35,.3);
  color:        var(--ember);
}
.ind-tag i { font-size: 14px; color: var(--ember); }

/* ── 14. CTA Section ─────────────────────────────────────── */
.cta-section {
  background: var(--ember);
  padding:    80px 0;
  position:   relative;
  overflow:   hidden;
}
.cta-section::after {
  content:        'eXenium';
  position:       absolute;
  right:          -20px;
  bottom:         -10px;
  font-family:    var(--font-display);
  font-size:      100px;
  font-weight:    700;
  color:          rgba(255,255,255,.06);
  line-height:    1;
  pointer-events: none;
  white-space:    nowrap;
}
.cta-title {
  font-family:    var(--font-display);
  font-size:      clamp(28px, 4vw, 48px);
  font-weight:    700;
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          #fff;
  margin-bottom:  14px;
}
.cta-subtitle {
  font-size:     16px;
  line-height:   1.7;
  color:         rgba(248,250,252,.75);
  max-width:     500px;
  margin-bottom: 32px;
}
.cta-checklist-card {
  background:    rgba(255,255,255,.12);
  border:        1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding:       18px 22px;
  display:       flex;
  gap:           14px;
  align-items:   flex-start;
}
.cta-checklist-card .check-icon {
  color:     var(--green);
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cta-checklist-card .check-title {
  font-family:   var(--font-display);
  font-size:     15px;
  font-weight:   700;
  color:         #F8FAFC;
  margin-bottom: 4px;
}
.cta-checklist-card .check-desc {
  font-size:   13px;
  color:       rgba(248,250,252,.65);
  line-height: 1.5;
  margin:      0;
}

/* ── 15. Footer ──────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  padding:    72px 0 0;
}
.footer-brand-name {
  font-family:    var(--font-display);
  font-size:      26px;
  font-weight:    700;
  color:          #F8FAFC;
  letter-spacing: -0.02em;
  margin-bottom:  3px;
}
.footer-brand-name span { color: var(--ember); }

.footer-tagline {
  font-family:    var(--font-label);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #475569;
  margin-bottom:  16px;
}
.footer-addr {
  font-size:   13px;
  line-height: 1.8;
  color:       #64748B;
}
.footer-addr strong { color: #94A3B8; }

.footer-col-title {
  font-family:    var(--font-label);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #F8FAFC;
  margin-bottom:  14px;
  padding-bottom: 9px;
  border-bottom:  1px solid rgba(255,255,255,.06);
}
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-links a {
  font-size:   13px;
  color:       #64748B;
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  transition:  color 0.15s;
}
.footer-links a::before {
  content:   '›';
  color:     var(--ember);
  font-size: 15px;
}
.footer-links a:hover { color: #CBD5E1; }

.footer-newsletter p {
  font-size:     13px;
  line-height:   1.65;
  color:         #64748B;
  margin-bottom: 14px;
}
.footer-form {
  display:    flex;
  border:     1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  overflow:   hidden;
}
.footer-form input[type="email"] {
  flex:        1;
  background:  rgba(255,255,255,.05);
  border:      none;
  padding:     11px 13px;
  color:       #CBD5E1;
  font-family: var(--font-body);
  font-size:   13px;
  outline:     none;
  min-width:   0;
}
.footer-form input[type="email"]::placeholder { color: #475569; }
.footer-form button {
  background:     var(--ember);
  border:         none;
  padding:        11px 16px;
  color:          #fff;
  font-family:    var(--font-label);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.2s;
}
.footer-form button:hover { background: var(--ember-dk); }

.footer-social {
  display:    flex;
  gap:        8px;
  margin-top: 18px;
}
.footer-social a {
  width:         32px;
  height:        32px;
  border-radius: 5px;
  border:        1px solid rgba(255,255,255,.08);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #475569;
  font-size:     14px;
  transition:    background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-social a:hover {
  background:   var(--ember);
  border-color: var(--ember);
  color:        #fff;
}
.footer-bottom {
  margin-top:     52px;
  border-top:     1px solid rgba(255,255,255,.05);
  padding:        18px 0;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  flex-wrap:      wrap;
  gap:            10px;
}
.footer-copy { font-size: 12px; color: #475569; }
.footer-copy strong { color: #64748B; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { font-size: 12px; color: #475569; transition: color 0.15s; }
.footer-legal a:hover { color: #CBD5E1; }

/* ── 16. Back to Top ─────────────────────────────────────── */
.back-to-top {
  position:      fixed;
  bottom:        26px;
  right:         26px;
  width:         42px;
  height:        42px;
  background:    var(--ember);
  border-radius: 6px;
  border:        none;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  font-size:     20px;
  cursor:        pointer;
  opacity:       0;
  pointer-events: none;
  transition:    opacity 0.3s, transform 0.3s;
  z-index:       1040;
  box-shadow:    0 4px 14px rgba(240,75,35,.4);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover   { transform: translateY(-3px); }

/* ── 17. Contact Page ────────────────────────────────────── */
.contact-info-card {
  background:    #fff;
  border:        1px solid var(--card-border);
  border-radius: 12px;
  padding:       18px;
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
}
.ci-icon {
  width:         44px;
  height:        44px;
  background:    var(--ember-lt);
  border-radius: 10px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--ember);
  font-size:     20px;
  flex-shrink:   0;
}
.ci-label {
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--tx3);
  margin-bottom:  4px;
}
.ci-value {
  font-size:   15px;
  font-weight: 600;
  color:       var(--navy);
  margin:      0;
}
.ci-value a { color: var(--blue); }

/* ── 18. Contact Form ────────────────────────────────────── */
.contact-form-card {
  background:    #fff;
  border:        1px solid var(--card-border);
  border-radius: 12px;
  padding:       40px;
}
.form-label-brand {
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--tx2);
  margin-bottom:  6px;
  display:        block;
}
.form-control-brand {
  width:        100%;
  background:   var(--canvas);
  border:       1px solid var(--card-border);
  border-radius: 6px;
  padding:      12px 16px;
  font-family:  var(--font-body);
  font-size:    14px;
  color:        var(--navy);
  outline:      none;
  transition:   border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 18px;
  display:      block;
}
.form-control-brand:focus {
  border-color: var(--ember);
  box-shadow:   0 0 0 3px rgba(240,75,35,.1);
}
textarea.form-control-brand { min-height: 140px; resize: vertical; }

/* ── 19. Timeline (History page) ─────────────────────────── */
.timeline-wrap { border-left: 2px solid var(--card-border); }
.tl-item { position: relative; padding: 0 0 36px 28px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position:      absolute;
  left:          -8px;
  top:           4px;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    var(--ember);
  border:        3px solid var(--canvas);
  box-shadow:    0 0 0 2px var(--ember);
}
.tl-year {
  font-family: var(--font-mono);
  font-size:   12px;
  font-weight: 500;
  color:       var(--ember);
  margin-bottom: 5px;
}
.tl-title {
  font-family:   var(--font-display);
  font-size:     20px;
  font-weight:   700;
  color:         var(--navy);
  margin-bottom: 7px;
  line-height:   1.2;
}
.tl-text {
  font-size:   14px;
  line-height: 1.65;
  color:       var(--tx2);
  margin:      0;
}

/* ── 20. Policy Pages ────────────────────────────────────── */
.policy-body { max-width: 820px; }
.policy-body h3 {
  font-family:   var(--font-display);
  font-size:     20px;
  font-weight:   700;
  color:         var(--navy);
  margin:        30px 0 10px;
}
.policy-body p,
.policy-body li { font-size: 15px; line-height: 1.75; color: var(--tx); }
.policy-body ul { padding-left: 20px; margin-bottom: 14px; }
.policy-body li { margin-bottom: 6px; }
.policy-body li::marker { color: var(--ember); }
.policy-body a { color: var(--blue); }

/* ── 21. Checklist utility ───────────────────────────────── */
.checklist { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checklist li {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   14px;
  font-weight: 600;
  color:       var(--navy);
}
.checklist li i { color: var(--green); font-size: 16px; flex-shrink: 0; }
@media (max-width: 575.98px) { .checklist { grid-template-columns: 1fr; } }

/* ── 22. Profile / stat badges (About, approach) ─────────── */
.stat-badge-row {
  background:    rgba(15,23,42,.85);
  border-radius: 8px;
  padding:       20px 24px;
  display:       flex;
  gap:           32px;
}
.stat-badge-num {
  font-family: var(--font-mono);
  font-size:   26px;
  font-weight: 500;
  color:       var(--ember);
  line-height: 1;
}
.stat-badge-lbl {
  font-family:    var(--font-label);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          #64748B;
  margin-top:     4px;
}

/* ── 23. Responsive section padding ─────────────────────── */
@media (max-width: 767.98px) {
  section { padding: 60px 0; }
  .proof-item { padding: 32px 24px; }
  .contact-form-card { padding: 24px; }
  .approach-img-wrap { height: 300px; }
}