:root {
  --ch-paper: transparent;
  --ch-ink: #101418;
  --ch-muted: #5c6470;
  --ch-blue: #2b59ff;
  --ch-blue-soft: #e6ecff;
  --ch-border: transparent;
  --ch-chaos: #b3543f;
  --ch-green: #1e9e5a;
  --ch-font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ch-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ch-radius: 10px;
}

/* Hide the live CEO Operations widget card */
.chimti-hero-live-ceo {
  display: none !important;
}

/* ==================== HERO CONTAINER ==================== */
#chimti-drum-hero {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(135deg, #18b9fe 0%, #14aaf4 21%, #0a81d9 63%, #0058be 100%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100% !important;
  border-radius: 16px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.15), 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.dr-machine-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.dr-machine-wrap {
  position: relative;
  width: min(90%, 330px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide outer cabinet chassis and panels */
.dr-machine {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.dr-machine::before,
.dr-machine::after {
  display: none !important;
}

/* Hide feet, shadow, panel, knob, and drawers */
.dr-foot,
.dr-floor-shadow,
.dr-panel,
.dr-drawer,
.dr-leds {
  display: none !important;
}

/* Hide hints & reports */
.dr-hint,
.dr-reports {
  display: none !important;
}

/* ==================== DOOR ASSEMBLY (DRUM ONLY) ==================== */
.dr-door {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* brushed chrome bezel */
  background: conic-gradient(from 210deg,
    #fbfcfe, #b6bdc8 9%, #eef1f5 20%, #8d95a2 34%,
    #e9ecf1 46%, #a2aab6 60%, #f3f5f8 72%, #99a1ad 84%,
    #e6e9ee 93%, #fbfcfe 100%);
  box-shadow:
    0 14px 30px rgba(16,20,24,0.3),
    0 3px 8px rgba(16,20,24,0.15),
    inset 0 2px 3px rgba(255,255,255,0.85),
    inset 0 -4px 8px rgba(16,20,24,0.28);
}

/* hinge + latch nubs */
.dr-door::before, .dr-door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4.5%; height: 13%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #d9dde3, #9aa2ae);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 2px 5px rgba(16,20,24,0.25);
}
.dr-door::before { left: -2.6%; border-radius: 6px 0 0 6px; }  /* hinge */
.dr-door::after { right: -2.2%; width: 3.4%; height: 8%; border-radius: 0 5px 5px 0; } /* latch */

.dr-gasket {
  position: absolute; inset: 6.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #2b313a, #171b22 68%);
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,0.75),
    inset 0 -2px 4px rgba(255,255,255,0.06);
}

.dr-glass {
  position: absolute; inset: 12.5%;
  border-radius: 50%;
  overflow: hidden;
  background: #0c1118;
  cursor: grab;
  touch-action: none;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.05),
    inset 0 14px 30px rgba(255,255,255,0.05),
    inset 0 -20px 40px rgba(0,0,0,0.62);
}
.dr-glass.dragging { cursor: grabbing; }
.dr-glass canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* convex glass optics */
.dr-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.dr-shine::before {
  content: "";
  position: absolute;
  left: 6%; top: 3%;
  width: 62%; height: 44%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.30), rgba(255,255,255,0) 78%);
  transform: rotate(-14deg);
}
.dr-shine::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 78% 92%, rgba(140,175,255,0.10), rgba(140,175,255,0) 42%),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.28) 96%);
}
.dr-drops {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(3px 4px at 24% 64%, rgba(255,255,255,0.30), rgba(255,255,255,0) 70%),
    radial-gradient(2.4px 3.4px at 68% 30%, rgba(255,255,255,0.26), rgba(255,255,255,0) 70%),
    radial-gradient(2px 3px at 78% 58%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%),
    radial-gradient(2.6px 3.6px at 38% 22%, rgba(255,255,255,0.20), rgba(255,255,255,0) 70%),
    radial-gradient(2px 2.8px at 55% 74%, rgba(255,255,255,0.24), rgba(255,255,255,0) 70%);
  opacity: 0.9;
}

.dr-flash {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,228,255,0.95), rgba(214,228,255,0) 72%);
  opacity: 0;
  pointer-events: none;
}
.dr-flash.go { animation: dr-flash 0.62s ease-out forwards; }

.dr-mini {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #1a2a4e, #0b1224 76%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  color: #fff;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.55s ease 0.35s, transform 0.6s cubic-bezier(.2,.9,.3,1.18) 0.35s;
  pointer-events: none;
}
.dr-done .dr-mini { opacity: 1; transform: scale(1); }
.dr-mini__label {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: #8fa5ff;
}
.dr-mini__big {
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(110,140,255,.45);
}
.dr-mini__meta { font-size: 11px; color: #aab6d4; }

.dr-progress {
  position: absolute;
  inset: -3.2%;
  pointer-events: none;
}
.dr-progress circle { fill: none; }
.dr-progress .track { stroke: rgba(16,20,24,0.10); stroke-width: 2.6; }
.dr-progress .bar {
  display: none !important;
}

/* ==================== CENTERED HERO LAYOUT OVERRIDES ==================== */
.js-sticky {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 130px !important;
  background-color: #fcfbf7 !important; /* warm ivory/cream background matching screenshot */
  border: none !important;
  box-shadow: none !important;
  height: 900px !important;
  min-height: 900px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Force elements inside hero to be visible and ignore scroll-based JS opacity hides */
.js-title,
mistral-atom-text-hero-title,
.js-main-title,
.chimti-hero-sub,
.chimti-hero-ctas {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Hide grid borders and unnecessary columns */
.js-sticky > div {
  border: none !important;
}
.js-col-middle-top,
.js-col-right-top,
.js-col-middle-middle,
.js-col-right-middle {
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
}

/* Prevent collapsed height for title container descendants */
.js-col-middle-top div,
.js-col-middle-top mistral-atom-text-hero-title {
  height: auto !important;
  min-height: auto !important;
}



/* Hide unused columns/elements completely */
.js-sticky .js-col-right-top,
.js-sticky .js-col-right-middle,
.js-sticky .lg\:flex,
.js-sticky .flex.lg\:hidden.flex-col {
  display: none !important;
}

/* Centered title adjustments */
mistral-atom-text-hero-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 20px !important;
  margin: -40px auto 0 !important; /* Shift hero text slightly upwards */
  width: 100% !important;
  z-index: 5 !important;
}

.js-title {
  color: #101418 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
  margin: 0 auto !important;
  font-size: clamp(38px, 6vw, 76px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

/* Subtitle and CTAs styling */
.chimti-hero-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  color: #5c6470;
  max-width: 680px;
  margin: 24px auto 0 !important;
  text-align: center;
}

.chimti-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px !important;
  position: relative;
  z-index: 10;
}

.chimti-btn-primary {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #18b9fe 0%, #14aaf4 30%, #0a81d9 70%, #0058be 100%) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-family: var(--font-mistral, inherit);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(10, 129, 217, 0.4);
  text-decoration: none;
}
.chimti-btn-primary:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 6px 20px rgba(10, 129, 217, 0.5);
  transform: translateY(-1px);
}

.chimti-btn-secondary {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #0c0d0d !important;
  border: 1px solid #d9d6cd;
  font-weight: 600;
  font-family: var(--font-mistral, inherit);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.chimti-btn-secondary:hover {
  background-color: #f7f6f2;
}

/* Drum overlay center container styling */
.js-col-middle-middle {
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  z-index: 5 !important;
}

.js-col-middle-middle .relative.flex {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  justify-content: center !important;
}

#chimti-drum-hero {
  position: absolute !important;
  top: 540px !important; /* Center of drum sits exactly at y = 720 (540 + 180 = 720) */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  z-index: 10 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.dr-machine-col {
  width: 100% !important;
  height: 100% !important;
}
.dr-machine-wrap {
  width: 90% !important;
  height: 90% !important;
}

.chimti-hero-curves {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 1440px !important;
  height: 900px !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.chimti-curve-text {
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.45;
}
.chimti-curve-text-white {
  font-weight: 700;
  text-transform: uppercase;
}

/* Mobile scaling for curves, text, and drum */
@media (max-width: 768px) {
  .chimti-hero-curves {
    width: 540px !important;
    height: 337px !important;
    top: 350px !important;
  }
  #chimti-drum-hero {
    width: 240px !important;
    height: 240px !important;
    top: 500px !important; /* Center aligns perfectly at 620px (500 + 120 = 620) */
  }
  #rightRibbonPath {
    stroke-width: 36px !important;
  }
  .chimti-curve-text {
    font-size: 15px !important;
  }
  .chimti-curve-text-white {
    font-size: 11px !important;
  }
}



/* Hide Contact team button from top navigation on mobile/tablet views while preserving layout spacing */
#mobile-cta {
  visibility: hidden !important;
  pointer-events: none !important;
}