/* Extracted from the Webflow export's per-page <style> overrides so native routes share them. */

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
	pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}
/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}
/* These classes are never overwritten */
.hide {
  display: none !important;
}
/* Remove default Webflow chevron from form select */
select{
  -webkit-appearance:none;
}
@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
.margin-0 {
  margin: 0rem !important;
}
.padding-0 {
  padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
.truncate-width { 
		width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; 
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* NAVIGATION */
/* The beige (homepage-style) nav sits above <main>, so the white body
   background shows through its transparent wrapper. Give the wrapper the
   beige page color so it matches the section below. */
.main-nav_wrapper.is-beige {
  background-color: var(--_primitives---color--beige);
}
.main-nav_wrapper.is-beige .nav-menu-item_link,
.main-nav_wrapper.is-beige .nav-menu-item_dropdown > div
 {
  color: var(--_primitives---color--outer-space);
}
/* Hover: regular nav links */
.main-nav_wrapper.is-beige .nav-menu-item_link:hover {
  color: var(--_primitives---color--beige);
}
/* Hover: dropdown toggle text */
.main-nav_wrapper.is-beige .nav-menu-dropdown_toggle:hover .nav-menu-dropdown-link_text,
.main-nav_wrapper.is-beige .nav-menu-dropdown-link_text:hover {
  color: var(--_primitives---color--beige);
}
.main-nav_wrapper.is-transparent .nav-menu-dropdown_arrow,
.main-nav_wrapper.is-transparent .nav-new_icon{
color: var(--_primitives---color--beige);
}
.main-nav_wrapper.is-beige .nav-menu-dropdown_toggle .nav-menu-dropdown_arrow{
transform: rotate(0);
/*transition: transform .3s ease-in-out;*/
}
.main-nav_wrapper.is-beige .nav-menu-dropdown_toggle:hover .nav-menu-dropdown_arrow{
color: var(--_primitives---color--beige);
/*transform: rotate(180deg);*/
transition: transform .3s ease-in-out;
}
/* MEDIA QUERY FOR TRANSPARENT TABLET/MOBILE NAV */
@media (width <= 991px){
.main-nav_wrapper.is-transparent  .nav-menu-item_link,
.main-nav_wrapper.is-transparent  .nav-menu-item_dropdown > div,
.main-nav_wrapper.is-transparent .nav-menu-dropdown_toggle .nav-menu-dropdown_arrow {
  color: var(--_primitives---color--outer-space);
}
/* Hover: regular nav links */
/* Hover: dropdown text */
.main-nav_wrapper.is-transparent .nav-menu-item_link:hover,
.main-nav_wrapper.is-transparent .nav-menu-dropdown_toggle:hover .nav-menu-dropdown-link_text,
.main-nav_wrapper.is-transparent .nav-menu-dropdown_toggle:hover .nav-menu-dropdown_arrow,
.main-nav_wrapper.is-transparent .nav-menu-dropdown-link_text:hover {
  color: var(--_primitives---color--beige);
}
}
/* Smaller logo on mobile for both nav variants */
@media (width <= 991px) {
  .header-logo-img {
    max-width: 150px;
  }
  /* Native hamburger menu: Webflow's JS used to move the menu into an
     overlay; here we drop the panel straight below the navbar instead. */
  .navbar_wrapper.w-nav {
    position: relative;
  }
  .w-nav[data-collapse='medium'] .w-nav-menu.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 0.5rem;
    animation: navMenuIn 0.25s ease-out;
  }
  .w-nav-menu.is-open .nav-menu-items_container {
    padding-top: 1rem;
  }
  .w-nav-menu.is-open .nav-menu-drowdown-list.w--open {
    position: static;
    width: 100%;
    background-color: transparent;
    color: inherit;
    border-radius: 0;
  }
  .w-nav-menu.is-open .nav-dropdown-list_link,
  .w-nav-menu.is-open .nav-dropdown-list_link:hover {
    color: var(--_primitives---color--outer-space);
  }
  .w-nav-menu.is-open .nav-menu-dropdown_toggle,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle:hover,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle.w--open {
    background-color: transparent;
    color: inherit;
  }
  /* The "Initiatives" toggle label + chevron inherit Webflow's near-white
     rebrand grey (#f6f4f0), and tapping the toggle leaves a sticky :hover
     state on touch devices that recolors them beige — both vanish on the
     white mobile menu panel. Force them (and their hover state) to the
     dark outer-space color so the open dropdown header stays legible. */
  .w-nav-menu.is-open .nav-menu-dropdown_toggle .nav-menu-dropdown-link_text,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle .nav-menu-dropdown-link_text:hover,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle:hover .nav-menu-dropdown-link_text,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle .nav-menu-dropdown_arrow,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle:hover .nav-menu-dropdown_arrow,
  .w-nav-menu.is-open .nav-menu-dropdown_toggle .nav-menu-dropdown_arrow:hover {
    color: var(--_primitives---color--outer-space);
  }
}
@keyframes navMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* EVENT CARDS */
/* Fallback so event types added in admin still render a filled, legible card.
   Light blue replaces the dark-green-that-showed-through (transparent) card
   so it no longer blends into the section background. */
.event13_item {
  background-color: var(--primary-hc-light-blue);
  color: var(--_primitives---color--outer-space);
}
.event13_item .button.is-link,
.event13_item h3,
.event13_item p {
  color: inherit;
}
.event13_item:has([event-type="Workshop"]) {
  background-color: var(--secondary-pompadour);
  color: var(--primary-hc-grey-rebrand);
}
.event13_item:has([event-type="Workshop"]) .button.is-link {
  color: var(--primary-hc-grey-rebrand);
}
.event13_item:has([event-type="Panel"]) {
  background-color: var(--secondary-orange);
  color: var(--primary-hc-grey-rebrand);
}
.event13_item:has([event-type="Panel"]) .button.is-link{
  color: var(--primary-hc-grey-rebrand);
}
.event13_item:has([event-type="Conference"]) {
  background-color: #FFF4A1; /*yellow*/
}
.event13_item:has([event-type="Mixer"]) {
  background-color: #FFF4A1;
}
/*HOME PAGE SLIDER*/
.community-slider::after {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 173px;
	content: '';
	z-index: 1;
  background-image: url("https://cdn.prod.website-files.com/659eff0143a80597d07f531f/675c04941fd0b5ca642fc512_blur-img.svg");
	background-size: cover;
}
.community-slider::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 173px;
	content: '';
	z-index: 1;
  background-image: url("https://cdn.prod.website-files.com/659eff0143a80597d07f531f/675c04941fd0b5ca642fc512_blur-img.svg");
	background-size: cover;
  rotate: 180deg;
}
@media (max-width: 800px) {
  .community-slider::after, .community-slider::before {
    width: 100px;
  }
}
@media (max-width: 575px) {
  .community-slider::after, .community-slider::before {
    background-image: unset;
  }
}
/*TESTIMONIAL SLIDER*/
.testimonial-slider_component::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 173px;
  content: '';
  z-index: 1;
  background: linear-gradient(to right, transparent, #f6f4f0);
}
.testimonial-slider_component::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 173px;
  content: '';
  z-index: 1;
  background: linear-gradient(to left, transparent, #f6f4f0);
}
@media (max-width: 800px) {
  .testimonial-slider_component::after, .testimonial-slider_component::before {
    width: 100px;
  }
}
@media (max-width: 575px) {
  .testimonial-slider_component::after, .testimonial-slider_component::before {
    background: unset;
  }
}
/* LOGO SLIDER */
.loop-collection {
  animation: logoloop var(--loop-duration, 60s) linear infinite;
  will-change: transform;
}
/* Sponsor marquee: keep logos legible and evenly spaced on smaller screens */
.past-sponsors_component {
  max-width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}
@media (max-width: 991px) {
  .sponsor-list_item {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  /* Shorter track on small screens → shorter cycle so the speed stays lively */
  .loop-collection {
    animation-duration: calc(var(--loop-duration, 60s) * 0.65);
  }
}
@media (max-width: 479px) {
  .sponsor-list_item {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .past-sponsors-logo_item {
    max-height: 1.5rem;
  }
}
/* Pause on hover only for devices that actually hover (touch taps would
   otherwise leave the marquee "stuck" in a sticky :hover state). */
@media (hover: hover) and (pointer: fine) {
  .loop-track:hover .loop-collection,
  .loop-track:focus-within .loop-collection {
    animation-play-state: paused;
  }
}
/* If user has prefers reduced motion on in OS, pause the animation */
@media (prefers-reduced-motion) {
  .loop-collection {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
}
/* Keyframes of animation to run with prefixing for full browser support */
@-webkit-keyframes logoloop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@-moz-keyframes logoloop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@-o-keyframes logoloop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes logoloop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/*
------------------
  CAREERS PAGE
------------------
*/
.department-filter-field.is-active{
  background-color: var(--_primitives---color--white);
  border-left: 4px solid var(--_primitives---color--teal);
  color: var(--_primitives---color--outer-space);
}

/* FLAGSHIP EVENTS MARQUEE (data-driven cards) */
.flagship-event_item {
  width: 55rem;
  max-width: 70vw;
  height: 580px;
  max-height: 580px;
}
.flagship-event_item .gallery24_lightbox-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}
@media screen and (max-width: 991px) {
  .flagship-event_item {
    width: 40rem;
    max-width: 90vw;
    height: 420px;
    max-height: 420px;
  }
}
@media screen and (max-width: 479px) {
  .flagship-event_item {
    width: 88vw;
    max-width: 88vw;
    height: 340px;
    max-height: 340px;
  }
  .gallery24-metadata_wrapper {
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    grid-row-gap: .75rem;
  }
}

/* Flagship marquee: keep the name pill button a consistent size. */
.flagship-event_item .gallery24-image-title_wrapper {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  min-width: 16rem;
}
@media screen and (max-width: 479px) {
  .flagship-event_item .gallery24-image-title_wrapper {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    min-width: 12rem;
  }
}

/* Native events page: FAQ accordion trigger is a <button>, reset UA styles. */
.faq1_accordion button.faq1_question {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Native pages: match the Webflow body canvas (beige) so utility pages
   (terms, privacy, etc.) don't render on a white background. */
.content {
  background-color: #f6f4f0;
}

/* Utility pages (terms, privacy): align hero + typography with the rebrand
   palette (dark green #202e28, Roobert) instead of the legacy olive/Roboto. */
.content .hero-bg.utility-pages.hc-bg-1,
.content .hc-bg-1 {
  background-color: #202e28;
}
.content .hc-h1-page-title {
  font-family: Roobert, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.content .paragraph,
.content .paragraph.medium {
  font-family: Roobert, Arial, sans-serif;
  color: #1c1b1b;
}
@media screen and (max-width: 479px) {
  .content .inner-hero-section {
    min-height: 260px;
  }
  .content .hc-h1-page-title {
    font-size: 44px;
  }
}

/* Utility pages: tighten the large gap between hero and body copy. */
.content .content-section.double.events-section {
  margin-top: 64px;
}
@media screen and (max-width: 479px) {
  .content .content-section.double.events-section {
    margin-top: 40px;
  }
}

/* Utility pages: side padding for body copy on small screens. */
@media screen and (max-width: 479px) {
  .content .content-section .content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Careers: role detail modal (native replacement for the Webflow CMS detail page). */
.role-modal_backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1.25rem;
  background-color: rgba(32, 46, 40, 0.7);
  overflow-y: auto;
}
.role-modal_card {
  position: relative;
  width: 100%;
  max-width: 44rem;
  border-top: 5px solid var(--_primitives---color--yellow);
  border-radius: var(--_ui-styles---radius--medium);
  background-color: var(--_primitives---color--white);
  color: var(--_primitives---color--outer-space);
  padding: 2.5rem;
}
.role-modal_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 100%;
  background-color: var(--primary-hc-grey-rebrand, #eeece7);
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.role-modal_block {
  margin-top: 1.75rem;
}
.role-modal_block h3 {
  margin-bottom: 0.5rem;
}
.role-modal_list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  grid-row-gap: 0.5rem;
}
@media screen and (max-width: 479px) {
  .role-modal_card {
    padding: 2rem 1.25rem;
  }
}

/* Careers: keep the Apply button (now a <button>) identical to the CMS link. */
.career21_item .button.is-icon {
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* ===== Native career role detail page ===== */
.section_career-detail {
  background-color: #f6f4f0;
  color: #202e28;
}
.role-detail_breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.role-detail_breadcrumb a {
  color: #202e28;
  opacity: 0.7;
  text-decoration: none;
}
.role-detail_breadcrumb a:hover { opacity: 1; }
.role-detail_title { margin: 0 0 1.75rem; max-width: 60rem; }
.role-detail_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(32, 46, 40, 0.12);
  border-bottom: 1px solid rgba(32, 46, 40, 0.12);
}
.role-detail_meta-label {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.35rem;
}
.role-detail_meta-value { font-size: 1.125rem; }
.role-detail_summary {
  margin: 2rem 0 0;
  max-width: 48rem;
  font-size: 1.25rem;
  line-height: 1.55;
}
.role-detail_apply { margin-top: 2rem; }
.role-detail_apply .button,
.role-detail_apply-form > .button,
.role-detail_apply-form form .button { width: fit-content; }
.role-detail_body { margin-top: 3.5rem; max-width: 48rem; }
.role-detail_block { margin-bottom: 2.75rem; }
.role-detail_block h2 { margin: 0 0 1rem; }
.role-detail_block p { margin: 0; line-height: 1.65; }
.role-detail_list { margin: 0; padding-left: 1.25rem; list-style: disc; }
.role-detail_list li { margin-bottom: 0.75rem; line-height: 1.6; padding-left: 0.25rem; }
.role-detail_list li::marker { color: #202e28; }
@media screen and (max-width: 767px) {
  .role-detail_meta { gap: 1.5rem 2rem; }
  .role-detail_summary { font-size: 1.0625rem; }
}

/* Career detail apply form */
.role-detail_apply-form .button.is-secondary { background: transparent; color: #202e28; border: 1px solid rgba(32,46,40,.3); }
.role-detail_apply-form .button[disabled] { opacity: .6; cursor: not-allowed; }