HEADER CSS CREW

/* ============================================================
   Global Header — restylé pour le design system Crew/Studio.
   Mêmes sélecteurs, même structure, même JS : seul l'habillage
   visuel change (couleurs, typo, rayons, ombres). La mécanique
   de mise en page (position, flex, tailles) reste identique.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

header.header-module {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  font-family: 'Hanken Grotesk', sans-serif;
}

header.header-module .mobile-bar {
  display: none;
}
header.header-module .main-bar {
  background-color: #F9F6EE;
  border-bottom: 1.5px solid #191713;
  padding: 1.25rem 0;
}
header.header-module .main-bar .container {
  max-width: calc(1280px + 9rem);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}
header.header-module .main-bar .container .logo-link {
  width: 4.75rem;
  height: auto;
  aspect-ratio: 75/45;
  margin-right: auto;
}
header.header-module .main-bar .container .logo-link .logo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
header.header-module .main-bar .container .logo-link .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center left;
}
header.header-module .main-bar .container .items {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
  margin-right: 1rem;
}
header.header-module .main-bar .container .items .item {
  color: #57544C;
  text-decoration: none;
  font-weight: 600;
  transition: color 300ms;
}
header.header-module .main-bar .container .items .item.link:hover {
  color: #191713;
}
header.header-module .main-bar .container .items .item.menu {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}
header.header-module .main-bar .container .items .item.menu.active {
  color: #191713;
}
header.header-module .main-bar .container .items .item.menu.active::after {
  transform: rotateX(180deg);
}
header.header-module .main-bar .container .items .item.menu::after {
  content: "";
  width: 8px;
  height: 5px;
  mask-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.32471 1L4.32471 4L7.32471 1' stroke='%23333747' stroke-width='1.25'/%3E%3C/svg%3E%0A");
  mask-position: 50%;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #57544C;
  transition: transform 300ms, background-color 300ms;
}
header.header-module .main-bar .container .items .item.menu:hover::after,
header.header-module .main-bar .container .items .item.menu.active::after {
  background-color: #191713;
}
header.header-module .main-bar .container .search-toggle {
  position: relative;
}
header.header-module .main-bar .container .search-toggle svg {
  cursor: pointer;
}
header.header-module .main-bar .container .search-toggle svg path {
  stroke: #57544C;
}
header.header-module .main-bar .container .search-toggle .hs-search-field {
  position: absolute;
  top: 100%;
  right: 0;
  padding: 0.5rem;
  background-color: #FFFEF9;
  border: 1.5px solid #191713;
  border-radius: 5px;
  box-shadow: 5px 5px 0 rgba(25,23,19,0.08);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: translateY(-2rem);
  transition: transform 300ms, opacity 300ms, z-index 0ms 300ms;
}
header.header-module .main-bar .container .search-toggle .hs-search-field.active {
  opacity: 1;
  pointer-events: all;
  z-index: 1;
  transform: translateY(0);
  transition: transform 300ms, opacity 300ms, z-index 0ms 0ms;
}
header.header-module .main-bar .container .search-toggle .hs-search-field form {
  position: relative;
}
header.header-module .main-bar .container .search-toggle .hs-search-field form input {
  width: 20rem;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 1rem;
  padding: 0.5rem;
  padding-left: 2.5rem;
  border-radius: 4px;
  border: 1px solid #E0DACA;
  background: #FFFEF9;
  color: #191713;
}
header.header-module .main-bar .container .search-toggle .hs-search-field form input::placeholder {
  color: #94907F;
}
header.header-module .main-bar .container .search-toggle .hs-search-field form button {
  width: fit-content;
  height: fit-content;
  line-height: 0;
  padding: unset;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  cursor: pointer;
}
header.header-module .main-bar .container .search-toggle .hs-search-field form button svg path {
  stroke: #57544C;
}
header.header-module .main-bar .container .lang-switcher {
  height: fit-content;
  background-color: #F6F2E7;
  border: 1px solid #E0DACA;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  position: relative;
  padding: 1rem;
}
header.header-module .main-bar .container .lang-switcher.hidden-switcher {
  display: none;
}
header.header-module .main-bar .container .lang-switcher.active::after {
  transform: rotateX(180deg);
}
header.header-module .main-bar .container .lang-switcher.active > span {
  opacity: 1;
  pointer-events: all;
  z-index: 1;
  transition: opacity 300ms, z-index 0ms 0ms;
}
header.header-module .main-bar .container .lang-switcher::before {
  content: attr(data-lang);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #57544C;
}
header.header-module .main-bar .container .lang-switcher::after {
  content: "";
  width: 9px;
  height: 8px;
  mask-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.32471 1L4.32471 4L7.32471 1' stroke='%23333747' stroke-width='1.25'/%3E%3C/svg%3E%0A");
  mask-position: 50%;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #57544C;
  flex-shrink: 0;
  z-index: 2;
  transition: transform 300ms;
}
header.header-module .main-bar .container .lang-switcher > span {
  width: 100%;
  height: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 300ms, z-index 0ms 300ms;
}
header.header-module .main-bar .container .lang-switcher > span .lang_switcher_class {
  width: 100%;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class {
  width: 100%;
  height: fit-content;
  background: unset;
  cursor: default;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class {
  display: block;
  border-radius: 4px;
  padding: 1rem;
  background-color: #FFFEF9;
  border: 1.5px solid #191713;
  box-shadow: 5px 5px 0 rgba(25,23,19,0.08);
  transform: unset;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class::before,
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class::after {
  content: unset;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class li {
  width: fit-content;
  border: unset;
  padding: unset;
  background-color: unset;
  text-align: left;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class li + li {
  margin-top: 0.5rem;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class li:hover a {
  color: #1E9B94;
}
header.header-module .main-bar .container .lang-switcher > span .globe_class .lang_list_class li a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: #191713;
  text-transform: uppercase;
  transition: color 300ms;
}
header.header-module .main-bar .container .ctas {
  gap: 1rem;
}
/* CTA buttons rendered inside the header — scoped override, does not
   touch the site's global .btn system used elsewhere on pages. */
header.header-module .ctas .btn,
header.header-module .menus-bar .btn {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  border-radius: 3px;
}
header.header-module .ctas .btn.primary {
  background-color: #191713;
  border-color: #191713;
  color: #F9F6EE;
}
header.header-module .ctas .btn.primary:hover {
  background-color: #000;
}
header.header-module .ctas .btn.secondary {
  background-color: transparent;
  border: 1.5px solid #191713;
  color: #191713;
}
header.header-module .ctas .btn.secondary:hover {
  background-color: #F6F2E7;
}

header.header-module .menus-bar {
  position: relative;
}
header.header-module .menus-bar .menu {
  position: absolute;
  top: 0;
  padding-top: 0.75rem;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -2rem);
  transition: transform 300ms, opacity 300ms, z-index 0ms 300ms;
}
header.header-module .menus-bar .menu.active {
  opacity: 1;
  pointer-events: all;
  z-index: 1;
  transform: translate(-50%, 0);
  transition: transform 300ms, opacity 300ms, z-index 0ms 0ms;
}
header.header-module .menus-bar .menu .inner-menu {
  background-color: #FFFEF9;
  border: 1.5px solid #191713;
  border-radius: 9px;
  box-shadow: 10px 12px 0 rgba(25,23,19,0.08);
  padding: 2rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
header.header-module .menus-bar .menu .items .item {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: #191713;
  position: relative;
  z-index: 1;
}
header.header-module .menus-bar .menu .items .item:hover::before {
  width: 100%;
}
header.header-module .menus-bar .menu .items .item::before {
  content: "";
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 4px;
  background-color: rgba(30,155,148,0.10);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 300ms;
}
header.header-module .menus-bar .menu .items .item .icon {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
header.header-module .menus-bar .menu .items .item .icon img {
  margin-top: 0.375rem;
  margin-left: 0.375rem;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}
header.header-module .menus-bar .menu .main-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
}
header.header-module .menus-bar .menu .main-blocks .columns {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}
header.header-module .menus-bar .menu .main-blocks .columns.single-column .column {
  width: 29.5rem;
}
header.header-module .menus-bar .menu .main-blocks .columns.single-column .column .items {
  flex-direction: row;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
header.header-module .menus-bar .menu .main-blocks .columns.single-column .column .items .item {
  width: calc(50% - 0.75rem);
}
header.header-module .menus-bar .menu .main-blocks .columns .column {
  width: 14rem;
}
header.header-module .menus-bar .menu .main-blocks .columns .column.accent-blue .items .item::before {
  background-color: rgba(30,155,148,0.10);
}
header.header-module .menus-bar .menu .main-blocks .columns .column.accent-yellow .items .item::before {
  background-color: rgba(254,206,1,0.18);
}
header.header-module .menus-bar .menu .main-blocks .columns .column.accent-white-gradient {
  width: 29.5rem;
  background: linear-gradient(158deg, rgba(30,155,148,0.16), rgba(254,206,1,0.16));
  border: 1.5px solid #191713;
  padding: 1.5rem;
  border-radius: 9px;
}
header.header-module .menus-bar .menu .main-blocks .columns .column .title {
  margin-bottom: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #94907F;
  text-transform: uppercase;
}
header.header-module .menus-bar .menu .main-blocks .columns .column .items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
header.header-module .menus-bar .menu .main-blocks > .btn {
  width: 100%;
}
header.header-module .menus-bar .menu .main-blocks > .btn.primary.white {
  background: unset;
  background-color: #F6F2E7;
  color: #191713;
}
header.header-module .menus-bar .menu .main-blocks > .btn.primary.white::before {
  content: unset;
}
header.header-module .menus-bar .menu .main-blocks > .btn.flex-btn {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}
header.header-module .menus-bar .menu .main-blocks > .btn.flex-btn .icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
}
header.header-module .menus-bar .menu .main-blocks > .btn.flex-btn .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
header.header-module .menus-bar .menu .main-blocks > .btn span {
  display: block;
  width: 100%;
  text-align: left;
}
header.header-module .menus-bar .menu .main-blocks .bottom-column {
  background: linear-gradient(158deg, rgba(30,155,148,0.16), rgba(254,206,1,0.16));
  border: 1.5px solid #191713;
  padding: 1rem;
  border-radius: 9px;
}
header.header-module .menus-bar .menu .main-blocks .bottom-column .title {
  margin-bottom: 1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #57544C;
  text-transform: uppercase;
}
header.header-module .menus-bar .menu .main-blocks .bottom-column .items {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
header.header-module .menus-bar .menu .main-blocks .bottom-column .items .item {
  width: 100%;
}
header.header-module .menus-bar .menu .cta-card {
  width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
header.header-module .menus-bar .menu .cta-card .image {
  width: 100%;
  height: auto;
  aspect-ratio: 263/166;
  overflow: hidden;
  border-radius: 4px;
  border: 1.5px solid #191713;
}
header.header-module .menus-bar .menu .cta-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header.header-module .menus-bar .menu .cta-card .title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  color: #191713;
}
header.header-module .menus-bar .menu .cta-card .btn {
  width: 100%;
}
header.header-module .menus-bar .menu .cta-card .btn span {
  display: block;
  width: 100%;
  text-align: left;
}
@media all and (max-width: 1200px) {
  header.header-module {
    pointer-events: none;
  }
  header.header-module.active .mobile-bar .container .burger-menu div.b-top {
    transform: rotate(45deg);
  }
  header.header-module.active .mobile-bar .container .burger-menu div.b-mid {
    opacity: 0;
    transform: scaleX(0.5);
  }
  header.header-module.active .mobile-bar .container .burger-menu div.b-bot {
    transform: rotate(-45deg);
  }
  header.header-module.active .main-bar {
    opacity: 1;
    pointer-events: all;
    z-index: 1;
    transform: translateX(0);
    transition: transform 300ms, opacity 300ms, z-index 0ms 0ms;
  }
  header.header-module .mobile-bar {
    display: block;
    background-color: #F9F6EE;
    border-bottom: 1.5px solid #191713;
    pointer-events: all;
  }
  header.header-module .mobile-bar.active .container .go-back {
    opacity: 1;
    pointer-events: all;
    transition: opacity 300ms;
  }
  header.header-module .mobile-bar.active .container .logo-link {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  header.header-module .mobile-bar .container {
    padding: 0 1.5rem;
    height: 3.75rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  header.header-module .mobile-bar .container .go-back {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    color: #57544C;
    font-family: 'Hanken Grotesk', sans-serif;
    opacity: 0;
    pointer-events: none;
    text-decoration: underline;
    transition: opacity 300ms;
  }
  header.header-module .mobile-bar .container .go-back::before {
    content: "";
    width: 7px;
    height: 10px;
    mask-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0.633179L2 4.63318L6 8.63318' stroke='%23333747' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    mask-position: 50%;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #191713;
  }
  header.header-module .mobile-bar .container .logo-link {
    width: 4.75rem;
    height: auto;
    aspect-ratio: 75/45;
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translate(0, -50%);
    transition: transform 300ms, left 300ms;
  }
  header.header-module .mobile-bar .container .logo-link .logo {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  header.header-module .mobile-bar .container .logo-link .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center left;
  }
  header.header-module .mobile-bar .container .burger-menu {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: relative;
  }
  header.header-module .mobile-bar .container .burger-menu div {
    width: 30px;
    height: 2px;
    background-color: #191713;
    position: absolute;
    top: calc(50% - 1px);
    left: 5px;
    transition: opacity 300ms, transform 300ms;
  }
  header.header-module .mobile-bar .container .burger-menu div.b-top {
    transform: translateY(-8px);
  }
  header.header-module .mobile-bar .container .burger-menu div.b-bot {
    transform: translateY(8px);
  }
  header.header-module .main-bar {
    background: linear-gradient(162.15deg, transparent 18.17%, rgba(30,155,148,0.14) 181.9%), linear-gradient(0deg, #F6F2E7, #F6F2E7);
    padding: 1.5rem 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transform: translateX(100%);
    transition: transform 300ms, opacity 300ms, z-index 0ms 300ms;
  }
  header.header-module .main-bar .container {
    height: calc(100dvh - 6.75rem);
    padding: 0 1.5rem;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  header.header-module .main-bar .container .logo-link {
    display: none;
  }
  header.header-module .main-bar .container .items {
    order: 2;
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: auto;
  }
  header.header-module .main-bar .container .items .item {
    width: 100%;
    padding: 0.75rem;
    border-radius: 4px;
    background-color: #FFFEF9;
    border: 1px solid #E0DACA;
  }
  header.header-module .main-bar .container .items .item.menu {
    justify-content: space-between;
  }
  header.header-module .main-bar .container .items .item.menu.active::after {
    transform: unset;
  }
  header.header-module .main-bar .container .items .item.menu::after {
    width: 7px;
    height: 10px;
    mask-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='%23404040' stroke-width='1.5'/%3E%3C/svg%3E%0A");
  }
  header.header-module .main-bar .container .search-toggle {
    order: 1;
    width: 100%;
  }
  header.header-module .main-bar .container .search-toggle > svg {
    display: none;
  }
  header.header-module .main-bar .container .search-toggle .hs-search-field {
    position: relative;
    top: unset;
    right: unset;
    padding: unset;
    background-color: unset;
    border: none;
    box-shadow: none;
    border-radius: unset;
    opacity: 1;
    pointer-events: all;
    z-index: 1;
    transform: unset;
  }
  header.header-module .main-bar .container .search-toggle .hs-search-field form input {
    width: 100%;
    background-color: #FFFEF9;
    border: 1px solid #E0DACA;
  }
  header.header-module .main-bar .container .lang-switcher {
    order: 3;
    width: 100%;
    background-color: #FFFEF9;
    justify-content: space-between;
  }
  header.header-module .main-bar .container .ctas {
    order: 4;
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
  }
  header.header-module .main-bar .container .ctas .btn {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  header.header-module .menus-bar {
    position: static;
  }
  header.header-module .menus-bar .menu {
    width: 100%;
    height: calc(100dvh - 3.75rem);
    position: absolute;
    top: 3.75rem;
    padding-top: unset;
    left: 0;
    transform: translateX(100%);
  }
  header.header-module .menus-bar .menu.active {
    transform: translateX(0);
  }
  header.header-module .menus-bar .menu .inner-menu {
    background: linear-gradient(162.15deg, transparent 18.17%, rgba(30,155,148,0.14) 181.9%), linear-gradient(0deg, #F6F2E7, #F6F2E7);
    border: none;
    border-radius: unset;
    box-shadow: unset;
    padding: 1.5rem;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
  }
  header.header-module .menus-bar .menu .items .item {
    padding-right: 1rem;
  }
  header.header-module .menus-bar .menu .items .item::after {
    content: "";
    width: 7px;
    height: 10px;
    mask-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='%23787575' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    mask-position: 50%;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #94907F;
    margin-left: auto;
  }
  header.header-module .menus-bar .menu .main-blocks {
    height: 100%;
    gap: 0.75rem;
    justify-content: flex-start;
  }
  header.header-module .menus-bar .menu .main-blocks.has-cta-card {
    height: calc(100% - 4rem);
  }
  header.header-module .menus-bar .menu .main-blocks .columns {
    flex-direction: column;
    gap: 0.75rem;
    overflow: auto;
  }
  header.header-module .menus-bar .menu .main-blocks .columns.single-column .column {
    width: 100%;
  }
  header.header-module .menus-bar .menu .main-blocks .columns.single-column .column .items {
    flex-direction: column;
    gap: 0.75rem;
  }
  header.header-module .menus-bar .menu .main-blocks .columns.single-column .column .items .item {
    width: 100%;
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    transition: height 300ms;
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column.active .title::after {
    transform: rotateX(180deg);
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column.active .items {
    opacity: 1;
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column.accent-white-gradient {
    width: 100%;
    background: unset;
    border: none;
    padding: unset;
    border-radius: unset;
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column.accent-white-gradient .title {
    background: linear-gradient(158deg, rgba(30,155,148,0.2), rgba(254,206,1,0.2));
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column .title {
    margin-bottom: 0.75rem;
    color: #191713;
    font-family: 'Hanken Grotesk', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.75rem;
    background-color: #FFFEF9;
    border: 1px solid #E0DACA;
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column .title::after {
    content: "";
    width: 10px;
    height: 7px;
    mask-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23404040' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    mask-position: 50%;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #57544C;
    transition: transform 300ms;
  }
  header.header-module .menus-bar .menu .main-blocks .columns .column .items {
    opacity: 0;
    transition: opacity 300ms;
  }
  header.header-module .menus-bar .menu .main-blocks > .btn {
    margin-top: auto;
  }
  header.header-module .menus-bar .menu .main-blocks .bottom-column {
    background: unset;
    border: none;
    padding: unset;
    border-radius: unset;
    overflow: hidden;
    transition: height 300ms;
  }
  header.header-module .menus-bar .menu .main-blocks .bottom-column.active .title::after {
    transform: rotateX(180deg);
  }
  header.header-module .menus-bar .menu .main-blocks .bottom-column.active .items {
    opacity: 1;
  }
  header.header-module .menus-bar .menu .main-blocks .bottom-column .title {
    margin-bottom: 0.75rem;
    color: #191713;
    font-family: 'Hanken Grotesk', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.75rem;
    background: linear-gradient(158deg, rgba(30,155,148,0.2), rgba(254,206,1,0.2));
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
  }
  header.header-module .menus-bar .menu .main-blocks .bottom-column .title::after {
    content: "";
    width: 10px;
    height: 7px;
    mask-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23404040' stroke-width='1.5'/%3E%3C/svg%3E%0A");
    mask-position: 50%;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #57544C;
    transition: transform 300ms;
  }
  header.header-module .menus-bar .menu .main-blocks .bottom-column .items {
    flex-direction: column;
    gap: 0.75rem;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity 300ms;
  }
  header.header-module .menus-bar .menu .cta-card {
    width: 100%;
  }
  header.header-module .menus-bar .menu .cta-card .image,
  header.header-module .menus-bar .menu .cta-card .title {
    display: none;
  }
}
/* =====================================================================
   OPTION B — refinements to match the home mega-menu (image 2).
   APPEND this at the very END of the header module.css (after your
   existing restyle). Later rules win, so this overrides what's above.
   Desktop refinements are wrapped in min-width:1201px so they never
   fight the module's mobile accordion; mobile just hides the extras.
   ===================================================================== */

/* --- Logo: toucan mark + serif "Toucan" wordmark (both bars) --- */
header.header-module .logo-link {
  text-decoration: none;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
header.header-module .logo-link .logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: auto;
  height: auto;
  overflow: visible;
}
header.header-module .logo-link .tc-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: block;
}
header.header-module .logo-link .wm {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #191713;
}

/* --- Kill the old icon-square hover highlight everywhere --- */
header.header-module .menus-bar .menu .items .item::before {
  content: none !important;
}

/* ============================ DESKTOP ============================ */
@media all and (min-width: 1201px) {

  /* Column header: eyebrow (mono) + name (serif) + description */
  header.header-module .menus-bar .menu .main-blocks .columns .column .title {
    display: flex !important;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
    font-family: 'Hanken Grotesk', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    background: none;
    padding: 0;
    border: none;
    width: auto;
  }
  header.header-module .menus-bar .menu .column .col-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #94907F;
  }
  header.header-module .menus-bar .menu .column .col-name {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #191713;
  }
  header.header-module .menus-bar .menu .column.accent-blue .col-name {
    color: #1E9B94;
  }
  header.header-module .menus-bar .menu .column .col-desc {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #57544C;
    margin-top: 0.1rem;
  }

  /* Links: title + subtitle stacked, editorial hover */
  header.header-module .menus-bar .menu .items .item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: background 140ms ease, border-color 140ms ease;
  }
  header.header-module .menus-bar .menu .items .item:hover {
    background: #F6F2E7;
    border-left-color: #1E9B94;
  }
  header.header-module .menus-bar .menu .items .item .text {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #191713;
  }
  header.header-module .menus-bar .menu .items .item .subtitle {
    font-size: 0.78rem;
    line-height: 1.3;
    color: #94907F;
  }
  header.header-module .menus-bar .menu .items .item:hover .subtitle {
    color: #57544C;
  }

  /* Column widths so subtitles breathe */
  header.header-module .menus-bar .menu .main-blocks .columns .column {
    width: 15.5rem;
  }

  /* Featured "See it live" gradient column */
  header.header-module .menus-bar .menu .main-blocks .columns .column.accent-white-gradient {
    width: 20rem;
    display: flex;
    flex-direction: column;
  }
  header.header-module .menus-bar .menu .column.accent-white-gradient .col-eyebrow {
    color: #1E9B94;
  }
  header.header-module .menus-bar .menu .column.accent-white-gradient .items {
    margin-top: auto;
  }
  header.header-module .menus-bar .menu .column.accent-white-gradient .demo-link {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0;
    border-left: none;
  }
  header.header-module .menus-bar .menu .column.accent-white-gradient .demo-link .text {
    color: #1E9B94;
    font-weight: 700;
    font-size: 0.9rem;
  }
  header.header-module .menus-bar .menu .column.accent-white-gradient .demo-link:hover {
    background: transparent;
  }
  header.header-module .menus-bar .menu .column.accent-white-gradient .demo-link:hover .text {
    text-decoration: underline;
  }
}

/* ============================ MOBILE ============================ */
@media all and (max-width: 1200px) {
  /* Keep the accordion toggle compact: hide the extras, normalize name */
  header.header-module .menus-bar .menu .column .col-eyebrow,
  header.header-module .menus-bar .menu .column .col-desc,
  header.header-module .menus-bar .menu .items .item .subtitle {
    display: none;
  }
  header.header-module .menus-bar .menu .column .col-name {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #191713;
  }
}
/* =====================================================================
   PROD FIX v2 — the legacy theme strips the header's position, dropping
   the hidden panels back into the document flow. An absolute panel in a
   NON-fixed header also extends the page scroll height (the phantom
   vertical scroll). Fix: force the header FIXED (scoped with the HubSpot
   wrapper id so it outranks the theme). Fixed = the bar stays pinned at
   the top on scroll (the sticky behaviour you want) AND its absolute
   children never add to page scroll. Only position is touched; the
   open/close animations are untouched.
   ===================================================================== */
#hs_cos_wrapper_header header.header-module {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 50 !important;
}

/* Desktop: mega-menu dropdowns overlay, out of flow */
@media all and (min-width:1201px){
  #hs_cos_wrapper_header header.header-module .menus-bar { position:relative !important; }
  #hs_cos_wrapper_header header.header-module .menus-bar .menu { position:absolute !important; }
}

/* Tablet/mobile: slide-in panel + dropdowns stay out of flow */
@media all and (max-width:1200px){
  #hs_cos_wrapper_header header.header-module .menus-bar { position:static !important; }
  #hs_cos_wrapper_header header.header-module .menus-bar .menu { position:absolute !important; }
}
/* =====================================================================
   RESOURCES MENU FIX (v2): on de-centre le panneau "Resources". Le JS
   pose le left exact en inline; ici on neutralise le translateX de
   recentrage (-50%) pour que ce left tombe juste, tout en gardant
   l'animation verticale. Non scope au wrapper HubSpot: marche en
   apercu ET en prod. Mobile intact (le script retire .anchored).
   ===================================================================== */
@media all and (min-width: 1201px) {
  header.header-module .menus-bar .menu.anchored {
    transform: translate(0, -2rem) !important;
  }
  header.header-module .menus-bar .menu.anchored.active {
    transform: translate(0, 0) !important;
  }
}