/* ============================================================
   1. GLOBALER STANDARD (Gilt für die ganze Seite)
   ============================================================ */
body p, 
.tm-content-margin p {
    font-family: 'Rubik', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* ============================================================
   2. NAVIGATION & MENÜ (Executive Sans-Serif)
   ============================================================ */
.zo-navigation a, 
.zo-megamenu, 
.zo-megamenu * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    text-transform: none !important;
    font-weight: 400 !important;
}

/* ============================================================
   3. HERO-BEREICH (Spezifische Fixes)
   ============================================================ */

/* DER SUBTITLE (Architecture of Growth) - ABSOLUTE FIXIERUNG */
html body [class*="hero"] .uk-text-lead, 
html body .tm-header .uk-text-lead {
    font-family: 'League Spartan', sans-serif !important;
    font-size: 26px !important; 
    letter-spacing: 0.12em !important; 
    font-weight: 300 !important; 
    text-transform: uppercase !important;
    display: block !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

/* Der Textkörper im Hero */
[class*="hero"] p, 
[class*="hero"] .tm-content-margin p {
    font-size: 19px !important; 
    line-height: 1.7 !important;
    font-weight: 300 !important; 
    color: #ffffff !important;
}

/* ============================================================
   4. SIDEBAR & INTERACTION (HansenBeck / Discovery)
   ============================================================ */

/* 1. Header-Link (HansenBeck) und allgemeine Sidebar-Links */
.HB-sidebar a, 
.sidebar-nav-list a {
    color: #000000 !important;
    text-decoration: none !important;
}

/* 2. Hover-Effekt: Nur Unterstreichen, keine Farbänderung */
.HB-sidebar a:hover,
.sidebar-nav-list a:hover {
    text-decoration: underline !important;
    color: #000000 !important;
}

/* =============================================================
 * SECTION 1: Table Alignment & Gap Prevention
 * ============================================================= */

/* Base structure for both tables */
.comparison-table-3,
.comparison-table-2 {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Table 1: 3-Column Configuration */
.comparison-table-3 th:nth-child(1),
.comparison-table-3 td:nth-child(1) {
  width: 20%;
}
.comparison-table-3 th:nth-child(2),
.comparison-table-3 td:nth-child(2) {
  width: 40%;
}
.comparison-table-3 th:nth-child(3),
.comparison-table-3 td:nth-child(3) {
  width: 40%;
}

/* Table 2: 2-Column Configuration */
.comparison-table-2 th:nth-child(1),
.comparison-table-2 td:nth-child(1) {
  width: 20%;
}
.comparison-table-2 th:nth-child(2),
.comparison-table-2 td:nth-child(2) {
  width: 80%;
}

/* Outer layout block spacing resets */
.comparison-table-3 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.comparison-table-2 {
  /* Bridges the parent grid/flex gap seamlessly */
  margin-top: -32px !important; 
  padding-top: 0 !important;
}

/* Inner table elements spacing resets */
.comparison-table-3 table,
.comparison-table-3 .uk-table {
  margin-bottom: 0 !important;
}
.comparison-table-2 table,
.comparison-table-2 .uk-table {
  margin-top: 0 !important;
}

/* Intermediate containers within table blocks */
.comparison-table-3 > *,
.comparison-table-2 > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* =============================================================
 * SECTION 2: Executive Boutique: Minimal Toggle Component
 * ============================================================= */

/* Hide native details arrow in all major browsers */
details.rs-expandable-section summary::-webkit-details-marker {
  display: none;
}
details.rs-expandable-section summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  user-select: none;
}

/* Adjust Summary Text Styles */
details.rs-expandable-section summary .rs-toggle-title {
  font-weight: 500;
  font-style: italic; /* Text in italics */
  transition: color 0.2s ease;
}

details.rs-expandable-section summary:hover .rs-toggle-title {
  color: rgba(17, 17, 17, 0.7); /* Subtle hover state */
}

/* Dynamic Open/Close Text Display Rules */
details.rs-expandable-section summary .rs-toggle-title.expanded-text {
  display: none;
}
details.rs-expandable-section summary .rs-toggle-title.collapsed-text {
  display: inline-block;
}

details.rs-expandable-section[open] summary .rs-toggle-title.expanded-text {
  display: inline-block;
}
details.rs-expandable-section[open] summary .rs-toggle-title.collapsed-text {
  display: none;
}

/* Custom Minimalist Toggle Plus-Minus Icon */
.rs-toggle-icon {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Horizontal line of the plus */
.rs-toggle-icon::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 2px;
  background-color: currentColor;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Vertical line of the plus */
.rs-toggle-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  width: 2px;
  height: 12px;
  background-color: currentColor;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
}

/* Open states: Morph the '+' into '-' by fading out the vertical line and rotating the horizontal line */
details.rs-expandable-section[open] .rs-toggle-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

details.rs-expandable-section[open] .rs-toggle-icon::before {
  transform: rotate(180deg);
}

/* Content slide and fade-in animation on open */
details.rs-expandable-section .rs-expandable-content {
  margin-top: 1.5em; /* Exactly one empty line of space on open */
  animation: rsToggleFadeIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes rsToggleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   ARCHITECTURAL COMPONENTS: GLOBAL PATTERNS
   ============================================================ */

/* 1. Phase Intermission / Handover Banner */
.phase-intermission {
  margin: 60px 0 45px 0;
  padding: 18px 24px;
  background: #f8fafc;
  border-left: 2px solid #0f172a;
  border-top: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.intermission-tag {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 4px;
  line-height: 1.2;
}

.intermission-lead {
  font-family: serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: #0f172a;
  margin: 0;
  line-height: 1.45;
}

/* 2. Executive CTA Dispatch Card */
.cta-dispatch-card {
  margin: 70px 0 40px 0;
  padding: 38px 42px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #0f172a;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.dispatch-kicker {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 6px;
  line-height: 1.2;
}

.dispatch-title {
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #000000;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.dispatch-body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #475569;
  max-width: 580px;
  margin-bottom: 28px;
}

.dispatch-body p {
  margin: 0 0 10px 0;
}

.executive-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  color: #ffffff !important;
  padding: 14px 28px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.executive-cta-button:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

.cta-arrow {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.executive-cta-button:hover .cta-arrow {
  transform: translateX(3px);
}

.dispatch-meta {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 14px;
}

/* 3. Global Executive Quote */
.executive-quote {
  margin: 45px 0 20px 0;
  padding-left: 24px;
  border-left: 2px solid #0284c7;
}

.executive-quote p {
  font-family: serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: #0f172a;
  margin-bottom: 8px;
}

.executive-quote cite {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #94a3b8;
  font-style: normal;
}

/* Mobile Safety */
@media (max-width: 767px) {
  .cta-dispatch-card {
    padding: 24px 20px;
    margin: 45px 0 30px 0;
  }
  .dispatch-title {
    font-size: 1.45rem;
  }
  .executive-cta-button {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* ============================================================
   4. CUSTOM ECOSYSTEM BUTTON STYLES
   ============================================================ */

/* ============================================================
   ECOSYSTEM BUTTONS: STANDARD (Black Base -> Rollup Pillar Accent)
   ============================================================ */

/* 1. Black -> Gold (Culture Code #c99a2e) */
.uk-button-black-gold,
html body .uk-button-black-gold {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #c99a2e 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-black-gold:hover,
.uk-button-black-gold:focus,
html body .uk-button-black-gold:hover,
html body .uk-button-black-gold:focus {
    background-color: #c99a2e !important;
    color: #1c2418 !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-black-gold:active,
html body .uk-button-black-gold:active {
    background-color: #c99a2e !important;
    color: #1c2418 !important;
}

/* 2. Black -> Orange (COMMOVIS #fe4001) */
.uk-button-black-orange,
html body .uk-button-black-orange {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #fe4001 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-black-orange:hover,
.uk-button-black-orange:focus,
html body .uk-button-black-orange:hover,
html body .uk-button-black-orange:focus {
    background-color: #fe4001 !important;
    color: #ffffff !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-black-orange:active,
html body .uk-button-black-orange:active {
    background-color: #fe4001 !important;
    color: #ffffff !important;
}

/* 3. Black -> White (Hansen Beck #ffffff) */
.uk-button-black-white,
html body .uk-button-black-white {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #ffffff 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-black-white:hover,
.uk-button-black-white:focus,
html body .uk-button-black-white:hover,
html body .uk-button-black-white:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    background-size: 15000% !important;
    border-color: #000000 !important;
}

.uk-button-black-white:active,
html body .uk-button-black-white:active {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* 4. Black -> Blue (ALLOQUIA #1d68a1) */
.uk-button-black-blue,
html body .uk-button-black-blue {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #1d68a1 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-black-blue:hover,
.uk-button-black-blue:focus,
html body .uk-button-black-blue:hover,
html body .uk-button-black-blue:focus {
    background-color: #1d68a1 !important;
    color: #ffffff !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-black-blue:active,
html body .uk-button-black-blue:active {
    background-color: #1d68a1 !important;
    color: #ffffff !important;
}

/* ============================================================
   ECOSYSTEM BUTTONS: REVERSE (Pillar Base -> Rollup Dark/Black)
   ============================================================ */

/* Gold -> Deep Forest (Reverse) */
.uk-button-gold,
.uk-button-gold-black,
html body .uk-button-gold,
html body .uk-button-gold-black {
    background-color: #c99a2e !important;
    color: #1c2418 !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #1c2418 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-gold:hover,
.uk-button-gold:focus,
.uk-button-gold-black:hover,
.uk-button-gold-black:focus,
html body .uk-button-gold:hover,
html body .uk-button-gold:focus,
html body .uk-button-gold-black:hover,
html body .uk-button-gold-black:focus {
    background-color: #c99a2e !important;
    color: #ffffff !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-gold:active,
.uk-button-gold-black:active,
html body .uk-button-gold:active,
html body .uk-button-gold-black:active {
    background-color: #1c2418 !important;
    color: #ffffff !important;
}

/* Orange -> Deep Slate (Reverse) */
.uk-button-orange,
.uk-button-orange-black,
html body .uk-button-orange,
html body .uk-button-orange-black {
    background-color: #fe4001 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #0f172a 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-orange:hover,
.uk-button-orange:focus,
.uk-button-orange-black:hover,
.uk-button-orange-black:focus,
html body .uk-button-orange:hover,
html body .uk-button-orange:focus,
html body .uk-button-orange-black:hover,
html body .uk-button-orange-black:focus {
    background-color: #fe4001 !important;
    color: #ffffff !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-orange:active,
.uk-button-orange-black:active,
html body .uk-button-orange:active,
html body .uk-button-orange-black:active {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Blue -> Black (Reverse) */
.uk-button-blue,
.uk-button-blue-black,
html body .uk-button-blue,
html body .uk-button-blue-black {
    background-color: #1d68a1 !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #000000 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-blue:hover,
.uk-button-blue:focus,
.uk-button-blue-black:hover,
.uk-button-blue-black:focus,
html body .uk-button-blue:hover,
html body .uk-button-blue:focus,
html body .uk-button-blue-black:hover,
html body .uk-button-blue-black:focus {
    background-color: #1d68a1 !important;
    color: #ffffff !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-blue:active,
.uk-button-blue-black:active,
html body .uk-button-blue:active,
html body .uk-button-blue-black:active {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* White -> Black (Reverse) */
.uk-button-white-black,
html body .uk-button-white-black {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    border-radius: 4px;
    font-weight: 700;
    background-position: 1% 100% !important;
    background-size: 0 !important;
    background-image: radial-gradient(circle at 1% 100%, #000000 1%, transparent 1%) !important;
    background-repeat: no-repeat !important;
    transition: 0.35s ease-in-out !important;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow !important;
}

.uk-button-white-black:hover,
.uk-button-white-black:focus,
html body .uk-button-white-black:hover,
html body .uk-button-white-black:focus {
    background-color: #000000 !important;
    color: #ffffff !important;
    background-size: 15000% !important;
    border-color: transparent !important;
}

.uk-button-white-black:active,
html body .uk-button-white-black:active {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* ============================================================
   5. ARCHITECTURAL MANIFESTO CALLOUT (Section 6 / Vision)
   ============================================================ */
.tm-manifesto-callout {
    margin: 28px 0;
    padding: 20px 24px;
    background: rgba(31, 115, 136, 0.12);
    border-left: 3px solid #1f7388;
    border-radius: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease-in-out;
}

.tm-manifesto-callout:hover {
    background: rgba(31, 115, 136, 0.18);
    border-left-color: #2ea4bf;
    transform: translateX(3px);
}

.tm-manifesto-callout__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tm-manifesto-callout__badge .uk-icon {
    color: #1f7388;
}

.uk-light .tm-manifesto-callout__badge .uk-icon {
    color: #2ea4bf;
}

.tm-manifesto-callout__kicker {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1f7388;
    line-height: 1;
}

.uk-light .tm-manifesto-callout__kicker {
    color: #2ea4bf;
}

.tm-manifesto-callout__text {
    margin: 0 0 14px 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: inherit;
    opacity: 0.92;
}

/* Link: Clean Executive White / Light - No disturbing blue */
.tm-manifesto-callout__link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f7388 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: gap 0.25s ease;
}

.uk-light .tm-manifesto-callout__link {
    color: #ffffff !important;
}

/* Dynamic Line Animation (identical to top menu navbar) */
.tm-manifesto-callout__link > span:first-child {
    position: relative;
    display: inline-block;
}

.tm-manifesto-callout__link > span:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1.5px;
    background-color: #1f7388;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.uk-light .tm-manifesto-callout__link > span:first-child::after {
    background-color: #2ea4bf;
}

.tm-manifesto-callout__link:hover > span:first-child::after {
    width: 100%;
}

/* Arrow Icon Transition */
.tm-manifesto-callout__link .uk-icon {
    color: #1f7388;
    transition: transform 0.25s ease;
}

.uk-light .tm-manifesto-callout__link .uk-icon {
    color: #2ea4bf;
}

.tm-manifesto-callout__link:hover .uk-icon {
    transform: translateX(4px);
}

@media print {
    .tm-manifesto-callout {
        border-left-color: #1f7388 !important;
        background: #f8fafc !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ============================================================
   6. GLOBAL ANCHOR SCROLL OFFSET FIX (Accounts for Sticky Navbar)
   ============================================================ */
#journeys,
[id].uk-section,
.scroll-target {
    scroll-margin-top: 130px !important;
}

/* ============================================================
   7. ECOSYSTEM PILLAR GATEWAY HOVER ANIMATIONS
   ============================================================ */
.uk-button-gateway-culturecode {
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    transition: all 0.25s ease-in-out !important;
}
.uk-button-gateway-culturecode:hover {
    border-color: #c99a2e !important;
    color: #c99a2e !important;
    box-shadow: 0 4px 14px rgba(201, 154, 46, 0.15) !important;
    transform: translateY(-1px);
}

.uk-button-gateway-commovis {
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    transition: all 0.25s ease-in-out !important;
}
.uk-button-gateway-commovis:hover {
    border-color: #fe4001 !important;
    color: #fe4001 !important;
    box-shadow: 0 4px 14px rgba(254, 64, 1, 0.15) !important;
    transform: translateY(-1px);
}

.uk-button-gateway-alloquia {
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    transition: all 0.25s ease-in-out !important;
}
.uk-button-gateway-alloquia:hover {
    border-color: #1d68a1 !important;
    color: #1d68a1 !important;
    box-shadow: 0 4px 14px rgba(29, 104, 161, 0.15) !important;
    transform: translateY(-1px);
}


/* ============================================================
   8. GLOBAL BUTTON HOVER LEGIBILITY FIX (White text on Teal)
   ============================================================ */
.uk-button-default:hover,
.uk-button-default:focus,
html body .uk-button-default:hover,
html body .uk-button-default:focus {
    background-color: #1f7388 !important;
    color: #ffffff !important;
    border-color: #1f7388 !important;
}

/* ============================================================
   9. DISCOVERY INSTRUMENT CARD & PROTOCOL PATTERNS
   ============================================================ */
.tm-instrument-card {
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #1f7388 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.tm-instrument-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.07) !important;
}

/* Instrument grid: real gutters between the cards.
   Each card IS the UIkit grid item, so the padding-based gutter is swallowed
   by .uk-card-body and the cards touch. A flex gap restores the separation.
   CRITICAL: Use .uk-width-1-3@m on z-column to ensure 3-column layout.
   The CSS-based flex overrides UIkit's default width on larger screens. */
.tm-instrument-grid .uk-grid {
    margin-left: 0 !important;
    gap: 32px;
    display: flex !important;
    flex-wrap: wrap;
}
.tm-instrument-grid .uk-grid > * {
    flex: 0 1 calc((100% - 64px) / 3) !important;
    width: unset !important;
    margin-top: 0 !important;
    box-sizing: border-box;
}
.tm-instrument-grid .uk-grid > .tm-instrument-card {
    padding: 32px !important;
    align-self: stretch;
    height: auto !important;
}
/* Equal-height cards: every block keeps its natural height and the last block
   (the button) is pinned to the bottom, so headlines line up at the top and
   all buttons share one baseline whatever the line breaks. */
.tm-instrument-grid .tm-instrument-card > * {
    flex: 0 0 auto !important;
}
.tm-instrument-grid .tm-instrument-card > :last-child {
    margin-top: auto !important;
}
/* Gap above the button sits on the block before it, so the button keeps its native height. */
.tm-instrument-grid .tm-instrument-card > :nth-last-child(2) {
    margin-bottom: 20px !important;
}
/* Breakpoints follow UIkit (@m = 960px, @s = 640px).
   Desktop: 3 columns. Tablet: 2 columns. Mobile: 1 column.
   The earlier 768-1199px rule forced 2 columns on most desktop widths. */
@media (min-width: 960px) {
    .tm-instrument-grid .uk-grid > * {
        flex-basis: calc((100% - 64px) / 3) !important;
    }
}
@media (min-width: 640px) and (max-width: 959px) {
    .tm-instrument-grid .uk-grid > * {
        flex-basis: calc((100% - 32px) / 2) !important;
    }
}
@media (max-width: 639px) {
    .tm-instrument-grid .uk-grid > * {
        flex-basis: 100% !important;
    }
}

/* Quiet category kicker (replaces the oversized "CATEGORY 0x" label) */
.tm-instrument-kicker {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
}

.tm-dark-badge {
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 3px 9px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

.tm-protocol-banner {
    margin-top: 50px;
    padding: 26px 32px;
    background: rgba(31, 115, 136, 0.08);
    border: 1px solid rgba(31, 115, 136, 0.16);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
    transition: background 0.25s ease-in-out;
}

.tm-protocol-banner:hover {
    background: rgba(31, 115, 136, 0.13);
}

.tm-protocol-banner .tm-protocol-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.tm-protocol-banner .tm-protocol-icon {
    color: #1f7388;
    margin-top: 2px;
    flex: none;
}

.tm-protocol-banner .tm-protocol-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.tm-protocol-banner .tm-protocol-text {
    margin: 3px 0 0 0;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.45;
}

.tm-protocol-banner .uk-grid-divider > :not(.uk-first-column)::before {
    border-left: 1px solid rgba(31, 115, 136, 0.2) !important;
}

.tm-protocol-kicker {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1f7388;
    margin-bottom: 2px;
    line-height: 1.2;
}