/* ==========================================================================
   Carbon IBM Theme — Drupal 10
   IBM Carbon Design System inspired stylesheet
   Tokens: https://carbondesignsystem.com/guidelines/color/tokens/
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Google Fonts Import — IBM Plex
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap&display=swap');

/* --------------------------------------------------------------------------
   2. Carbon Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --cds-interactive:           #0f62fe;
  --cds-interactive-hover:     #0353e9;
  --cds-interactive-active:    #002d9c;
  --cds-link-primary:          #0f62fe;
  --cds-link-primary-hover:    #0043ce;

  /* Background */
  --cds-background:            #ffffff;
  --cds-background-hover:      #e8e8e8;
  --cds-background-active:     #c6c6c6;
  --cds-layer-01:              #f4f4f4;
  --cds-layer-02:              #e0e0e0;

  /* Shell / Nav — IBM Carbon White/Light theme */
  --cds-shell-header-bg:       #ffffff;
  --cds-shell-header-bg-02:    #f4f4f4;
  --cds-shell-header-text:     #161616;
  --cds-shell-header-focus:    #0f62fe;
  --cds-shell-header-border:   #e0e0e0;

  /* Mega Menu — light panel */
  --cds-mega-panel-bg:         #f4f4f4;
  --cds-mega-panel-border:     #e0e0e0;
  --cds-mega-heading:          #525252;
  --cds-mega-link:             #161616;
  --cds-mega-link-hover:       #0f62fe;

  /* Text */
  --cds-text-primary:          #161616;
  --cds-text-secondary:        #525252;
  --cds-text-placeholder:      #a8a8a8;
  --cds-text-on-color:         #ffffff;
  --cds-text-inverse:          #ffffff;

  /* Border */
  --cds-border-subtle:         #e0e0e0;
  --cds-border-strong:         #8d8d8d;

  /* Support */
  --cds-support-error:         #da1e28;
  --cds-support-success:       #24a148;
  --cds-support-warning:       #f1c21b;
  --cds-support-info:          #0043ce;

  /* Hero */
  --cds-hero-bg:               #161616;
  --cds-hero-text:             #f4f4f4;

  /* Footer */
  --cds-footer-bg:             #161616;
  --cds-footer-text:           #c6c6c6;
  --cds-footer-link:           #c6c6c6;
  --cds-footer-link-hover:     #f4f4f4;
  --cds-footer-border:         #393939;
  --cds-footer-bottom-bg:      #000000;

  /* Typography */
  --cds-font-sans:             'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --cds-font-serif:            'IBM Plex Serif', Georgia, serif;
  --cds-font-mono:             'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing (Carbon 8pt grid) */
  --cds-spacing-01:  0.125rem;  /*  2px */
  --cds-spacing-02:  0.25rem;   /*  4px */
  --cds-spacing-03:  0.5rem;    /*  8px */
  --cds-spacing-04:  0.75rem;   /* 12px */
  --cds-spacing-05:  1rem;      /* 16px */
  --cds-spacing-06:  1.5rem;    /* 24px */
  --cds-spacing-07:  2rem;      /* 32px */
  --cds-spacing-08:  2.5rem;    /* 40px */
  --cds-spacing-09:  3rem;      /* 48px */
  --cds-spacing-10:  4rem;      /* 64px */
  --cds-spacing-11:  5rem;      /* 80px */
  --cds-spacing-12:  6rem;      /* 96px */
  --cds-spacing-13:  10rem;     /* 160px */

  /* Shell height */
  --cds-header-height: 3rem;    /* 48px */

  /* Grid */
  --cds-grid-gutter: 2rem;
  --cds-grid-margin: 1rem;
  --cds-grid-columns: 16;
  --cds-max-width: 99rem;       /* 1584px */

  /* Motion */
  --cds-duration-fast-01:   70ms;
  --cds-duration-fast-02:  110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-duration-moderate-02: 240ms;
  --cds-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-entrance:  cubic-bezier(0, 0, 0.38, 0.9);
  --cds-ease-exit:      cubic-bezier(0.2, 0, 1, 0.9);

  /* TWI Brand */
  --twi-navy:   #04043d;
  --twi-cyan:   #00b4d8;
}

/* --------------------------------------------------------------------------
   3. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cds-text-primary);
  background-color: var(--cds-background);
}

a {
  color: var(--cds-link-primary);
  text-decoration: none;
  transition: color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

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

/* --------------------------------------------------------------------------
   4. Skip Link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  background: var(--cds-interactive);
  color: var(--cds-text-on-color);
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  transition: top var(--cds-duration-fast-02);
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   5. Layout Wrapper
   -------------------------------------------------------------------------- */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   6. Carbon Grid Utility
   -------------------------------------------------------------------------- */
.cds--grid {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  padding-inline: var(--cds-grid-margin);
  width: 100%;
}

@media (min-width: 42rem) {
  .cds--grid { padding-inline: var(--cds-spacing-07); }
}

@media (min-width: 66rem) {
  .cds--grid { padding-inline: var(--cds-spacing-08); }
}

@media (min-width: 82rem) {
  .cds--grid { padding-inline: var(--cds-spacing-10); }
}

/* --------------------------------------------------------------------------
   7. UI Shell Header
   -------------------------------------------------------------------------- */
.cds--header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  height: var(--cds-header-height);
  background-color: var(--cds-shell-header-bg);
  border-bottom: 2px solid var(--cds-shell-header-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.cds--header__menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cds-header-height);
  height: var(--cds-header-height);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--cds-shell-header-text);
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.cds--header__menu-trigger:hover {
  background-color: var(--cds-shell-header-bg-02);
}

.cds--header__menu-trigger svg {
  fill: currentColor;
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 66rem) {
  .cds--header__menu-trigger { display: none; }
}

.cds--header__name {
  display: flex;
  align-items: center;
  height: var(--cds-header-height);
  padding: 0 var(--cds-spacing-05);
  color: var(--cds-shell-header-text);
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid var(--cds-shell-header-border);
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.cds--header__name:hover {
  background-color: var(--cds-shell-header-bg-02);
  text-decoration: none;
  color: var(--cds-shell-header-text);
}

.cds--header__name--prefix {
  font-weight: 300;
  margin-right: 0.25em;
}

.cds--header__nav {
  display: none;
  align-items: stretch;
  height: 100%;
  flex: 1;
  overflow: visible;
}

@media (min-width: 66rem) {
  .cds--header__nav { display: flex; }
}

.cds--header__nav ul {
  display: flex;
  align-items: stretch;
  list-style: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.cds--header__nav > ul > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

.cds--header__menu-item,
.cds--header__menu-title {
  display: flex;
  align-items: center;
  height: var(--cds-header-height);
  padding: 0 var(--cds-spacing-05);
  color: var(--cds-shell-header-text);
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--cds-duration-fast-02) var(--cds-ease-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
  gap: var(--cds-spacing-02);
}

.cds--header__menu-item:hover,
.cds--header__menu-title:hover {
  background-color: var(--cds-shell-header-bg-02);
  color: var(--cds-shell-header-text);
  text-decoration: none;
}

.cds--header__menu-title.is-active,
.cds--header__nav > ul > li.mega-open > .cds--header__menu-title {
  background-color: var(--cds-shell-header-bg-02);
  border-bottom-color: var(--cds-interactive);
}

.cds--header__menu-arrow {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: var(--cds-spacing-02);
  fill: currentColor;
  flex-shrink: 0;
  transition: transform var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

li.mega-open > .cds--header__menu-title .cds--header__menu-arrow {
  transform: rotate(180deg);
}

.cds--header__global {
  display: flex;
  align-items: center;
  margin-left: auto;
  height: 100%;
}

.cds--header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cds-header-height);
  height: var(--cds-header-height);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cds-shell-header-text);
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard);
  border-left: 1px solid var(--cds-shell-header-border);
}

.cds--header__action:hover {
  background-color: var(--cds-shell-header-bg-02);
  color: var(--cds-interactive);
}

.cds--header__action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   7b. Header Search Panel
   -------------------------------------------------------------------------- */
.cds--search-icon--close { display: none; }
.cds--header__search-toggle[aria-expanded="true"] .cds--search-icon--open { display: none; }
.cds--header__search-toggle[aria-expanded="true"] .cds--search-icon--close { display: block; }

.cds--header__search-panel {
  display: none;
  position: fixed;
  top: var(--cds-header-height);
  left: 0;
  right: 0;
  z-index: 8600;
  background-color: #ffffff;
  border-bottom: 2px solid var(--cds-interactive);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cds--header__search-panel.is-open {
  display: block;
  animation: search-slide-in var(--cds-duration-moderate-01) var(--cds-ease-entrance);
}

@keyframes search-slide-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.cds--header__search-panel-inner {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  padding: 0 var(--cds-spacing-05);
}

@media (min-width: 66rem) {
  .cds--header__search-panel-inner { padding: 0 var(--cds-spacing-10); }
}

.cds--header__search-form { width: 100%; }

.cds--header__search-field-wrapper {
  display: flex;
  align-items: center;
  height: 3rem;
  gap: var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.cds--header__search-field-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--cds-text-secondary);
  flex-shrink: 0;
}

.cds--header__search-input {
  flex: 1;
  height: 100%;
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--cds-text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.cds--header__search-input::placeholder { color: var(--cds-text-placeholder); }

.cds--header__search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cds-text-secondary);
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cds-duration-fast-02) var(--cds-ease-standard),
              color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.cds--header__search-close.is-visible { opacity: 1; pointer-events: auto; }
.cds--header__search-close:hover { color: var(--cds-text-primary); }
.cds--header__search-close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

body.toolbar-fixed .cds--header__search-panel { top: calc(var(--cds-header-height) + 39px); }
body.toolbar-fixed.toolbar-tray-open .cds--header__search-panel { top: calc(var(--cds-header-height) + 79px); }

/* --------------------------------------------------------------------------
   8. Mega Menu Panel
   -------------------------------------------------------------------------- */
.mega-menu-panel {
  display: none;
  position: fixed;
  top: var(--cds-header-height);
  left: 0;
  right: 0;
  z-index: 8500;
  background-color: var(--cds-mega-panel-bg);
  border-top: 1px solid var(--cds-mega-panel-border);
  border-bottom: 1px solid var(--cds-mega-panel-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mega-menu-panel.is-open {
  display: block;
  animation: mega-fade-in var(--cds-duration-moderate-02) var(--cds-ease-entrance);
}

@keyframes mega-fade-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.mega-menu-panel--two-col .mega-menu-panel__inner {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  display: flex;
  min-height: 20rem;
}

.mega-menu__tab-nav {
  width: 16rem;
  flex-shrink: 0;
  background-color: #e8e8e8;
  border-right: 1px solid var(--cds-mega-panel-border);
  padding: var(--cds-spacing-03) 0;
}

.mega-menu__tab-nav li { border-bottom: 1px solid #d1d1d1; }
.mega-menu__tab-nav li:last-child { border-bottom: none; }

.mega-menu__tab-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}

.mega-menu__tab-nav li {
  display: block !important;
  width: 100%;
  border-bottom: 1px solid #d1d1d1;
}

.mega-menu__tab-nav li:last-child { border-bottom: none; }

.mega-menu__tab {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--cds-spacing-04) var(--cds-spacing-06);
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cds-text-primary);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  word-break: break-word;
  hyphens: none;
  transition:
    background-color var(--cds-duration-fast-02) var(--cds-ease-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-standard),
    color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.mega-menu__tab:hover { background-color: var(--cds-interactive); color: #ffffff; border-left-color: var(--cds-interactive-hover); }
.mega-menu__tab.is-active { background-color: #ffffff; border-left-color: var(--cds-interactive); color: var(--cds-interactive); font-weight: 600; }

.mega-menu__panels {
  flex: 1;
  background: #ffffff;
  background-image: url('../images/mega-menu-bg.jpg');
  background-position: top left;
  background-repeat: no-repeat;
  padding: var(--cds-spacing-07) var(--cds-spacing-08);
  overflow: hidden;
}

.mega-menu__panel { display: none; }
.mega-menu__panel.is-active { display: block; animation: mega-fade-in var(--cds-duration-fast-02) var(--cds-ease-entrance); }

.mega-menu__panel-heading {
  margin-bottom: var(--cds-spacing-06);
  padding-bottom: var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.mega-menu__panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-family: var(--cds-font-sans);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--cds-interactive);
  text-decoration: none;
}

.mega-menu__panel-title:hover { color: var(--cds-interactive-hover); text-decoration: underline; text-decoration-thickness: 2px; }
.mega-menu__panel-title svg { width: 1rem; height: 1rem; fill: currentColor; }

.mega-menu__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cds-spacing-05) var(--cds-spacing-07);
}

.mega-menu__card {
  display: block;
  padding: var(--cds-spacing-05);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    background-color var(--cds-duration-fast-02) var(--cds-ease-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.mega-menu__card:hover { background-color: var(--cds-interactive); border-color: var(--cds-interactive); text-decoration: none; }
.mega-menu__card--solo { grid-column: 1 / -1; }

.mega-menu__card-title {
  display: block;
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  margin-bottom: var(--cds-spacing-02);
}

.mega-menu__card:hover .mega-menu__card-title { color: #ffffff; }

.mega-menu__card-desc {
  display: block;
  font-family: var(--cds-font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--cds-text-secondary);
  line-height: 1.5;
}

.mega-menu__card:hover .mega-menu__card-desc { color: rgba(255,255,255,0.8); }

/* --------------------------------------------------------------------------
   9. Mobile Side Panel
   -------------------------------------------------------------------------- */
.cds--side-nav {
  position: fixed;
  top: var(--cds-header-height);
  left: 0;
  bottom: 0;
  width: 16rem;
  z-index: 8100;
  background-color: #ffffff;
  border-right: 1px solid var(--cds-border-subtle);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--cds-duration-moderate-02) var(--cds-ease-standard);
  box-shadow: 4px 0 12px rgba(0,0,0,0.1);
}

.cds--side-nav.is-open { transform: translateX(0); }
.cds--side-nav__items { list-style: none; padding: var(--cds-spacing-04) 0; margin: 0; }

.cds--side-nav .mega-menu-panel,
.cds--side-nav .cds--header__menu-arrow { display: none !important; }

.cds--side-nav .cds--header__menu-title {
  display: block;
  width: 100%;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);
  font-family: var(--cds-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  background: none;
  border: none;
  border-top: 1px solid var(--cds-border-subtle);
  text-align: left;
  cursor: default;
  margin-top: var(--cds-spacing-03);
}

.cds--side-nav .cds--header__menu-item,
.cds--side-nav a {
  display: block;
  padding: var(--cds-spacing-04) var(--cds-spacing-06);
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cds-text-primary);
  text-decoration: none;
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard),
              color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.cds--side-nav .cds--header__menu-item:hover,
.cds--side-nav a:hover { background-color: var(--cds-layer-01); color: var(--cds-interactive); text-decoration: none; }

.cds--side-nav > ul,
.cds--side-nav__items > div > ul { list-style: none; padding: 0; margin: 0; }

body.toolbar-fixed .cds--side-nav { top: calc(var(--cds-header-height) + 39px); }
body.toolbar-fixed.toolbar-tray-open .cds--side-nav { top: calc(var(--cds-header-height) + 79px); }

/* --------------------------------------------------------------------------
   9b. Mobile overlay
   -------------------------------------------------------------------------- */
.cds--side-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8050;
  background: rgba(22, 22, 22, 0.5);
  pointer-events: auto;
}

.cds--side-nav-overlay.is-visible { display: block; }

/* --------------------------------------------------------------------------
   10. Main Content Area + Sidebar Layout
   -------------------------------------------------------------------------- */
.layout-main {
  margin-top: var(--cds-header-height);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.layout-content-wrapper {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  padding: var(--cds-spacing-07) var(--cds-spacing-05);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cds-spacing-07);
}

@media (min-width: 42rem) {
  .layout-content-wrapper { padding-inline: var(--cds-spacing-07); }
}

@media (min-width: 66rem) {
  .layout-content-wrapper.has-sidebar-first { grid-template-columns: 16rem 1fr; }
  .layout-content-wrapper.has-sidebar-second { grid-template-columns: 1fr 16rem; }
  .layout-content-wrapper.has-both-sidebars { grid-template-columns: 16rem 1fr 16rem; }
  .layout-content-wrapper { padding-inline: var(--cds-spacing-10); }
}

.layout-sidebar-first,
.layout-sidebar-second { min-width: 0; }

.layout-sidebar-first .block,
.layout-sidebar-second .block { margin-bottom: var(--cds-spacing-06); }

.block-title {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  margin-bottom: var(--cds-spacing-04);
  padding-bottom: var(--cds-spacing-03);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.layout-main-content { min-width: 0; }

#block-carbonibm-content article {
  padding-bottom: var(--cds-spacing-09); /* 48px — breathing room before next steps region */
}

/* --------------------------------------------------------------------------
   11. Hero Region
   -------------------------------------------------------------------------- */
.region-hero { position: relative; background-color: var(--cds-hero-bg); color: var(--cds-hero-text); }

.hero-block {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  padding: var(--cds-spacing-13) var(--cds-spacing-05) var(--cds-spacing-11);
}

@media (min-width: 42rem) { .hero-block { padding-inline: var(--cds-spacing-07); } }
@media (min-width: 66rem) { .hero-block { padding-inline: var(--cds-spacing-10); } }

.hero-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-family: var(--cds-font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cds-interactive);
  margin-bottom: var(--cds-spacing-05);
}

.hero-block__eyebrow::before { content: ''; display: block; width: 1.5rem; height: 1px; background: var(--cds-interactive); }

.hero-block h1 {
  font-family: var(--cds-font-sans);
  font-size: clamp(2rem, 5vw, 3.375rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cds-hero-text);
  max-width: 44rem;
  margin-bottom: var(--cds-spacing-06);
}

.hero-block__body {
  font-family: var(--cds-font-sans);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: #c6c6c6;
  max-width: 34rem;
  margin-bottom: var(--cds-spacing-08);
}

.hero-block__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  padding: 0.875rem var(--cds-spacing-07) 0.875rem var(--cds-spacing-05);
  background-color: var(--cds-interactive);
  color: var(--cds-text-on-color);
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.hero-block__cta:hover { background-color: var(--cds-interactive-hover); color: var(--cds-text-on-color); text-decoration: none; }
.hero-block__cta svg { width: 1.25rem; height: 1.25rem; fill: currentColor; margin-left: auto; }

/* --------------------------------------------------------------------------
   12. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-02);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--cds-font-sans);
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
}

.breadcrumb ol li::after { content: '/'; margin-left: var(--cds-spacing-02); color: var(--cds-text-placeholder); }
.breadcrumb ol li:last-child::after { display: none; }
.breadcrumb ol li a { color: var(--cds-text-secondary); }
.breadcrumb ol li a:hover { color: var(--cds-link-primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   13. Typography
   -------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body,
input, button, select, textarea,
.block, .region, .views-view,
.node, .field,
h1, h2, h3, h4, h5, h6,
p, li, td, th, dt, dd, caption,
blockquote, pre, code {
  font-family: var(--cds-font-sans) !important;
}

h1, .h1 { font-size: 2rem; font-weight: 400; line-height: 1.25; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-06); }
h2, .h2 { font-size: 1.75rem; font-weight: 400; line-height: 1.286; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-05); }
h3, .h3 { font-size: 1.25rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-05); }
h4, .h4 { font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-04); }
h5, .h5 { font-size: 0.875rem; font-weight: 600; line-height: 1.286; letter-spacing: 0.16px; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-04); }
h6, .h6 { font-size: 0.75rem; font-weight: 600; line-height: 1.334; letter-spacing: 0.32px; text-transform: uppercase; color: var(--cds-text-secondary); margin: 0 0 var(--cds-spacing-03); }

.display-heading { font-size: 2.625rem; font-weight: 300; line-height: 1.199; letter-spacing: 0; }

p { font-size: 0.875rem; font-weight: 400; line-height: 1.429; letter-spacing: 0.16px; color: var(--cds-text-primary); margin: 0 0 var(--cds-spacing-05); }

.text-body-02,
.field--name-body > .field__item > p:first-of-type { font-size: 1rem; line-height: 1.5; letter-spacing: 0; }

a { color: var(--cds-interactive); text-decoration: none; transition: color var(--cds-duration-fast-02) var(--cds-ease-standard); }
a:hover { color: var(--cds-interactive-hover); text-decoration: underline; }

ul, ol { font-size: 0.875rem; line-height: 1.429; letter-spacing: 0.16px; color: var(--cds-text-primary); padding-left: var(--cds-spacing-06); margin: 0 0 var(--cds-spacing-05); }
li { margin-bottom: var(--cds-spacing-02); }

label, .label { font-size: 0.75rem; font-weight: 400; line-height: 1.334; letter-spacing: 0.32px; color: var(--cds-text-secondary); }

code, kbd, samp { font-family: var(--cds-font-mono) !important; font-size: 0.875rem; font-weight: 400; letter-spacing: 0.32px; }

pre { font-family: var(--cds-font-mono) !important; font-size: 0.875rem; line-height: 1.429; letter-spacing: 0.32px; background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle); padding: var(--cds-spacing-05); overflow-x: auto; margin: 0 0 var(--cds-spacing-06); }

blockquote { font-size: 1.25rem; font-weight: 300; line-height: 1.4; letter-spacing: 0; color: var(--cds-text-primary); border-left: 3px solid var(--cds-interactive); padding-left: var(--cds-spacing-06); margin: var(--cds-spacing-07) 0; }

caption, figcaption { font-size: 0.75rem; line-height: 1.334; letter-spacing: 0.32px; color: var(--cds-text-secondary); }

strong, b { font-weight: 600; }
em, i { font-style: italic; }
small { font-size: 0.75rem; letter-spacing: 0.32px; }

.system-main-block, .block-system-main-block { font-size: 0.875rem; }

.node__title, .page-title, h1.title { font-size: 2rem !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--cds-text-primary) !important; }

.node--view-mode-teaser .node__title, .views-field-title a { font-size: 1.25rem; font-weight: 400; line-height: 1.4; }

.field__label { font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.32px !important; text-transform: uppercase; color: var(--cds-text-secondary) !important; margin-bottom: var(--cds-spacing-02); }

.messages__content { font-size: 0.875rem; line-height: 1.429; }
#toolbar-administration { font-family: var(--cds-font-sans) !important; }
.view-content { font-size: 0.875rem; line-height: 1.429; letter-spacing: 0.16px; }

table { font-size: 0.875rem; line-height: 1.429; letter-spacing: 0.16px; border-collapse: collapse; width: 100%; }
th { font-weight: 600; text-align: left; padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 2px solid var(--cds-border-subtle); color: var(--cds-text-primary); }
td { padding: var(--cds-spacing-04) var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); color: var(--cds-text-primary); vertical-align: top; }
tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------------------------
   14. Node Page
   -------------------------------------------------------------------------- */
.node__title { font-family: var(--cds-font-sans); font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 300; line-height: 1.2; margin-bottom: var(--cds-spacing-05); }
.node__meta { font-family: var(--cds-font-sans); font-size: 0.75rem; color: var(--cds-text-secondary); letter-spacing: 0.08em; margin-bottom: var(--cds-spacing-07); padding-bottom: var(--cds-spacing-05); border-bottom: 1px solid var(--cds-border-subtle); }

/* --------------------------------------------------------------------------
   15. Pager
   -------------------------------------------------------------------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--cds-spacing-02); padding: var(--cds-spacing-07) 0; }

.pager__item a,
.pager__item.is-active span { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 var(--cds-spacing-03); font-family: var(--cds-font-sans); font-size: 0.875rem; text-decoration: none; color: var(--cds-text-primary); border: 1px solid var(--cds-border-subtle); transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard), border-color var(--cds-duration-fast-02) var(--cds-ease-standard); }

.pager__item a:hover { background-color: var(--cds-layer-01); text-decoration: none; }
.pager__item.is-active span { background-color: var(--cds-interactive); border-color: var(--cds-interactive); color: var(--cds-text-on-color); }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-item { margin-bottom: var(--cds-spacing-06); }

.form-item label { display: block; font-family: var(--cds-font-sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; color: var(--cds-text-secondary); margin-bottom: var(--cds-spacing-02); }

.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="password"],
.form-item input[type="search"],
.form-item textarea,
.form-item select { display: block; width: 100%; height: 2.5rem; padding: 0 var(--cds-spacing-04); font-family: var(--cds-font-sans); font-size: 0.875rem; color: var(--cds-text-primary); background-color: var(--cds-layer-01); border: none; border-bottom: 1px solid var(--cds-border-strong); outline: none; transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard), border-color var(--cds-duration-fast-02) var(--cds-ease-standard); }

.form-item textarea { height: auto; min-height: 6rem; padding-top: var(--cds-spacing-04); resize: vertical; }

.form-item input:focus,
.form-item textarea:focus,
.form-item select:focus { background-color: var(--cds-background); border-bottom-color: var(--cds-interactive); box-shadow: inset 0 -2px 0 0 var(--cds-interactive); }

.button, input[type="submit"], button.form-submit { display: inline-flex; align-items: center; height: 3rem; padding: 0 var(--cds-spacing-07) 0 var(--cds-spacing-05); font-family: var(--cds-font-sans); font-size: 1rem; font-weight: 400; color: var(--cds-text-on-color); background-color: var(--cds-interactive); border: none; cursor: pointer; text-decoration: none; transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard); }

.button:hover, input[type="submit"]:hover, button.form-submit:hover { background-color: var(--cds-interactive-hover); }
.button--secondary { background-color: #393939; color: var(--cds-shell-header-text); }
.button--secondary:hover { background-color: #4c4c4c; }

/* --------------------------------------------------------------------------
   Hero Banner
   -------------------------------------------------------------------------- */
.twi-hero { width: 100%; background-color: #f4f4f4; border-bottom: 1px solid var(--cds-border-subtle); overflow: hidden; }
.twi-hero--dark { background-color: #161616; color: #f4f4f4; }
.twi-hero--light { background-color: #f4f4f4; color: var(--cds-text-primary); }

.twi-hero__inner { width: 100%; display: grid; grid-template-columns: 1fr; min-height: 32rem; align-items: stretch; }
.twi-hero__media { display: none; }

@media (min-width: 66rem) { .twi-hero__inner { min-height: 40rem; height: 40rem; } }
@media (min-width: 66rem) { .twi-hero__inner { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } .twi-hero__media { display: block; } }

.twi-hero__content { display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.5rem 2rem 3rem; }
@media (min-width: 66rem) { .twi-hero__content { padding: 3rem 2rem 3rem 4rem; } }

.twi-hero__heading { font-size: clamp(2rem, 4vw, 3.375rem) !important; font-weight: 300 !important; line-height: 1.19 !important; letter-spacing: 0 !important; margin: 0 0 var(--cds-spacing-07) !important; max-width: 26rem; }
.twi-hero--light .twi-hero__heading { color: #161616; }
.twi-hero--dark .twi-hero__heading { color: #f4f4f4; }

.twi-hero__subheading { font-size: 1.25rem !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; margin: 0 0 var(--cds-spacing-08) !important; max-width: 28rem; }
.twi-hero--light .twi-hero__subheading { color: #525252; }
.twi-hero--dark .twi-hero__subheading { color: #c6c6c6; }

.twi-hero__body { font-size: 1rem; line-height: 1.5; color: #525252; margin-bottom: var(--cds-spacing-07); max-width: 28rem; }
.twi-hero--dark .twi-hero__body { color: #c6c6c6; }
.twi-hero__body p { margin: 0; font-size: 1rem; }

.twi-hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-04); align-items: center; }

.twi-hero__cta { display: inline-flex; align-items: center; justify-content: space-between; min-width: 10rem; padding: 0.875rem var(--cds-spacing-07) 0.875rem var(--cds-spacing-05); font-family: var(--cds-font-sans); font-size: 1rem; font-weight: 400; text-decoration: none; transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard); gap: var(--cds-spacing-05); }

.twi-hero__cta--primary { background-color: var(--cds-interactive); color: #ffffff; }
.twi-hero__cta--primary:hover { background-color: var(--cds-interactive-hover); color: #ffffff; text-decoration: none; }
.twi-hero__cta--secondary { background-color: transparent; color: var(--cds-interactive); border: 1px solid var(--cds-interactive); }
.twi-hero__cta--secondary:hover { background-color: var(--cds-layer-01); text-decoration: none; }
.twi-hero__cta svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex-shrink: 0; }

.twi-hero__media { position: relative; overflow: hidden; min-height: 20rem; align-self: stretch; }
.twi-hero__media .field--name-field-hero-image, .twi-hero__media .field__item { height: 100%; display: block; }
.twi-hero__media img, .twi-hero__media .field--name-field-hero-image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; object-position: center; display: block; position: absolute; top: 0; left: 0; }
.twi-hero__media:empty { background: linear-gradient(135deg, #e0e0e0 0%, #c6c6c6 100%); }

.region-hero .view, .region-hero .view-content, .region-hero .views-row, .region-hero .block, .region-hero article { display: contents; }

/* --------------------------------------------------------------------------
   Front page
   -------------------------------------------------------------------------- */
.layout-main--front { margin-top: var(--cds-header-height); padding-top: 0; }

/* Super-wide: constrain entire page at 1584px centered */
.dialog-off-canvas-main-canvas {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  width: 100%;
}

/* Header is position:fixed so ignores parent — constrain its content directly */
.cds--header {
  padding-inline: max(0px, calc((100vw - var(--cds-max-width)) / 2));
}

/* Footer background spans full width, content stays centered */
footer.cds--footer {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.region-hero--front > *, .region-hero--front .block, .region-hero--front .views-element-container, .region-hero--front .contextual-region, .region-hero--front .view, .region-hero--front .view-content, .region-hero--front .views-row { display: contents; }
.region-hero--front { width: 100%; }

.layout-front-content { max-width: var(--cds-max-width); margin-inline: auto; padding: 0 var(--cds-spacing-05); }
@media (min-width: 42rem) { .layout-front-content { padding-inline: var(--cds-spacing-07); } }
@media (min-width: 66rem) { .layout-front-content { padding-inline: var(--cds-spacing-10); } }

.layout-main--front .node__title, .layout-main--front h1.page-title, .layout-main--front h1:not(.twi-hero__heading), .layout-main--front .page-header { display: none; }

body.toolbar-fixed .layout-main--front { margin-top: calc(var(--cds-header-height) + 39px); }
body.toolbar-fixed.toolbar-tray-open .layout-main--front { margin-top: calc(var(--cds-header-height) + 79px); }

/* --------------------------------------------------------------------------
   Cards Region
   -------------------------------------------------------------------------- */
.region-cards { width: 100%; border-top: 1px solid var(--cds-border-subtle, #e0e0e0); }
.region-cards .block { display: contents; }
.region-cards h3 { font-size: 0.875rem !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.16px !important; color: var(--cds-text-primary) !important; margin: 0 !important; padding: var(--cds-spacing-07) var(--cds-spacing-05) var(--cds-spacing-05) !important; border-top: none; }
@media (min-width: 42rem) { .region-cards h3 { padding-left: var(--cds-spacing-07) !important; padding-right: var(--cds-spacing-07) !important; } }
@media (min-width: 66rem) { .region-cards h3 { padding-left: var(--cds-spacing-10) !important; padding-right: var(--cds-spacing-10) !important; } }

/* --------------------------------------------------------------------------
   Card Grid
   -------------------------------------------------------------------------- */
.block-title--cards { font-size: 1.875rem !important; font-weight: 400 !important; line-height: 1.286 !important; letter-spacing: 0.16px !important; color: var(--cds-text-primary) !important; margin: 0 !important; padding: var(--cds-spacing-07) var(--cds-spacing-05) var(--cds-spacing-05); border-top: 1px solid var(--cds-border-subtle); }
@media (min-width: 42rem) { .block-title--cards { padding-left: var(--cds-spacing-07); padding-right: var(--cds-spacing-07); } }
@media (min-width: 66rem) { .block-title--cards { padding-left: var(--cds-spacing-10); padding-right: var(--cds-spacing-10); } }

.twi-card-section { padding: var(--cds-spacing-09) 0 0; }
.twi-card-section__heading { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.16px; color: var(--cds-text-primary); padding: 0 var(--cds-spacing-05) var(--cds-spacing-05); margin: 0; }

.view-card-series-display .view-content { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1px; background-color: var(--cds-border-subtle, #e0e0e0); list-style: none; padding: 0; margin: 0; }

.view-card-series-display.twi-cols-2 .view-content { grid-template-columns: repeat(2, 1fr) !important; }
.view-card-series-display.twi-cols-3 .view-content { grid-template-columns: repeat(3, 1fr) !important; }
.view-card-series-display.twi-cols-4 .view-content { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 41.999rem) { .view-card-series-display .view-content { grid-template-columns: 1fr !important; } }
@media (min-width: 42rem) and (max-width: 65.999rem) { .view-card-series-display .view-content { grid-template-columns: repeat(2, 1fr) !important; } }

.view-card-series-display .views-row { display: contents; }

.twi-card { background-color: var(--cds-layer-01, #f4f4f4); display: flex; flex-direction: column; position: relative; cursor: pointer; transition: background-color var(--cds-duration-fast-02, 110ms) ease; margin: 0; }
.twi-card:hover { background-color: var(--cds-layer-hover-01, #e8e8e8); }
.twi-card__heading-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.twi-card__image-wrapper { width: 100%; padding-top: 56.25%; position: relative; overflow: hidden; flex-shrink: 0; background-color: var(--cds-skeleton-01, #e8e8e8); display: block; }
.twi-card__image-wrapper .field--name-field-hero-image, .twi-card__image-wrapper .field__item { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.twi-card__image-wrapper img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; object-position: center; display: block; }

.twi-card__wrapper { display: flex; flex-direction: column; flex: 1; padding: var(--cds-spacing-05); gap: 0; }
.twi-card__content { flex: 1; display: flex; flex-direction: column; gap: var(--cds-spacing-03); min-height: 10rem; }

.twi-card__eyebrow { font-size: 0.75rem !important; font-weight: 400 !important; line-height: 1.334 !important; letter-spacing: 0.32px !important; color: var(--cds-text-secondary, #525252) !important; margin: 0 !important; text-transform: none; }
.twi-card__heading { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.375 !important; letter-spacing: 0 !important; color: var(--cds-text-primary, #161616) !important; margin: 0 !important; min-height: 2.75rem; }
.twi-card__heading-link { color: var(--cds-text-primary, #161616); text-decoration: none; }
.twi-card__heading-link:hover { color: var(--cds-text-primary, #161616); text-decoration: none; }
.twi-card__body { font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.429 !important; letter-spacing: 0.16px !important; color: var(--cds-text-secondary, #525252) !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.twi-card__footer { display: flex; justify-content: flex-end; align-items: flex-end; padding-top: var(--cds-spacing-07); margin-top: auto; }
.twi-card__cta { display: flex; align-items: center; justify-content: center; color: var(--cds-interactive, #0f62fe); position: relative; z-index: 2; text-decoration: none; }
.twi-card__cta svg { width: 1.25rem; height: 1.25rem; fill: currentColor; transition: transform var(--cds-duration-fast-02, 110ms) ease; }
.twi-card:hover .twi-card__cta svg { transform: translateX(4px); }

.view-card-series-display article.twi-card { border: none; padding: 0; }
.block-views-blockcard-series-display-block-1 { border-top: 1px solid var(--cds-border-subtle, #e0e0e0); }

/* --------------------------------------------------------------------------
   Hero Slider
   -------------------------------------------------------------------------- */
.twi-hero-track { position: relative; width: 100%; overflow: hidden; }
.twi-hero-track .twi-hero { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; opacity: 0; transition: opacity 0.7s ease-in-out; pointer-events: none; }
.twi-hero-track .twi-hero--active { opacity: 1; pointer-events: auto; position: relative; z-index: 2; }
.twi-hero { display: flex; }

.twi-hero-arrow { display: none !important; }
.twi-hero-arrow-hidden { position: absolute; bottom: 25%; z-index: 20; width: 3rem; height: 3rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--cds-duration-fast-02, 110ms) ease, border-color var(--cds-duration-fast-02, 110ms) ease; }
.twi-hero-arrow:hover { background: rgba(0, 0, 0, 0.55); border-color: #ffffff; }
.twi-hero-arrow--prev { right: 4rem; }
.twi-hero-arrow--next { right: 0.5rem; }
.twi-hero-arrow svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.twi-hero-dots { position: absolute; bottom: 20%; right: 0.5rem; display: flex; flex-direction: column; gap: var(--cds-spacing-03); z-index: 20; }
.twi-hero-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 0; transition: background var(--cds-duration-fast-02, 110ms) ease, transform var(--cds-duration-fast-02, 110ms) ease; }
.twi-hero-dot--active { background: #ffffff; transform: scale(1.3); }
.twi-hero-dot:hover { background: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   Call Tabs
   -------------------------------------------------------------------------- */
.region-calltabs { width: 100%; border-top: 1px solid var(--cds-border-subtle, #e0e0e0); }
.twi-calltabs { width: 100%; padding: var(--cds-spacing-09) 0 0; }

.twi-calltabs__heading { font-size: clamp(1.75rem, 3vw, 3rem) !important; font-weight: 300 !important; line-height: 1.19 !important; letter-spacing: 0 !important; color: var(--cds-text-primary, #161616) !important; margin: 0 0 var(--cds-spacing-07) !important; padding: 0 var(--cds-spacing-05); }
@media (min-width: 66rem) { .twi-calltabs__heading { padding: 0 var(--cds-spacing-10); } }

.twi-calltabs__tablist { display: grid; grid-template-columns: repeat(var(--twi-tab-count, 4), 1fr); border-top: 1px solid var(--cds-border-subtle, #e0e0e0); border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0); }
@media (max-width: 41.999rem) { .twi-calltabs__tablist { grid-template-columns: repeat(2, 1fr); } }

.twi-calltabs__tab { position: relative; display: flex; align-items: stretch; justify-content: center; padding: 0; background: var(--cds-layer-01, #f4f4f4); border: none; border-right: 1px solid var(--cds-border-subtle, #e0e0e0); border-bottom: 2px solid transparent; cursor: pointer; height: 5rem; overflow: hidden; transition: background var(--cds-duration-fast-02, 110ms) ease; }
@media (min-width: 42rem) { .twi-calltabs__tab { height: 6rem; } }
@media (min-width: 66rem) { .twi-calltabs__tab { height: 7.5rem; } }

.twi-calltabs__tab:last-child { border-right: none; }
.twi-calltabs__tab:hover { background: var(--cds-layer-hover-01, #e8e8e8); }
.twi-calltabs__tab--active { background: #ffffff !important; border-bottom-color: var(--cds-interactive, #0f62fe) !important; }

.twi-calltabs__tab img,
.twi-calltabs__tab .field--name-field-tab-one-image img,
.twi-calltabs__tab .field--name-field-tab-two-image-tab img,
.twi-calltabs__tab .field--name-field-tab-three-image-tab img,
.twi-calltabs__tab .field--name-field-tab-four-image-tab img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: grayscale(30%) opacity(0.75); transition: filter var(--cds-duration-fast-02, 110ms) ease; }

.twi-calltabs__tab--active img, .twi-calltabs__tab:hover img { filter: grayscale(0%) opacity(1); }
.twi-calltabs__tab .field, .twi-calltabs__tab .field__item, .twi-calltabs__tab > div, .twi-calltabs__tab > div > div { width: 100%; height: 100%; display: block; }

.twi-calltabs__tab-label { font-size: 0.875rem; font-weight: 600; color: var(--cds-text-secondary, #525252); }
.twi-calltabs__tab--active .twi-calltabs__tab-label { color: var(--cds-text-primary, #161616); }

.twi-calltabs__panel { width: 100%; }
.twi-calltabs__panel[hidden] { display: none; }
.twi-calltabs__panel--active { display: block; animation: calltabs-fade 0.3s ease; }

@keyframes calltabs-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.twi-calltabs__panel-inner { display: grid; grid-template-columns: 1fr; height: 32rem; }
@media (min-width: 42rem) { .twi-calltabs__panel-inner { height: 36rem; } }
@media (min-width: 66rem) { .twi-calltabs__panel-inner { grid-template-columns: 1fr 1fr; height: 40rem; } }

.twi-calltabs__panel-content { display: flex; flex-direction: column; justify-content: center; gap: var(--cds-spacing-05); padding: var(--cds-spacing-09) var(--cds-spacing-05) var(--cds-spacing-09) var(--cds-spacing-05); }
@media (min-width: 66rem) { .twi-calltabs__panel-content { padding: var(--cds-spacing-09) var(--cds-spacing-07) var(--cds-spacing-09) var(--cds-spacing-10); } }

.twi-calltabs__panel-heading { font-size: 2rem !important; font-weight: 400 !important; line-height: 1.25 !important; color: var(--cds-interactive, #0f62fe) !important; margin: 0 !important; }
.twi-calltabs__panel-copy { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--cds-text-primary, #161616) !important; margin: 0 !important; max-width: 40ch; }

.twi-calltabs__panel-cta { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); font-size: 1rem; font-weight: 400; color: var(--cds-interactive, #0f62fe); text-decoration: none; transition: color var(--cds-duration-fast-02, 110ms) ease; }
.twi-calltabs__panel-cta:hover { color: var(--cds-interactive, #0f62fe); text-decoration: underline; }
.twi-calltabs__panel-cta svg { width: 1.25rem; height: 1.25rem; fill: currentColor; flex-shrink: 0; transition: transform var(--cds-duration-fast-02, 110ms) ease; }
.twi-calltabs__panel-cta:hover svg { transform: translateX(4px); }

.twi-calltabs__panel-media { overflow: hidden; height: 100%; }
.twi-calltabs__panel-media img, .twi-calltabs__panel-media .field__item, .twi-calltabs__panel-media .field { width: 100%; height: 100%; display: block; }
.twi-calltabs__panel-media img { object-fit: cover; object-position: center; max-width: none !important; }

/* --------------------------------------------------------------------------
   Announcement Banner
   -------------------------------------------------------------------------- */
.region-announcement { width: 100%; margin: var(--cds-spacing-07) 0; }

.twi-announcement { display: grid; grid-template-columns: 50% 1fr auto; align-items: center; min-height: 6rem; background-color: #e8f1ff; border-top: 1px solid var(--cds-border-subtle, #e0e0e0); border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0); overflow: hidden; position: relative; }

@media (max-width: 41.999rem) { .twi-announcement { grid-template-columns: 1fr auto; padding: var(--cds-spacing-05); gap: var(--cds-spacing-04); } .twi-announcement__image { display: none; } }

.twi-announcement__image { height: 100%; min-height: 6rem; overflow: hidden; align-self: stretch; }
.twi-announcement__image .field, .twi-announcement__image .field__item, .twi-announcement__image > div, .twi-announcement__image > div > div { width: 100%; height: 100%; display: block; }
.twi-announcement__image .field__label { display: none !important; }
.twi-announcement__image img { width: 100%; height: 100%; min-height: 6rem; object-fit: cover; object-position: center; display: block; }

.twi-announcement__content { padding: var(--cds-spacing-05) var(--cds-spacing-07); }
.twi-announcement__title { font-size: 1rem !important; font-weight: 600 !important; color: var(--cds-text-primary, #161616) !important; margin: 0 0 var(--cds-spacing-02) !important; line-height: 1.4 !important; }
.twi-announcement__description { font-size: 0.875rem !important; font-weight: 400 !important; color: var(--cds-text-secondary, #525252) !important; margin: 0 !important; line-height: 1.4 !important; }

.twi-announcement__cta { padding: 0 var(--cds-spacing-07) 0 var(--cds-spacing-05); flex-shrink: 0; }
.twi-announcement__btn { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); height: 3rem; padding: 0 var(--cds-spacing-07); background: var(--cds-interactive, #0f62fe); color: #ffffff; font-size: 0.875rem; font-weight: 400; text-decoration: none; white-space: nowrap; transition: background var(--cds-duration-fast-02, 110ms) ease; }
.twi-announcement__btn:hover { background: #0043ce; color: #ffffff; text-decoration: none; }
.twi-announcement__btn svg { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; transition: transform var(--cds-duration-fast-02, 110ms) ease; }
.twi-announcement__btn:hover svg { transform: translateX(4px); }

.views-view-responsive-grid__item { display: flex !important; }
.views-view-responsive-grid__item-inner { display: flex !important; flex-direction: column; width: 100%; }
.views-view-responsive-grid__item-inner .twi-card { flex: 1; }

.path-node.node--type-product .block-page-title-block,
.path-node.node--type-solution .block-page-title-block,
.path-node.node--type-services .block-page-title-block { display: none; }

/* ==========================================================================
   Product page
   ========================================================================== */
.node-type-product #block-carbonibm-page-title,
.node-type-solution #block-carbonibm-page-title,
.node-type-services #block-carbonibm-page-title { display: none; }

.twi-product { max-width: var(--cds-grid-fluid-breakpoint-max, 1584px); margin: 0 auto; }
.twi-product__hero { background: var(--cds-background, #ffffff); border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0); padding: var(--cds-spacing-09) var(--cds-spacing-07); }
.twi-product__logo { margin-bottom: var(--cds-spacing-06); }
.twi-product__logo img { max-height: 4rem; width: auto; display: block; }
.twi-product__title { font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 300; line-height: 1.199; color: var(--cds-text-primary, #161616); margin: 0 0 var(--cds-spacing-04) 0; }
.twi-product__tagline { font-size: 1.25rem; font-weight: 300; color: var(--cds-text-secondary, #525252); margin: 0; line-height: 1.5; }

.twi-product__section { display: grid; grid-template-columns: 14rem 1fr; border-top: 1px solid var(--cds-border-subtle, #e0e0e0); padding: var(--cds-spacing-08) var(--cds-spacing-07); gap: var(--cds-spacing-07); }
.twi-product__section--alt { background: var(--cds-layer-01, #f4f4f4); }

@media (max-width: 41.999rem) { .twi-product__section { grid-template-columns: 1fr; gap: var(--cds-spacing-05); padding: var(--cds-spacing-06) var(--cds-spacing-05); } }

.twi-product__section-label h2 { font-size: 0.875rem; font-weight: 600; color: var(--cds-text-secondary, #525252); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; padding-top: var(--cds-spacing-02); }
.twi-product__section-body { font-size: 1rem; line-height: 1.625; color: var(--cds-text-primary, #161616); }

.twi-product__section--overview .twi-product__section-body,
.twi-product__section--overview .twi-product__section-body p { font-size: 1.25rem; font-weight: 300; line-height: 1.6; color: var(--cds-text-primary, #161616); }

.twi-product__benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--cds-spacing-05); }
.twi-product__benefit { background: var(--cds-layer-02, #ffffff); border-left: 3px solid var(--cds-interactive, #0f62fe); padding: var(--cds-spacing-05); }
.twi-product__benefit-heading { font-size: 0.9375rem; font-weight: 600; color: var(--cds-text-primary, #161616); margin: 0 0 var(--cds-spacing-03) 0; }
.twi-product__benefit-desc { font-size: 0.875rem; line-height: 1.5; color: var(--cds-text-secondary, #525252); margin: 0; }

.twi-product__benefit-link { margin-top: var(--cds-spacing-04); margin-bottom: 0; }
.twi-product__benefit-link a { font-size: 0.875rem; font-weight: 500; color: var(--cds-interactive, #0f62fe); text-decoration: underline; }
.twi-product__benefit-link a:hover { color: var(--cds-interactive-hover, #0353e9); }

.twi-product__resources-grid { display: flex; flex-direction: column; gap: var(--cds-spacing-05); }
.twi-product__resource-type { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cds-text-secondary, #525252); margin: 0 0 var(--cds-spacing-03) 0; }
.twi-product__section-body a { color: var(--cds-interactive, #0f62fe); text-decoration: none; }
.twi-product__section-body a:hover { text-decoration: underline; }
.twi-product__related-grid { display: flex; gap: var(--cds-spacing-07); flex-wrap: wrap; }
.twi-product .node__submitted, .twi-product .node__meta { display: none; }

/* ==========================================================================
   Next Steps panel
   ========================================================================== */
.twi-next-steps { background: transparent; border-top: 1px solid var(--cds-border-subtle, #e0e0e0); padding: var(--cds-spacing-10) var(--cds-spacing-07); }

.region-next-steps .views-row {
  background: #ffffff url('../images/mega-menu-bg.jpg') top right no-repeat;
  background-size: cover;
}
.twi-next-steps__inner { max-width: 48rem; }
.twi-next-steps__heading { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; line-height: 1.199; color: var(--cds-interactive, #0f62fe); margin: 0 0 var(--cds-spacing-06) 0; letter-spacing: 0; }
.twi-next-steps__subtext { font-size: 1.25rem; font-weight: 300; line-height: 1.5; color: var(--cds-text-primary, #161616); margin: 0 0 var(--cds-spacing-07) 0; max-width: 40rem; }
.twi-next-steps__subtext p { font-size: 1.25rem; font-weight: 300; line-height: 1.5; color: var(--cds-text-primary, #161616); margin: 0; }
.twi-next-steps__actions { display: flex; gap: var(--cds-spacing-04); flex-wrap: wrap; align-items: center; }

.twi-next-steps__btn { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); padding: calc(var(--cds-spacing-04) - 1px) var(--cds-spacing-07) calc(var(--cds-spacing-04) - 1px) var(--cds-spacing-06); font-size: 0.9375rem; font-weight: 400; text-decoration: none; min-height: 3rem; transition: background var(--cds-duration-fast-02, 110ms) ease, border-color var(--cds-duration-fast-02, 110ms) ease; white-space: nowrap; }
.twi-next-steps__btn svg { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; }
.twi-next-steps__btn--primary { background: var(--cds-interactive, #0f62fe); color: #ffffff; border: 1px solid var(--cds-interactive, #0f62fe); }
.twi-next-steps__btn--primary:hover { background: var(--cds-hover-primary, #0353e9); border-color: var(--cds-hover-primary, #0353e9); color: #ffffff; }
.twi-next-steps__btn--secondary { background: transparent; color: var(--cds-interactive, #0f62fe); border: 1px solid var(--cds-interactive, #0f62fe); }
.twi-next-steps__btn--secondary:hover { background: var(--cds-layer-hover-01, #e8e8e8); }

@media (max-width: 41.999rem) { .twi-next-steps { padding: var(--cds-spacing-08) var(--cds-spacing-05); } .twi-next-steps__actions { flex-direction: column; align-items: flex-start; } .twi-next-steps__btn { width: 100%; justify-content: space-between; } }

/* --------------------------------------------------------------------------
   Mobile Navigation
   -------------------------------------------------------------------------- */
@media (min-width: 66rem) { .twi-mobile-nav { display: none; } }

.twi-mobile-nav { width: 100%; }
.twi-mobile-nav__list { list-style: none; margin: 0; padding: var(--cds-spacing-04) 0; }
.twi-mobile-nav__item { border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0); }

.twi-mobile-nav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--cds-spacing-04) var(--cds-spacing-05); font-size: 0.9375rem; font-weight: 400; color: var(--cds-text-primary, #161616); text-decoration: none; background: transparent; border: none; cursor: pointer; text-align: left; transition: background var(--cds-duration-fast-02, 110ms) ease; }
.twi-mobile-nav__link:hover, .twi-mobile-nav__link[aria-current="page"] { background: var(--cds-layer-hover-01, #e8e8e8); color: var(--cds-interactive, #0f62fe); }
.twi-mobile-nav__item--active > .twi-mobile-nav__link { color: var(--cds-interactive, #0f62fe); font-weight: 600; border-left: 3px solid var(--cds-interactive, #0f62fe); }

.twi-mobile-nav__arrow { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; transition: transform var(--cds-duration-moderate-01, 240ms) ease; }
.twi-mobile-nav__toggle[aria-expanded="true"] .twi-mobile-nav__arrow { transform: rotate(180deg); }

.twi-mobile-nav__sub { list-style: none; margin: 0; padding: 0; background: var(--cds-layer-01, #f4f4f4); }
.twi-mobile-nav__sub[hidden] { display: none; }
.twi-mobile-nav__sub-item { border-bottom: 1px solid var(--cds-border-subtle-02, #e8e8e8); }
.twi-mobile-nav__sub-item:last-child { border-bottom: none; }

.twi-mobile-nav__sub-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--cds-spacing-03) var(--cds-spacing-07); font-size: 0.875rem; font-weight: 400; color: var(--cds-text-secondary, #525252); text-decoration: none; background: transparent; border: none; cursor: pointer; text-align: left; transition: background var(--cds-duration-fast-02, 110ms) ease, color var(--cds-duration-fast-02, 110ms) ease; }
.twi-mobile-nav__sub-link:hover, .twi-mobile-nav__sub-link[aria-current="page"] { background: var(--cds-layer-hover-02, #e0e0e0); color: var(--cds-interactive, #0f62fe); }
.twi-mobile-nav__sub-item--active > .twi-mobile-nav__sub-link { color: var(--cds-interactive, #0f62fe); }

.twi-mobile-nav__sub--l2 { background: var(--cds-layer-02, #ececec); }
.twi-mobile-nav__sub-link--l2 { padding-left: var(--cds-spacing-10); font-size: 0.8125rem; }

@keyframes twi-logo-reveal { 0% { opacity: 0; } 40% { opacity: 0.25; } 70% { opacity: 0.6; } 100% { opacity: 1; } }
.cds--header__name--wordmark { display: inline-block; animation: twi-logo-reveal 1.2s ease-in-out 0.1s both; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
footer.cds--footer { background-color: var(--cds-footer-bg); border-top: 1px solid var(--cds-footer-border); margin-top: auto; }

.cds--footer__main { max-width: var(--cds-max-width); margin-inline: auto; padding: var(--cds-spacing-10) var(--cds-spacing-05) var(--cds-spacing-09); display: grid; grid-template-columns: 1fr; gap: var(--cds-spacing-08); }
@media (min-width: 42rem) { .cds--footer__main { grid-template-columns: repeat(2, 1fr); padding-inline: var(--cds-spacing-07); } }
@media (min-width: 66rem) { .cds--footer__main { grid-template-columns: repeat(4, 1fr); padding-inline: var(--cds-spacing-10); } }

.cds--footer__col-heading { font-family: var(--cds-font-sans); font-size: 0.875rem; font-weight: 600; color: var(--cds-footer-text); margin-bottom: var(--cds-spacing-06); }
.cds--footer__col ul { list-style: none; padding: 0; margin: 0; }
.cds--footer__col ul li { margin-bottom: 0; }
.cds--footer__col ul li a { display: block; padding: var(--cds-spacing-03) 0; font-family: var(--cds-font-sans); font-size: 0.875rem; font-weight: 400; color: var(--cds-footer-link); text-decoration: none; transition: color var(--cds-duration-fast-02) var(--cds-ease-standard); }
.cds--footer__col ul li a:hover { color: var(--cds-footer-link-hover); }

.cds--footer__bottom { background-color: var(--cds-footer-bottom-bg); border-top: 1px solid var(--cds-footer-border); }
.cds--footer__bottom-inner { max-width: var(--cds-max-width); margin-inline: auto; padding: var(--cds-spacing-06) var(--cds-spacing-05); display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-05); font-family: var(--cds-font-sans); font-size: 0.75rem; color: var(--cds-footer-text); }
@media (min-width: 66rem) { .cds--footer__bottom-inner { padding-inline: var(--cds-spacing-10); } }
.cds--footer__bottom-inner a { color: var(--cds-footer-link); text-decoration: none; }
.cds--footer__bottom-inner a:hover { color: var(--cds-footer-link-hover); text-decoration: underline; }
.cds--footer__bottom-inner .cds--footer__legal { margin-left: auto; display: flex; gap: var(--cds-spacing-06); }

/* --------------------------------------------------------------------------
   18. Messages
   -------------------------------------------------------------------------- */
.messages { padding: var(--cds-spacing-04) var(--cds-spacing-05); margin-bottom: var(--cds-spacing-05); font-family: var(--cds-font-sans); font-size: 0.875rem; border-left: 3px solid; display: flex; align-items: flex-start; gap: var(--cds-spacing-04); }
.messages--status { background-color: #defbe6; border-left-color: var(--cds-support-success); color: #0e6027; }
.messages--warning { background-color: #fdf6dd; border-left-color: var(--cds-support-warning); color: #4d3800; }
.messages--error { background-color: #fff1f1; border-left-color: var(--cds-support-error); color: #750e13; }

/* --------------------------------------------------------------------------
   19. Tabs
   -------------------------------------------------------------------------- */
.tabs { border-bottom: 1px solid var(--cds-border-subtle); margin-bottom: var(--cds-spacing-06); }
.tabs ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 0; }
.tabs ul li a { display: block; padding: var(--cds-spacing-04) var(--cds-spacing-05); font-family: var(--cds-font-sans); font-size: 0.875rem; font-weight: 400; color: var(--cds-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--cds-duration-fast-02), border-color var(--cds-duration-fast-02); }
.tabs ul li.is-active a, .tabs ul li a:hover { color: var(--cds-text-primary); border-bottom-color: var(--cds-interactive); }

/* --------------------------------------------------------------------------
   20. Drupal Admin Toolbar Offset
   -------------------------------------------------------------------------- */
body.toolbar-fixed .cds--header { top: 39px; }
body.toolbar-fixed.toolbar-tray-open .cds--header { top: 79px; }
body.toolbar-fixed .layout-main { margin-top: calc(var(--cds-header-height) + 39px); }
body.toolbar-fixed.toolbar-tray-open .layout-main { margin-top: calc(var(--cds-header-height) + 79px); }

/* --------------------------------------------------------------------------
   21. Utility Classes
   -------------------------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Search Panel
   ========================================================================== */
.cds--header__search-panel {
  display: none;
  position: absolute;
  top: var(--cds-header-height);
  left: 0; right: 0;
  height: 3rem;
  background-color: var(--cds-shell-header-bg-02);
  border-bottom: 1px solid var(--cds-shell-header-border);
  z-index: 8001;
}

.cds--header__search-panel.is-open { display: flex; align-items: center; animation: search-slide-in var(--cds-duration-moderate-01) var(--cds-ease-entrance); }

.cds--header__search-form { display: flex; align-items: center; width: 100%; height: 100%; max-width: var(--cds-max-width); margin-inline: auto; padding-inline: var(--cds-spacing-05); }
@media (min-width: 66rem) { .cds--header__search-form { padding-inline: var(--cds-spacing-10); } }

.cds--header__search-input { flex: 1; height: 100%; padding: 0 var(--cds-spacing-04); font-family: var(--cds-font-sans); font-size: 1rem; font-weight: 300; color: var(--cds-shell-header-text); background: transparent; border: none; border-bottom: 1px solid transparent; outline: none; caret-color: var(--cds-interactive); transition: border-color var(--cds-duration-fast-02) var(--cds-ease-standard); }
.cds--header__search-input::placeholder { color: var(--cds-text-placeholder); }
.cds--header__search-input:focus { border-bottom-color: var(--cds-interactive); }
.cds--header__search-input::-webkit-search-decoration,
.cds--header__search-input::-webkit-search-cancel-button,
.cds--header__search-input::-webkit-search-results-button,
.cds--header__search-input::-webkit-search-results-decoration { display: none; }

.cds--header__search-submit, .cds--header__search-close { display: flex; align-items: center; justify-content: center; width: var(--cds-header-height); height: var(--cds-header-height); background: none; border: none; cursor: pointer; color: var(--cds-shell-header-text); flex-shrink: 0; transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard); }
.cds--header__search-submit:hover, .cds--header__search-close:hover { background-color: var(--cds-shell-header-bg); }
.cds--header__search-submit svg, .cds--header__search-close svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.cds--header.search-open .mega-menu-panel { top: calc(var(--cds-header-height) * 2); }
.cds--header { position: fixed; overflow: visible; }

.cds--header__name,
.cds--header__name:hover,
.cds--header__name:visited { color: var(--cds-interactive, #0f62fe) !important; text-decoration: none; }
.cds--header__name--prefix { color: var(--cds-interactive, #0f62fe) !important; font-weight: 300; }

.twi-hero__heading { color: var(--cds-interactive, #0f62fe) !important; display: block !important; font-size: clamp(1.75rem, 3vw, 2.5rem) !important; margin-bottom: var(--cds-spacing-05) !important; max-width: 30rem; }

.region-announcement .node__title,
.region-announcement h2.node__title { display: none !important; }

/* ==========================================================================
   Form required field indicators
   ========================================================================== */
.form-required::after { content: '*'; display: inline; margin-left: 0.2em; color: var(--cds-support-error, #da1e28); font-weight: 600; }
.form-checkboxes .form-required::after, .form-radios .form-required::after { display: none; }
.js-form-required:not(.form-checkboxes .js-form-required):not(.form-radios .js-form-required)::after { content: '*'; display: inline; margin-left: 0.2em; color: var(--cds-support-error, #da1e28); font-weight: 600; }

/* ==========================================================================
   Webform pages
   ========================================================================== */
.twi-form__title { font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 300; line-height: 1.199; color: var(--cds-text-primary, #161616); margin: 0 0 var(--cds-spacing-07) 0; padding: var(--cds-spacing-09) var(--cds-spacing-07) 0; }
.path-webform .layout-main-content { max-width: 48rem; padding: 0 var(--cds-spacing-07) var(--cds-spacing-10); }

/* ==========================================================================
   Form Page — two-panel IBM-style layout
   ========================================================================== */

/* ── Outer wrapper ── */
.twi-form-page {
  display: flex;
  min-height: calc(100vh - var(--cds-header-height));
  align-items: stretch;
}

/* ── Left panel ── */
.twi-form-page__left {
  position: relative;
  width: 38%;
  flex-shrink: 0;
  background-color: #f4f4f4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay removed — light background image */
.twi-form-page__left-overlay {
  display: none;
}

.twi-form-page__left-content {
  position: relative;
  z-index: 2;
  padding: 4rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 20%;
  min-height: 100%;
}

.twi-form-page__title {
  font-size: 2rem !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  color: #161616 !important;
  margin: 0 0 1.5rem 0 !important;
}

.twi-form-page__copy {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #161616;
}

.twi-form-page__copy p {
  font-size: 0.95rem;
  color: #161616;
  margin: 0 0 1rem 0;
}

/* ── Right panel ── */
.twi-form-page__right {
  flex: 1;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  padding: 4rem 3rem;
}

.twi-form-page__form-wrapper {
  width: 100%;
  max-width: 680px;
}

/* Hide the "Webform" label Drupal outputs above the form */
.twi-form-page__form-wrapper > div > div:first-child:not(form) {
  display: none;
}

/* ── Two-column webform grid ── */
.twi-form-page__form-wrapper .webform-submission-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  align-items: start;
}

/* Full-width elements */
.twi-form-page__form-wrapper .webform-submission-form .js-form-type-textarea,
.twi-form-page__form-wrapper .webform-submission-form fieldset,
.twi-form-page__form-wrapper .webform-submission-form .webform-actions,
.twi-form-page__form-wrapper .webform-submission-form .js-form-type-webform-markup {
  grid-column: 1 / -1;
}

/* ── Form field styling ── */
.twi-form-page__form-wrapper label {
  display: block;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cds-text-secondary, #525252) !important;
  margin-bottom: 0.4rem;
}

.twi-form-page__form-wrapper input[type="text"],
.twi-form-page__form-wrapper input[type="email"],
.twi-form-page__form-wrapper input[type="tel"],
.twi-form-page__form-wrapper input[type="date"],
.twi-form-page__form-wrapper select,
.twi-form-page__form-wrapper textarea {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  color: var(--cds-text-primary, #161616);
  background: #f4f4f4;
  border: none;
  border-bottom: 2px solid #8d8d8d;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
  border-radius: 0;
  appearance: none;
  height: auto;
  min-height: 2.5rem;
}

.twi-form-page__form-wrapper input[type="text"]:focus,
.twi-form-page__form-wrapper input[type="email"]:focus,
.twi-form-page__form-wrapper input[type="tel"]:focus,
.twi-form-page__form-wrapper input[type="date"]:focus,
.twi-form-page__form-wrapper select:focus,
.twi-form-page__form-wrapper textarea:focus {
  background: #e8e8e8;
  border-bottom-color: var(--twi-cyan, #00b4d8);
  box-shadow: none;
}

.twi-form-page__form-wrapper textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 0.65rem;
}

/* ── Date picker icon ── */
.twi-form-page__form-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.twi-form-page__form-wrapper input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── Submit button ── */
.twi-form-page__form-wrapper .webform-actions {
  margin-top: 0.5rem;
}

.twi-form-page__form-wrapper .button--primary,
.twi-form-page__form-wrapper input[type="submit"] {
  background: var(--twi-navy, #04043d);
  color: #ffffff;
  border: none;
  padding: 0.85rem 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 0;
  height: auto;
}

.twi-form-page__form-wrapper .button--primary:hover,
.twi-form-page__form-wrapper input[type="submit"]:hover {
  background: var(--twi-cyan, #00b4d8);
}

/* ── Required marker ── */
.twi-form-page__form-wrapper .form-required::after,
.twi-form-page__form-wrapper .js-form-required::after {
  color: var(--twi-cyan, #00b4d8);
}

/* ── Error states ── */
.twi-form-page__form-wrapper .form-item--error input,
.twi-form-page__form-wrapper .form-item--error select,
.twi-form-page__form-wrapper .form-item--error textarea {
  border-bottom-color: #da1e28;
}

.twi-form-page__form-wrapper .form-item--error-message {
  font-size: 0.75rem;
  color: #da1e28;
  margin-top: 0.25rem;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .twi-form-page { flex-direction: column; }
  .twi-form-page__left { width: 100%; min-height: 280px; }
  .twi-form-page__left-content { padding: 2.5rem 1.5rem; justify-content: flex-end; }
  .twi-form-page__right { padding: 2rem 1.5rem; }
  .twi-form-page__form-wrapper .webform-submission-form { grid-template-columns: 1fr; }
  .twi-form-page__form-wrapper .webform-submission-form fieldset,
  .twi-form-page__form-wrapper .webform-submission-form .webform-actions { grid-column: 1; }
}

/* ==========================================================================
   News — Detail page & listing
   ========================================================================== */

/* --------------------------------------------------------------------------
   News detail — Hero image
   -------------------------------------------------------------------------- */
.news-hero-image {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  margin-bottom: 0;
}

.news-hero-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.news-hero-image--fallback {
  background: #04043d;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-hero-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.news-hero-fallback__wordmark {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 4rem;
  font-weight: 600;
  color: #0f62fe;
  letter-spacing: 0.1em;
  line-height: 1;
}

.news-hero-fallback__tagline {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b6bbf;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   News detail — Two-column layout
   -------------------------------------------------------------------------- */
.news-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem;
  padding-top: 2rem;
  align-items: start;
}

.news-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 8px 20px;
  height: 38px;
  margin-bottom: 1.25rem;
  line-height: 1;
}

.news-back-link:hover {
  background: var(--cds-interactive-hover);
  color: #ffffff;
  text-decoration: none;
}

.news-back-link svg {
  display: inline;
  flex-shrink: 0;
  stroke: #ffffff;
}

.news-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.news-detail-cat div,
.news-detail-brands div,
.news-detail-date div {
  display: inline;
}

.news-detail-cat,
.news-detail-brands {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.news-detail-cat a {
  color: var(--cds-interactive);
  text-decoration: none;
}

.news-detail-cat a:hover {
  text-decoration: underline;
}

.news-detail-brands {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-detail-brands a {
  color: var(--cds-interactive);
  text-decoration: none;
}

.news-detail-brands a:hover {
  text-decoration: underline;
}

.news-detail-meta .news-detail-cat + .news-detail-brands::before {
  content: '/';
  color: var(--cds-text-secondary);
  font-weight: 400;
  margin-right: 0.25rem;
}

.news-detail-date {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cds-text-secondary);
  margin-left: auto;
}

.news-detail-date time {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}

.news-detail-deck {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.0625rem;
  color: var(--cds-text-secondary);
  line-height: 1.65;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cds-layer-02);
}

.news-detail-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  color: var(--cds-text-primary);
  line-height: 1.75;
}

.news-detail-body p { margin-bottom: 1.25rem; }
.news-detail-body p:last-child { margin-bottom: 0; }
.news-detail-body h2,
.news-detail-body h3 {
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}
.news-detail-body ul,
.news-detail-body ol { margin: 0 0 1.25rem 1.5rem; }
.news-detail-body li { margin-bottom: 0.375rem; }

/* External link button */
.news-external-link {
  margin-top: 1.5rem;
}

.news-external-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 8px 20px;
  height: 38px;
  line-height: 1;
  border-radius: 0;
}

.news-external-link a:hover {
  background: var(--cds-interactive-hover);
  color: #ffffff;
  text-decoration: none;
}

/* Hide Drupal field label */
.news-external-link .field__label {
  display: none;
}

/* --------------------------------------------------------------------------
   News detail — Sidebar
   -------------------------------------------------------------------------- */
.news-detail-sidebar {
  position: sticky;
  top: 4rem;
}

.news-sidebar-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cds-text-secondary);
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--cds-interactive);
  margin-bottom: 0.75rem;
}

.news-detail-sidebar .views-row {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--cds-layer-02);
}

.news-detail-sidebar .views-row:last-child { border-bottom: none; }

/* Taxonomy terms line — Product News, VoluMill etc */
.news-detail-sidebar .views-field-term-node-tid .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.25rem;
}

/* Title */
.news-detail-sidebar .views-field-title a,
.news-detail-sidebar .views-field-title span.field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--cds-interactive);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  margin-bottom: 0.25rem;
}

.news-detail-sidebar .views-field-title a:hover {
  text-decoration: underline;
}

/* Date */
.news-detail-sidebar .views-field-field-publication-date {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
  margin-top: 0.25rem;
}

/* Summary in sidebar */
.news-detail-sidebar .views-field-field-summary {
  display: block;
}

.news-detail-sidebar .views-field-field-summary .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.25rem;
}

/* Sidebar rows — stacked flex layout */
.news-detail-sidebar .views-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Taxonomy terms line — PRODUCT NEWS, VOLUMILL */
.news-detail-sidebar .views-field-term-node-tid .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
}

/* Title — same style as taxonomy terms */
.news-detail-sidebar .views-field-title .field-content,
.news-detail-sidebar .views-field-title a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  display: block;
}

.news-detail-sidebar .views-field-title a:hover {
  text-decoration: underline;
}

/* Date */
.news-detail-sidebar .views-field-field-publication-date .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
  display: block;
}

/* More link — small solid blue button */
.news-detail-sidebar .views-field-view-node .field-content a {
  display: inline-block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  margin-top: 0.375rem;
  border-radius: 0;
  line-height: 1.6;
}

.news-detail-sidebar .views-field-view-node .field-content a:hover {
  background: var(--cds-interactive-hover);
}

/* --------------------------------------------------------------------------
   News listing — Exposed filter form
   -------------------------------------------------------------------------- */
body.page-news-listing .views-exposed-form {
  max-width: 640px;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cds-layer-02);
}

body.page-news-listing .views-exposed-form .js-form-type-select {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 0.75rem;
  width: auto;
}

body.page-news-listing .views-exposed-form label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.25rem;
}

body.page-news-listing .views-exposed-form select {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  background: var(--cds-background);
  border: 1px solid var(--cds-layer-02);
  border-bottom: 2px solid var(--cds-text-secondary);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  min-width: 180px;
  width: auto;
  cursor: pointer;
}

body.page-news-listing .views-exposed-form select:focus {
  outline: 2px solid var(--cds-interactive);
  border-bottom-color: var(--cds-interactive);
}

body.page-news-listing .views-exposed-form .form-actions {
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 0.75rem;
}

body.page-news-listing .views-exposed-form input[type="submit"] {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--cds-interactive);
  border: none;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  height: 38px;
  border-radius: 0;
}

body.page-news-listing .views-exposed-form input[type="submit"]:hover {
  background: var(--cds-interactive-hover);
}

/* --------------------------------------------------------------------------
   News listing — Article rows
   -------------------------------------------------------------------------- */
body.page-news-listing .views-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--cds-layer-02);
  align-items: start;
}

body.page-news-listing .views-row:first-child {
  border-top: 1px solid var(--cds-layer-02);
}

body.page-news-listing .views-field-field-featured-image {
  grid-column: 1;
  grid-row: 1 / 6;
}

body.page-news-listing .views-field-field-featured-image img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  display: block;
}

body.page-news-listing .views-field-field-news-category,
body.page-news-listing .views-field-title,
body.page-news-listing .views-field-field-summary,
body.page-news-listing .views-field-field-publication-date {
  grid-column: 2;
}

body.page-news-listing .views-field-field-news-category .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cds-interactive);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body.page-news-listing .views-field-title a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--cds-interactive);
  text-decoration: none;
  line-height: 1.3;
}

body.page-news-listing .views-field-title a:hover {
  color: var(--cds-interactive-hover);
  text-decoration: underline;
}

body.page-news-listing .views-field-field-summary .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.0625rem;
  color: var(--cds-text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-news-listing .views-field-field-publication-date .field-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--cds-text-secondary);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 66rem) {
  .news-detail-layout {
    grid-template-columns: 1fr;
  }
  .news-detail-sidebar {
    position: static;
    border-top: 2px solid var(--cds-layer-02);
    padding-top: 2rem;
    margin-top: 2rem;
  }
  .news-detail-date { margin-left: 0; }
  body.page-news-listing .views-exposed-form { max-width: 100%; }
  body.page-news-listing .views-exposed-form .js-form-type-select {
    display: inline-block;
    margin-right: 0.5rem;
    width: calc(50% - 0.5rem);
    min-width: 0;
  }
  body.page-news-listing .views-exposed-form select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }
}

@media (max-width: 42rem) {
  .news-hero-image img { height: 240px; }
  .news-hero-image--fallback { height: 160px; }
  body.page-news-listing .views-row {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0.875rem;
  }
  body.page-news-listing .views-field-field-featured-image img {
    width: 80px;
    height: 56px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Block title — same size as links, bold, white */
.region-footer-first h2,
.region-footer-second h2,
.region-footer-third h2,
footer h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 0.75rem 0;
  padding: 0;
  border: none;
}

/* Footer menu links */
.region-footer-first a,
.region-footer-second a,
.region-footer-third a,
footer nav a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #c6c6c6;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
}

.region-footer-first a:hover,
.region-footer-second a:hover,
.region-footer-third a:hover,
footer nav a:hover {
  color: #ffffff;
}

/* Footer logo column + menu columns layout */
.cds--footer {
  padding: 0;
}

.cds--footer__main {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding: 2.5rem 2rem;
  max-width: var(--cds-max-width);
  margin-inline: auto;
}

.cds--footer__logo {
  flex: 0 0 150px;
  padding-top: 0.25rem;
}

.cds--footer__logo a {
  display: block;
}

.cds--footer__logo img {
  width: 70px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.cds--footer__cols {
  display: flex;
  flex: 1;
  gap: 2rem;
  flex-wrap: wrap;
}

.cds--footer__col {
  flex: 1;
  min-width: 140px;
}

.cds--footer__bottom {
  border-top: 1px solid #393939;
  padding: 1rem 2rem;
}

@media (max-width: 66rem) {
  .cds--footer__main {
    flex-direction: column;
    gap: 2rem;
  }
  .cds--footer__logo {
    flex: none;
  }
}

/* ==========================================================================
   Hero — Video embed
   ========================================================================== */

/* Iframe embeds (YouTube/Vimeo) — 16:9 aspect ratio box */
.twi-hero__media--video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.twi-hero__media--video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* S3/self-hosted video — fills the media container like the hero image */
.twi-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When video is present, media container needs explicit height */
.twi-hero__media--video:has(.twi-hero__video) {
  padding-bottom: 0;
  height: 100%;
  min-height: 360px;
}

/* ==========================================================================
   Promo Banner — dark navy strip above breadcrumb
   ========================================================================== */
.region-promo-banner {
  background: #04043d;
  width: 100%;
}

.region-promo-banner .block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.75rem 2rem;
  flex-wrap: wrap;
}

.region-promo-banner p,
.region-promo-banner span,
.region-promo-banner div {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  color: #ffffff;
  margin: 0;
}

.region-promo-banner a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.region-promo-banner a:hover {
  text-decoration: underline;
}

.region-promo-banner a::after {
  content: '→';
}

/* ==========================================================================
   Breadcrumb region
   ========================================================================== */
.region-breadcrumb {
  padding: 0.625rem 2rem;
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-layer-02);
}

.region-breadcrumb nav,
.region-breadcrumb ol,
.region-breadcrumb ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.region-breadcrumb li {
  display: flex;
  align-items: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}

.region-breadcrumb li + li::before {
  content: '/';
  margin: 0 0.5rem;
  color: var(--cds-text-secondary);
}

.region-breadcrumb a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--cds-interactive);
  text-decoration: none;
}

.region-breadcrumb a:hover {
  text-decoration: underline;
}

/* Current page — not a link */
.region-breadcrumb .breadcrumb__item--active,
.region-breadcrumb li:last-child {
  color: var(--cds-text-primary);
}

/* ==========================================================================
   Solution — Related Products section
   ========================================================================== */
.solution-related {
  background: var(--cds-layer-01);
  border-top: 2px solid var(--cds-interactive);
  margin-top: 3rem;
  padding: 2.5rem 0;
}

.solution-related__subheading {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cds-text-primary, #161616);
  margin-bottom: 0.75rem;
}

.solution-related__heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--cds-interactive);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
  grid-column: 1 / -1;
}

.solution-related__grid .field__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.solution-related__grid .field__item {
  background: var(--cds-background);
  border: 1px solid var(--cds-layer-02);
  padding: 1.25rem 1.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.solution-related__grid .field__item:hover {
  border-color: var(--cds-interactive);
}

/* Row contains heading + grid — each row is a column, up to 4 across */
.solution-related__row {
  min-width: 0;
}

/* Inner becomes the grid container — up to 4 columns */
.solution-related__inner {
  max-width: 100%;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 65.999rem) {
  .solution-related__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 41.999rem) {
  .solution-related__inner { grid-template-columns: 1fr; }
}

/* Heading sits above its grid inside each column */
.solution-related__heading {
  grid-column: 1 / -1;
}

/* Grid — flex container for the pill links */
.solution-related__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Solutions: classless div wrapping each link — flatten it */
.solution-related__grid > div {
  display: contents;
}

/* Products: hide the visually-hidden label div, flatten the rest */
.solution-related__grid--products > div {
  display: contents;
}
.solution-related__grid--products .visually-hidden {
  display: none;
}
.solution-related__grid--products > div > div {
  display: contents;
}
.solution-related__grid--products > div > div > div {
  display: contents;
}

.solution-related__grid a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cds-interactive);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--cds-interactive);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.solution-related__grid a:hover {
  background: var(--cds-interactive);
  color: #ffffff;
}

/* ==========================================================================
   Job Posting — IBM-style layout
   node--job-posting--full.html.twig
   ========================================================================== */

/* ── HEADER BAND ── */
.job-posting__header {
  background: #e8f1ff;
  padding: 2.5rem 0 2rem;
}
.job-posting__header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.job-posting__back {
  display: inline-block;
  color: var(--cds-interactive);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.job-posting__back:hover {
  text-decoration: underline;
  color: var(--cds-interactive-hover);
}
.job-posting__title {
  font-size: 2rem;
  font-weight: 300;
  color: var(--twi-navy);
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.job-posting__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin-bottom: 1.5rem;
  color: var(--cds-text-secondary);
  font-size: 0.875rem;
}
.job-posting__meta-item .field,
.job-posting__meta-item .field__item {
  display: inline;
}
.job-posting__meta-row .field__label { display: none; }

/* ── APPLY BUTTON ── */
.job-posting__apply-btn {
  display: inline-block;
  background: var(--cds-interactive);
  color: var(--cds-text-on-color) !important;
  padding: 0.875rem 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--cds-font-sans);
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background var(--cds-duration-fast-02) var(--cds-ease-standard);
  letter-spacing: 0.01em;
}
.job-posting__apply-btn:hover {
  background: var(--cds-interactive-hover);
  color: var(--cds-text-on-color) !important;
  text-decoration: none !important;
}

/* ── BODY LAYOUT ── */
.job-posting__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start;
}

/* ── LEFT CONTENT ── */
.job-posting__content {
  min-width: 0;
}
.job-posting__section {
  margin-bottom: 2.5rem;
}
.job-posting__section-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cds-border-subtle);
}
.job-posting__section-body,
.job-posting__section-body p,
.job-posting__section-body li {
  color: var(--cds-text-secondary);
  line-height: 1.75;
  font-size: 0.9375rem;
}
.job-posting__section-body .field__label { display: none; }
.job-posting__apply-bottom {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cds-border-subtle);
}
.job-posting__eeo {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}

/* ── RIGHT SIDEBAR ── */
.job-posting__sidebar {
  background: var(--cds-layer-01);
  padding: 1.5rem;
  position: sticky;
  top: calc(var(--cds-header-height) + 1rem);
}
.job-posting__sidebar-item {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--cds-border-subtle);
}
.job-posting__sidebar-item:first-child { padding-top: 0; }
.job-posting__sidebar-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.job-posting__sidebar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
.job-posting__sidebar-value {
  font-size: 0.9375rem;
  color: var(--cds-text-primary);
}
.job-posting__sidebar-value .field,
.job-posting__sidebar-value .field__item { display: inline; }
.job-posting__sidebar-value .field__label { display: none; }

/* Status badge */
.job-posting__status {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.job-posting__status--open  { background: #defbe6; color: #0e6027; }
.job-posting__status--closed { background: #fff1f1; color: #a2191f; }
.job-posting__status--filled { background: var(--cds-layer-01); color: var(--cds-text-secondary); }

/* ── JOB LISTINGS BOARD ── */
.job-listings {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 0rem 0rem;
}
.job-listings__header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--cds-interactive);
}
.job-listings__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  color: var(--twi-navy);
  margin-bottom: 0.75rem;
}
.job-listings__intro {
  font-size: 1rem;
  color: var(--cds-text-secondary);
  max-width: 700px;
  line-height: 1.6;
}
.job-listings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.job-listings__empty {
  padding: 3rem 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
}

/* ── JOB LISTING CARD (teaser) ── */
.node--job-posting--teaser {
  background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle);
  border-top: 3px solid var(--cds-interactive);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow var(--cds-duration-fast-02) var(--cds-ease-standard),
              border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.node--job-posting--teaser:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-color: var(--cds-interactive);
}
.node--job-posting--teaser .node__title {
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}
.node--job-posting--teaser .node__title a {
  color: var(--cds-text-primary);
  text-decoration: none;
}
.node--job-posting--teaser .node__title a:hover {
  color: var(--cds-interactive);
}
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}
.job-card__meta .field,
.job-card__meta .field__item { display: inline; }
.job-card__meta .field__label { display: none; }
.job-card__apply {
  margin-top: auto;
  padding-top: 1rem;
}
.job-card__apply a {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cds-interactive);
  text-decoration: none;
  border-bottom: 1px solid var(--cds-interactive);
  padding-bottom: 0.125rem;
  transition: color var(--cds-duration-fast-02), border-color var(--cds-duration-fast-02);
}
.job-card__apply a:hover {
  color: var(--cds-interactive-hover);
  border-color: var(--cds-interactive-hover);
  text-decoration: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .job-posting__body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .job-posting__sidebar {
    order: -1;
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .job-listings__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .job-posting__title { font-size: 1.5rem; }
  .job-posting__sidebar { grid-template-columns: 1fr; }
  .job-posting__apply-btn { display: block; text-align: center; }
}


/* ==========================================================================
   Job Posting — Apply button styling & page title suppression
   ========================================================================== */

/* Hide the default Drupal page title block on job postings
   Confirmed block ID: block-carbonibm-page-title */
body.node--type-job-posting #block-carbonibm-page-title { display: none; }

/* Style the rendered field_apply_now link as an IBM-style button */
.job-posting__apply-btn-wrap a {
  display: inline-block;
  background: var(--cds-interactive);
  color: var(--cds-text-on-color) !important;
  padding: 0.875rem 2.5rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--cds-font-sans);
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background var(--cds-duration-fast-02) var(--cds-ease-standard);
  letter-spacing: 0.01em;
}
.job-posting__apply-btn-wrap a:hover {
  background: var(--cds-interactive-hover);
  color: var(--cds-text-on-color) !important;
  text-decoration: none !important;
}
.job-posting__apply-btn-wrap .field__label { display: none; }

/* ==========================================================================
   Webform — Managed file upload area & Remove button
   ========================================================================== */

/* Layout the file upload area cleanly */
.js-form-managed-file,
.form-managed-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.js-form-managed-file .file,
.form-managed-file .file {
  font-size: 0.875rem;
  color: var(--cds-interactive);
}

.js-form-managed-file .file a,
.form-managed-file .file a {
  color: var(--cds-interactive);
  text-decoration: none;
}

.js-form-managed-file .file a:hover,
.form-managed-file .file a:hover {
  text-decoration: underline;
}

/* File size text */
.js-form-managed-file span:not(.file),
.form-managed-file span:not(.file) {
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}

/* Remove button — secondary outlined style, NOT navy */
.js-form-managed-file input.button,
.form-managed-file input.button {
  background: transparent !important;
  color: var(--cds-text-secondary) !important;
  border: 1px solid var(--cds-border-strong) !important;
  padding: 0.375rem 0.875rem !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  font-family: var(--cds-font-sans) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background var(--cds-duration-fast-02), color var(--cds-duration-fast-02) !important;
}
.js-form-managed-file input.button:hover,
.form-managed-file input.button:hover {
  background: var(--cds-background-hover) !important;
  color: var(--cds-text-primary) !important;
  border-color: var(--cds-border-strong) !important;
}

/* ==========================================================================
   Webform — Button corrections scoped to .twi-form-page__form-wrapper
   ========================================================================== */

/* Submit button — IBM blue, not navy */
.twi-form-page__form-wrapper .webform-button--submit,
.twi-form-page__form-wrapper .button--primary {
  background: var(--cds-interactive) !important;
  color: var(--cds-text-on-color) !important;
  border: none !important;
}
.twi-form-page__form-wrapper .webform-button--submit:hover,
.twi-form-page__form-wrapper .button--primary:hover {
  background: var(--cds-interactive-hover) !important;
  color: var(--cds-text-on-color) !important;
}

/* Remove button — neutral secondary, clearly not a primary action */
.twi-form-page__form-wrapper .js-form-managed-file input[type="submit"],
.twi-form-page__form-wrapper .form-managed-file input[type="submit"] {
  background: transparent !important;
  color: var(--cds-text-secondary) !important;
  border: 1px solid var(--cds-border-strong) !important;
  padding: 0.375rem 0.875rem !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}
.twi-form-page__form-wrapper .js-form-managed-file input[type="submit"]:hover,
.twi-form-page__form-wrapper .form-managed-file input[type="submit"]:hover {
  background: var(--cds-background-hover) !important;
  color: var(--cds-text-primary) !important;
}

/* File upload area layout */
.twi-form-page__form-wrapper .js-form-managed-file,
.twi-form-page__form-wrapper .form-managed-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ==========================================================================
   Job Posting — Hide default page title block
   Body class confirmed: node-type-job_posting (underscores, no double dash)
   Block ID confirmed: block-carbonibm-page-title
   ========================================================================== */
body.node-type-job_posting #block-carbonibm-page-title {
  display: none !important;
}

/* ==========================================================================
   Careers / Job Listings Board
   View: job_postings — /careers/jobs
   ========================================================================== */

/* ── HEADER BAND ── */
.job-listings__header {
  background: #e8f1ff;
  padding: 2.5rem 0 2rem;
  margin-bottom: 0;
}
.job-listings__header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.job-listings__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--twi-navy);
  margin-bottom: 0.5rem;
}
.job-listings__intro {
  font-size: 0.9375rem;
  color: var(--cds-text-secondary);
  max-width: 700px;
  line-height: 1.6;
}

/* ── MAIN LAYOUT — sidebar + content ── */
.job-listings__main {
  padding: 2.5rem 0 4rem;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: start;
}

/* ── LEFT FILTERS SIDEBAR ── */
.job-listings__filters {
  position: sticky;
  top: calc(var(--cds-header-height) + 1rem);
}
.job-listings__filters-inner {
  background: var(--cds-layer-01);
  padding: 1.5rem;
}
.job-listings__filters-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cds-interactive);
}

/* Exposed filter form elements */
.job-listings__filters-inner .views-exposed-form .form-item {
  margin-bottom: 1.25rem;
}
.job-listings__filters-inner label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.375rem;
}
.job-listings__filters-inner input[type="text"],
.job-listings__filters-inner input[type="search"],
.job-listings__filters-inner select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  background: var(--cds-background);
  border: 1px solid var(--cds-border-strong);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.job-listings__filters-inner input[type="text"]:focus,
.job-listings__filters-inner select:focus {
  outline: 2px solid var(--cds-interactive);
  outline-offset: 0;
}
.job-listings__filters-inner .form-actions input[type="submit"] {
  width: 100%;
  background: var(--cds-interactive) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  font-family: var(--cds-font-sans) !important;
  cursor: pointer;
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
  transition: background var(--cds-duration-fast-02);
}
.job-listings__filters-inner .form-actions input[type="submit"]:hover {
  background: var(--cds-interactive-hover) !important;
}

/* ── JOB CARDS GRID ── */
.job-listings__results-title {
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
  margin-bottom: 1.25rem;
  font-weight: 400;
}
.job-listings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.job-listings__empty {
  padding: 3rem 0;
  color: var(--cds-text-secondary);
  font-size: 1rem;
}

/* ── JOB CARD ── */
.job-card {
  background: var(--cds-background);
  border: 1px solid var(--cds-border-subtle);
  border-top: 3px solid var(--cds-interactive);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow var(--cds-duration-fast-02) var(--cds-ease-standard);
  height: 100%;
}
.job-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.job-card__category {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.job-card__title {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--cds-text-primary);
  line-height: 1.3;
  margin: 0;
}
.job-card__title a {
  color: var(--cds-text-primary);
  text-decoration: none;
}
.job-card__title a:hover {
  color: var(--cds-interactive);
  text-decoration: none;
}
.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.job-card__tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.625rem;
  font-weight: 500;
}
.job-card__tag--experience {
  background: #e8f1ff;
  color: var(--cds-interactive);
}
.job-card__tag--type {
  background: var(--cds-layer-01);
  color: var(--cds-text-secondary);
}
.job-card__details {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: auto;
}
.job-card__detail {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--cds-text-secondary);
}
.job-card__detail svg {
  fill: var(--cds-text-secondary);
  flex-shrink: 0;
}
.job-card__action {
  padding-top: 0.75rem;
  border-top: 1px solid var(--cds-border-subtle);
  margin-top: 0.5rem;
}
.job-card__action a {
  font-size: 0.875rem;
  color: var(--cds-interactive);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.job-card__action a::after {
  content: ' ❯';
}
.job-card__action a:hover {
  text-decoration: underline;
}

/* Hide default page title on careers/jobs view page */
body.path-careers-jobs #block-carbonibm-page-title { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .job-listings__main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .job-listings__filters {
    position: static;
  }
  .job-listings__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1100px) {
  .job-listings__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hide default page title on job postings view page */
.path-careers-jobs #block-carbonibm-page-title { display: none !important; }

/* Hide page title on Job Postings view — template renders its own header band */
.path-careers-jobs #block-carbonibm-page-title,
.view-id-job_postings ~ #block-carbonibm-page-title,
#block-carbonibm-page-title:has(+ * .job-listings) { display: none !important; }

/* Hide page title when job listings view is on the page */
body:has(.job-listings) #block-carbonibm-page-title { display: none !important; }

/* ==========================================================================
   Case Study — Detail Page
   ========================================================================== */

/* Hero Banner */
.cs-hero {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.cs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cs-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

/* Light gradient overlay — white left side fading to transparent */
.cs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(244, 244, 244, 0.97) 0%,
    rgba(244, 244, 244, 0.75) 40%,
    rgba(244, 244, 244, 0.0) 75%
  );
}

.cs-hero__content {
  position: relative;
  z-index: 2;
  max-width: 52%;
  padding: 4rem 3rem 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.cs-hero__back {
  display: inline-block;
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cds-interactive);
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}

.cs-hero__back:hover {
  text-decoration: underline;
}

.cs-hero__client {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  margin: 0;
}

.cs-hero__title {
  font-family: var(--cds-font-sans);
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--cds-text-primary);
  margin: 0;
}

.cs-hero__subtitle {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cds-text-secondary);
  margin: 0;
  max-width: 480px;
}

/* Strip Drupal wrappers inside hero fields */
.cs-hero__content .field,
.cs-hero__content > div > div {
  display: contents;
}

/* Customer band — sits between hero and body */
.cs-customer {
  background-color: #000000;
  padding: 1.25rem 1rem;
}

.cs-customer__inner {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cs-customer__label {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a8a8a8;
  flex-shrink: 0;
}

.cs-customer__name {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Strip classless Drupal wrapper in customer name */
.cs-customer__name > div {
  display: contents;
}

/* Hide default Drupal page title on case study detail pages */
body.node-type-case_study #block-carbonibm-page-title { display: none !important; }

/* Body Section */
.cs-body {
  padding: 3rem 1rem;
}

.cs-body__inner {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}

.cs-body__main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Sidebar — More Case Studies */
.cs-body__sidebar {
  position: sticky;
  top: 5rem;
}

.cs-sidebar__heading {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cds-interactive);
}

/* Sidebar case study items — minimal list style */
.cs-body__sidebar .cs-card {
  border-top: none;
  border-bottom: 1px solid var(--cds-border-subtle);
  background: transparent;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.cs-body__sidebar .cs-card__image {
  aspect-ratio: 16 / 7;
  margin-bottom: 0.75rem;
}

.cs-body__sidebar .cs-card__body {
  padding: 0;
  gap: 0.375rem;
}

.cs-body__sidebar .cs-card__industry {
  font-size: 0.6875rem;
}

.cs-body__sidebar .cs-card__client {
  font-size: 0.875rem;
}

.cs-body__sidebar .cs-card__title {
  font-size: 0.9375rem;
}

.cs-body__sidebar .cs-card__summary {
  display: none;
}

.cs-body__sidebar .cs-card__action {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

.cs-body__sidebar .case-studies-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .cs-body__inner {
    grid-template-columns: 1fr;
  }
  .cs-body__sidebar {
    position: static;
  }
}

.cs-body__summary {
  font-family: var(--cds-font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--cds-text-primary);
  max-width: 72ch;
}

/* Meta row — Industry + TWI Solution */
.cs-body__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cds-border-subtle);
}

.cs-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cs-meta__label {
  font-family: var(--cds-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
}

.cs-meta__value {
  font-family: var(--cds-font-sans);
  font-size: 0.9375rem;
  color: var(--cds-text-primary);
}

.cs-meta__value a {
  color: var(--cds-interactive);
  text-decoration: none;
}

.cs-meta__value a:hover {
  text-decoration: underline;
}

/* Strip classless Drupal wrappers in meta values */
.cs-meta__value > div,
.cs-meta__value > div > div {
  display: contents;
}

/* ==========================================================================
   Case Studies — Listing Page
   ========================================================================== */

/* Page Header Band */
.case-studies-header {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--cds-border-subtle);
  padding: 4rem 1rem 3.5rem;
  background-image: url('../images/csbg.png');
  background-size: cover;
  background-position: center right;
}

.case-studies-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(244, 244, 244, 0.97) 0%,
    rgba(244, 244, 244, 0.75) 40%,
    rgba(244, 244, 244, 0.0) 75%
  );
  z-index: 0;
}

.case-studies-header__inner {
  position: relative;
  z-index: 1;
}



.case-studies-header__title {
  font-family: var(--cds-font-sans);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--cds-text-primary);
  margin: 0 0 0.75rem;
}

.case-studies-header__subtitle {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cds-text-secondary);
  margin: 0;
  max-width: 60ch;
}

/* Layout: sidebar + main */
.case-studies-layout {
  max-width: var(--cds-max-width);
  margin-inline: auto;
  padding: 2.5rem 0;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
}

.case-studies-layout__main {
  padding-top: 1.90rem;
}

/* Sidebar */
.case-studies-layout__sidebar {
  position: sticky;
  top: 4rem;
}

.case-studies-filters__heading {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cds-interactive);
}

/* Carbon-style exposed filter selects */
.case-studies-filters .views-exposed-form .js-form-type-select {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.case-studies-filters .views-exposed-form label {
  font-family: var(--cds-font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
}

.case-studies-filters .views-exposed-form select {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  background-color: var(--cds-layer-01);
  border: none;
  border-bottom: 2px solid var(--cds-text-secondary);
  border-radius: 0;
  padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23525252' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

.case-studies-filters .views-exposed-form select:focus {
  outline: 2px solid var(--cds-interactive);
  outline-offset: 0;
}

.case-studies-filters .views-exposed-form .form-actions {
  margin-top: 0.5rem;
}

.case-studies-filters .views-exposed-form .form-submit {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  background-color: var(--cds-interactive);
  color: #ffffff;
  border: none;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.case-studies-filters .views-exposed-form .form-submit:hover {
  background-color: var(--cds-interactive-hover, #0043ce);
}

/* Card Grid */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* Case Study Card */
.cs-card {
  background: var(--cds-layer-01);
  border-top: 3px solid var(--cds-interactive);
  display: flex;
  flex-direction: column;
}

.cs-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.cs-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.cs-card:hover .cs-card__image img {
  transform: scale(1.03);
}

.cs-card__body {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}

.cs-card__industry {
  font-family: var(--cds-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
}

.cs-card__industry a {
  color: inherit;
  text-decoration: none;
}

.cs-card__client {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  margin: 0;
}

.cs-card__title {
  font-family: var(--cds-font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cds-text-primary);
  margin: 0;
}

.cs-card__title a {
  color: inherit;
  text-decoration: none;
}

.cs-card__title a:hover {
  color: var(--cds-interactive);
}

.cs-card__summary {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.cs-card__action {
  padding-top: 0.75rem;
  border-top: 1px solid var(--cds-border-subtle);
  margin-top: 0.5rem;
}

.cs-card__action a {
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cds-interactive);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cs-card__action a::after {
  content: ' ❯';
}

.cs-card__action a:hover {
  text-decoration: underline;
}

/* Empty state */
.case-studies-empty {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  color: var(--cds-text-secondary);
  padding: 3rem 0;
}

/* Hide default Drupal page title on case studies listing */
body:has(.case-studies-page) #block-carbonibm-page-title { display: none !important; }

/* ==========================================================================
   Case Studies — Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .case-studies-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .case-studies-layout__sidebar {
    position: static;
  }
  .case-studies-filters .views-exposed-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
  }
  .case-studies-filters .views-exposed-form .js-form-type-select {
    flex: 1 1 180px;
    margin-bottom: 0;
  }
  .case-studies-filters .views-exposed-form .form-actions {
    flex: 0 0 auto;
    margin-top: 0;
    align-self: flex-end;
  }
  .case-studies-filters .views-exposed-form .form-submit {
    width: auto;
    padding: 0.625rem 1.5rem;
  }
}

@media (max-width: 600px) {
  .cs-hero__content {
    max-width: 100%;
    padding: 2.5rem 1rem;
  }
  .case-studies-grid {
    grid-template-columns: 1fr;
  }

  /* On mobile — remove background images, use solid grey for readability */
  .cs-hero {
    background-color: var(--cds-layer-01);
  }
  .cs-hero__bg {
    display: none;
  }
  .cs-hero__overlay {
    display: none;
  }
  .case-studies-header {
    background-image: none;
    background-color: var(--cds-layer-01);
  }
  .case-studies-header::before {
    display: none;
  }
}

/* ==========================================================================
   Solution node — Documents & Resources sidebar
   Inherits cs-body, cs-body__inner, cs-body__sidebar, cs-sidebar__heading
   from case study styles above. Only solution-specific rules below.
   ========================================================================== */

/* When no sidebar is present, main content fills full width */
.solution-body__main:only-child {
  grid-column: 1 / -1;
}

/* Document link rows */
.solution-docs__section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Divider between uploaded files and external links */
.solution-docs__section--divided {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cds-border-subtle);
}

.solution-doc__link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--cds-text-primary);
  text-decoration: none;
  font-family: var(--cds-font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.5rem;
  border-radius: 2px;
  transition: background-color var(--cds-duration-fast-02) var(--cds-ease-standard),
              color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.solution-doc__link:hover {
  background-color: var(--cds-background-hover);
  color: var(--cds-interactive);
  text-decoration: none;
}

.solution-doc__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--cds-interactive);
}

.solution-doc__label {
  word-break: break-word;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* ── reCAPTCHA / CAPTCHA wrapper ── */
.captcha {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 1rem 0 !important;
  box-shadow: none !important;
}

.captcha__title,
.captcha > summary,
legend.captcha {
  display: none !important;
}

.captcha .g-recaptcha {
  display: inline-block;
}