.nested_tabs_with_fixed_content_items {
   overflow: hidden;
}

.nested_tabs_with_fixed_content_items .title_columns {
   margin-bottom: clamp(28px, 84 * (100vw / 1920), 84px);
}

.nested_tabs_with_fixed_content_items__inner {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: clamp(28px, 84 * (100vw / 1920), 84px);
   position: relative;
}

/* ===== Left column: top-level tabs (accordion) ===== */

.nested_tabs_with_fixed_content_items__tabs {
   flex: 1 1 auto;
   min-width: 0;
   position: relative;
   /* --tabs-scroll-max-height is computed in JS from real rendered header/sub-tab
    * heights (fits 3 closed tab headers + the open tab's 5 sub-tabs); this clamp
    * is only the pre-JS/no-JS fallback for first paint. */
   max-height: var(--tabs-scroll-max-height, clamp(510px, 690 * (100vw / 1920), 690px));
}

.nested_tabs_with_fixed_content_items__tabs_item {
   position: relative;
}

/*
 * This theme has a global, unscoped `.toggle_title`/`.toggle_text` convention
 * (style.css) used by generic accordions, with its own border, padding, and
 * `:before`/`:after` pseudo-elements. Every property it sets has to be reset
 * here explicitly rather than left to inherit, or it silently bleeds through.
 */
.nested_tabs_with_fixed_content_items__tabs_item .toggle_title {
   margin: 0;
   padding-top: clamp(12px, 16 * (100vw / 1920), 16px);
   padding-bottom: clamp(20px, 28 * (100vw / 1920), 28px);
   padding-left: 0;
   padding-right: 0;
   display: flex;
   align-items: center;
   gap: clamp(12px, 28 * (100vw / 1920), 28px);
   border-top: 2px solid #D1D1D1;
   text-transform: none;
   cursor: pointer;
   position: relative;
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_title.active {
   border-color: #000;
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_title:before {
   display: none;
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_title .title {
   font-weight: 500;
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_title .tab_link {
   font-size: 1em;
   font-weight: 500;
   text-transform: uppercase;
   text-decoration: underline;
   white-space: nowrap;
   letter-spacing: 0.03em;
}

/* Desktop/mobile link text variants live in the same <a> (one click target,
 * no JS swap needed); only one is ever visible per breakpoint. */
.nested_tabs_with_fixed_content_items__tabs_item .toggle_title .tab_link__text--mobile {
   display: none;
}

/*
 * Icon lives on ::after (not ::before): a ::before pseudo is always the FIRST
 * flex item, so `margin-left: auto` on it has no leading space to consume and
 * can't push it to the row's end. ::after is the LAST item, where auto-margin
 * correctly pushes it flush right. Every property the global `:after` rule
 * sets (content/position/border-top/width/height) is reset here too.
 */
.nested_tabs_with_fixed_content_items__tabs_item .toggle_title:after {
   content: "+";
   position: static;
   border-top: none;
   width: auto;
   height: auto;
   font-size: 1.72em;
   font-weight: 400;
   line-height: 1;
   margin-left: auto;
   flex: 0 0 auto;
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_title.active:after {
   content: "\2013";
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_text {
   display: flex;
   flex-direction: column;
   max-height: 0;
   margin: 0;
   overflow: hidden;
   opacity: 0;
   transition:
      max-height 0.28s ease,
      opacity    0.2s ease,
      margin-top 0.28s ease;
   will-change: max-height;
}

.nested_tabs_with_fixed_content_items__tabs_item .toggle_text.active {
   max-height: 3000px;
   opacity: 1;
}

.nested_tabs_with_fixed_content_items__sub_tabs {
   display: flex;
   flex-direction: column;
}

.nested_tabs_with_fixed_content_items__sub_tabs_item {
   padding-top: clamp(12px, 16 * (100vw / 1920), 16px);
   padding-bottom: clamp(20px, 28 * (100vw / 1920), 28px);
   border-top: 2px solid #D1D1D1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   cursor: pointer;
   color: #000;
}

.nested_tabs_with_fixed_content_items__sub_tabs_item.current-item,
.nested_tabs_with_fixed_content_items__sub_tabs_item:hover {
   border-color: #000;
}

.nested_tabs_with_fixed_content_items__sub_tabs_item .title {
   font-size: 1em;
   font-weight: 500;
   text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/*
 * The number is its own fixed-width box so the subtitle below can reserve
 * the exact same width as padding-left and land flush with the title's TEXT
 * (not under the digits). The title itself stays plain inline flow, so if it
 * ever wraps its second line still starts flush left, under the number.
 */
.nested_tabs_with_fixed_content_items__sub_tabs_item .title .number {
   display: inline-block;
   width: 1.6em;
   margin-right: 0.3em;
}

.nested_tabs_with_fixed_content_items__sub_tabs_item .subtitle {
   font-size: 1em;
   color: #000;
   padding-left: 1.9em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.nested_tabs_with_fixed_content_items__sub_tabs_item .content-mobile {
   display: none;
}

/* ===== Right column: fixed content items (Business Challenges / Computools Solution) ===== */

.nested_tabs_with_fixed_content_items__content {
   flex: 0 0 50.35%;
   min-width: 0;
}

.nested_tabs_with_fixed_content_items__content_item {
   display: none;
}

.nested_tabs_with_fixed_content_items__content_item.current-item {
   display: block;
}

.nested_tabs_with_fixed_content_items .items {
   display: flex;
   flex-direction: column;
   gap: clamp(28px, 56 * (100vw / 1920), 56px);
}

.nested_tabs_with_fixed_content_items .item {
   border-top: 2px solid #000;
   padding-top: 16px;
}

.nested_tabs_with_fixed_content_items .item .title {
   text-transform: none;
   margin: 0 0 12px;
}

/* Scoped to .item (not bare .description) — the block's own intro blurb
 * above the tabs also carries a `.description` class and must stay at its
 * own (larger) size, only the Business Challenges/Computools Solution
 * item descriptions should be forced down to 1em here. */
.nested_tabs_with_fixed_content_items .item .description {
   font-size: 1em;
   color: #000;
}

.nested_tabs_with_fixed_content_items .description p,
.nested_tabs_with_fixed_content_items .description ul,
.nested_tabs_with_fixed_content_items .description ol,
.nested_tabs_with_fixed_content_items .description h1,
.nested_tabs_with_fixed_content_items .description h2,
.nested_tabs_with_fixed_content_items .description h3,
.nested_tabs_with_fixed_content_items .description h4,
.nested_tabs_with_fixed_content_items .description h5,
.nested_tabs_with_fixed_content_items .description h6 {
   margin: 0;
   font-size: inherit;
}

.nested_tabs_with_fixed_content_items .description ul {
   margin-top: 0;
}

.nested_tabs_with_fixed_content_items .description ul li {
   display: flex;
}

.nested_tabs_with_fixed_content_items .description ul li:before {
   content: "•";
   position: relative;
   margin-right: 10px;
}

.nested_tabs_with_fixed_content_items .description ul li:has(>ul) {
   flex-wrap: wrap;
}

.nested_tabs_with_fixed_content_items .description * {
   color: inherit;
}

.nested_tabs_with_fixed_content_items .description > *:not(:last-child),
.nested_tabs_with_fixed_content_items .description ul li:not(:last-child) {
   margin-bottom: 8px !important;
}

/* ===== SimpleBar theming for the left column — matches the grey thumb used elsewhere in this theme ===== */

.nested_tabs_with_fixed_content_items__tabs .simplebar-track.simplebar-vertical {
   width: 4px;
   right: -16px;
}

.nested_tabs_with_fixed_content_items__tabs .simplebar-track.simplebar-horizontal {
   height: 0;
   display: none;
}

.nested_tabs_with_fixed_content_items__tabs .simplebar-scrollbar:before {
   background: #818181;
   border-radius: 4px;
   width: 100%;
   opacity: 1;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

.nested_tabs_with_fixed_content_items__tabs .simplebar-wrapper {
   overflow: visible !important;
}

/* ===== Mobile: stacked accordion, content relocated inline ===== */

@media screen and (max-width: 1024px) {
   .nested_tabs_with_fixed_content_items__inner {
      flex-direction: column;
   }

   .nested_tabs_with_fixed_content_items__tabs {
      max-height: none;
      overflow: visible;
   }

   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title {
      padding-top: 14px;
      padding-bottom: 14px;
      /* style.css has a global `.toggle_title { padding: ... !important }` at
       * this breakpoint that reintroduces 35px of right padding; !important
       * is the only way to actually beat that here. */
      padding-right: 0 !important;
   }

   /* Mobile only: no divider line above the very first tab (desktop shows it
    * like every other tab — grey idle / black active). */
   .nested_tabs_with_fixed_content_items__tabs_item:first-child .toggle_title {
      border-top: none;
   }

   .nested_tabs_with_fixed_content_items__sub_tabs_item {
      padding-top: 14px;
      padding-bottom: 14px;
   }

   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title:after {
      font-size: 24px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 28px;
      margin-left: auto;
   }

   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title .tab_link {
      font-size: 15px;
      line-height: 16px;
      letter-spacing: -0.01em;
      flex-shrink: 0;
      /* Push the link itself to the row's right edge instead of sitting
       * right after the title. */
      margin-left: auto;
   }

   /* ...but when a link is present, let IT do the pushing (above) and drop
    * the icon's own auto-margin push here — otherwise flexbox splits the
    * free space between both auto-margins, leaving a gap BETWEEN the link
    * and the icon (risking overlap-adjacent crowding) instead of only
    * before the link. The icon then just keeps its normal `gap` spacing
    * from the link, so they stay close but never touch/overlap. */
   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title:has(.tab_link):after {
      margin-left: 0;
   }

   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title .tab_link__text--desktop {
      display: none;
   }

   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title .tab_link__text--mobile {
      display: inline;
   }

   /* Let long titles wrap onto a second line instead of ellipsis-truncating;
    * the link and icon keep their own line (flex-shrink: 0 above/on :after)
    * so only the title's own text wraps within the row. */
   .nested_tabs_with_fixed_content_items__tabs_item .toggle_title .title {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      min-width: 0;
   }

   .nested_tabs_with_fixed_content_items__sub_tabs_item .subtitle {
      display: none;
   }

   .nested_tabs_with_fixed_content_items__sub_tabs_item .title {
      font-size: 13px;
      line-height: 15px;
      letter-spacing: -0.01em;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
   }

   /* animation (not transition) so the fade-in also plays correctly on the
    * display:none -> flex swap itself — a transition can't animate across
    * that jump (nothing rendered in the "from" state to interpolate from),
    * but an animation always plays its keyframes from 0% the moment the
    * element starts rendering, whether that's from a click or straight from
    * the server-rendered initial .current-item on page load. */
   @keyframes nested_tabs_content_mobile_reveal {
      from {
         opacity: 0;
         transform: translateY(-8px);
      }
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }

   .nested_tabs_with_fixed_content_items__sub_tabs_item.current-item .content-mobile {
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 28 * (100vw / 1920), 28px);
      margin-top: 16px;
      animation: nested_tabs_content_mobile_reveal 0.25s ease;
   }

   .nested_tabs_with_fixed_content_items__content {
      display: none;
   }

   .nested_tabs_with_fixed_content_items .item {
      border-top-color: #D1D1D1;
   }

   .nested_tabs_with_fixed_content_items .item .title {
      font-size: 15px;
      line-height: 16px;
      letter-spacing: -0.01em;
   }

   .nested_tabs_with_fixed_content_items .item .description {
      font-size: 15px;
      line-height: 16px;
      letter-spacing: -0.01em;
   }
}