:root {
   --accent-color: #01274e;
   --text-color: #1D1D27;
   --text--color-secondary: #888;
   --background-color: #FAFAFA;
   --bg-secondary-color: #f5f7fc;
   --grey: #e3e3e3;
}

* {
   margin: 0;
   box-sizing: border-box;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
}

html {
   scroll-behavior: smooth;
}

.industry-select-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
}

.industry-dropdown {
   position: relative;
   width: 100%;
   max-width: 720px;
   margin: 0 auto;
}

.industry-dropdown-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px 16px;
   border-radius: 12px;
   border: 1px solid #d6dee6;
   background: #fff;
   color: #2b3a46;
   font-weight: 500;
   transition: border-color 160ms ease, box-shadow 160ms ease;
}

.industry-dropdown-toggle:hover,
.industry-dropdown.is-open .industry-dropdown-toggle {
   border-color: #06263f;
   box-shadow: 0 10px 24px rgba(6, 38, 63, 0.18);
}

.industry-dropdown-icon {
   font-size: 14px;
   transition: transform 160ms ease;
}

.industry-dropdown.is-open .industry-dropdown-icon {
   transform: rotate(180deg);
}

.industry-dropdown-panel {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   right: 0;
   z-index: 5;
   background: #fff;
   border: 1px solid #d6dee6;
   border-radius: 14px;
   padding: 12px;
   box-shadow: 0 18px 40px rgba(6, 38, 63, 0.18);
   max-height: 0;
   opacity: 0;
   transform: translateY(-6px);
   overflow: hidden;
   pointer-events: none;
   transition: max-height 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.industry-dropdown.is-open .industry-dropdown-panel {
   max-height: 420px;
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.industry-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 12px;
   margin-top: 0;
   max-height: 360px;
   overflow-y: auto;
   padding: 8px;

   /* Standard property for Firefox */
   scrollbar-color: #06263f rgba(6, 38, 63, 0.12);
   /* thumb | track */
   scrollbar-width: thin;

   /* WebKit (Chrome, Safari, Edge) */
   &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
   }

   &::-webkit-scrollbar-track {
      background: rgba(6, 38, 63, 0.12);
      /* Transparent version of your color */
      border-radius: 10px;
   }

   &::-webkit-scrollbar-thumb {
      background: #06263f ;
      border-radius: 10px;
   }

   &::-webkit-scrollbar-thumb:hover {
      background: #0b2a4a;
      /* Slightly darker for interaction */
   }
}

.industry-option {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid #d6dee6;
   background: #fff;
   color: #2b3a46;
   cursor: pointer;
   transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.industry-option:hover {
   border-color: #06263f;
   box-shadow: 0 8px 18px rgba(6, 38, 63, 0.16);
   transform: translateY(-1px);
}

.industry-option input {
   accent-color: #06263f;
}

.industry-option.is-disabled {
   opacity: 0.5;
   cursor: not-allowed;
   box-shadow: none;
}

.industry-option.is-disabled:hover {
   border-color: #d6dee6;
   transform: none;
}

.industry-option-title {
   font-weight: 500;
}

/* BACKGROUND */
.talent-hero {
   background: #0e1024;
}

/* GRID WRAPPER */
.oct-grid {
   position: relative;
   --ring-radius-x: 350px;
   --ring-radius-y: 220px;
   --outer-size: 120px;
   --center-size: 170px;
   width: min(760px, 96vw);
   height: min(660px, 88vw);
   margin: 0 auto;
   margin-top: 30px;
   will-change: transform;
}

/* OCTAGON */
.oct {
   position: absolute;
   left: 50%;
   top: 50%;
   width: var(--outer-size);
   height: var(--outer-size);
   clip-path: polygon(30% 0%, 70% 0%,
         100% 30%, 100% 70%,
         70% 100%, 30% 100%,
         0% 70%, 0% 30%);
   background-size: cover;
   background-position: center;
   opacity: 0;
   transform: translate(-50%, -50%) scale(0.85);
   transition: opacity 0.6s ease,
      transform 0.7s cubic-bezier(.4, 0, .2, 1);
}

/* SHOW */
.oct.show {
   opacity: 1;
   transform: translate(-50%, -50%) translate(var(--offset-x, 0), var(--offset-y, 0)) scale(1);
}

/* CENTER */
.oct-grid .oct:nth-child(1) {
   width: var(--center-size);
   height: var(--center-size);
   z-index: 2;
}


.talent-hero {
   position: relative;
   height: 100vh;
   max-height: 600px;
   overflow: hidden;
}

.hero-parallax-bg {
   position: absolute;
   inset: -10%;
   background: radial-gradient(circle at 30% 30%,
         #06263f 0%,
         #06263f 70%);
   transform: translateY(0);
   will-change: transform;
   z-index: 0;
}

.hero-content {
   position: relative;
   z-index: 2;
}

/* INDUSTRIES */
.industry-card {
   border: 0;
   border-radius: 1.25rem;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
   transition: transform .3s ease;
}

.industry-card:hover {
   transform: translateY(-6px);
}

/* Smooth fade-in + slide-up */
.service-card {
   cursor: pointer;
   border: 2px solid transparent;
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.5s ease, transform 0.5s ease;
}

.service-group {
   width: 100%;
}

.service-columns {
   display: grid;
   grid-template-columns: repeat(var(--industry-columns, 1), minmax(220px, 1fr));
   gap: 24px;
   padding-bottom: 1.5rem;
}

.service-column {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
   max-width: 400px;
   justify-self: center;
}

.service-column-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.service-item-explore {
   width: 100%;
}

.industry-select-container-dsl {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 90%;
   max-width: 1440px;
   align-self: center;
   justify-self: center;
   padding: 24px;
   border-radius: 12px;
   box-shadow: 0 12px 28px rgba(6, 38, 63, 0.12);
}

@media (max-width: 991.98px) {
   .service-columns {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   }

}

.service-group-title {
   font-weight: 600;
   color: #0b2a4a;
   margin: 18px 0 8px;
   text-align: center;
}

.service-card.selected,
.service-card:hover {
   border-color: #0b3158;
   background: rgba(6, 38, 63, 0.03);
   transform: translateY(-4px) scale(1.02);
}

.service-card.selected {
   border-color: #06263f;
   background: rgba(6, 38, 63, 0.08);
}

.service-card.show {
   opacity: 1;
   transform: translateY(0);
}

.process {
   display: flex;
   gap: 18px
}

.step {
   flex: 1;
   background: linear-gradient(180deg, #fff, #fbfdff);
   padding: 10px;
   border-radius: 10px
}

.step strong {
   display: block;
   margin-bottom: 8px
}

.step-number {
   font-size: 40px;
   font-weight: 700;
   color: #06263f;
   margin-bottom: 12px;
}

.empty-state-card {
   max-width: 560px;
   margin: 12px auto 0;
   padding: 50px 18px;
   border-radius: 14px;
   /* background: #eef3f8; */
   /* border: 1px dashed #b9c6d3; */
   color: #5c6b78;
   text-align: center;
   opacity: 1;
   transform: translateY(0);
   max-height: 120px;
   overflow: hidden;
   transition: max-height 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.empty-state-card.is-hidden {
   max-height: 0;
   opacity: 0;
   transform: translateY(-6px);
   padding-top: 0;
   padding-bottom: 0;
   border-width: 0;
   margin-top: 0;
}



/* Responsive fallback */
@media (max-width: 992px) {
    .single-industry-mode .service-column-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .single-industry-mode .service-column-list {
        grid-template-columns: 1fr;
    }
}



 /* ===== Single-industry (1 selected) - spread services across 3 columns ===== */
 /* NOTE: explore.css is loaded after style.css, so overrides here will win. */
-.service-column { max-width: none; } /* allow columns to stretch */
+/* Only stretch in single-industry mode (do NOT affect multi-industry columns) */
+.service-columns.single-industry-mode{
+  grid-template-columns: 1fr !important; /* keep 1 industry group, full width */
+}
 
 .single-industry-mode .service-column{
   width: 100%;
   max-width: none;
-  justify-self: stretch;
+  justify-self: stretch; /* overrides default center */
 }
 
 .single-industry-mode .service-column-list{
   display: grid !important;              /* override default flex column */
   grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
   gap: 16px;
   width: 100%;
 }