/* Hero secondary button - outline only */
.sis-btn-default.btn-outline {
   background: transparent;
   color: var(--white-color);
   border: 1px solid var(--white-color) !important;
}

.sis-btn-default.btn-outline:hover {
   color: var(--white-color);
   border: 1px solid var(--main-color) !important;
}

/* Integrated advantage - vertical icons */
.vertical-icon {
   width: 52px;
   height: 52px;
   flex-shrink: 0;
   border-radius: 50%;
   background: #EBBB0D;
   color: var(--heading-color);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease-in-out;
}

.sisf-e-support-content:hover .vertical-icon {
   background: var(--white-color);
   color: var(--primary-color);
   transform: rotate(-8deg) scale(1.05);
}

/* Integrated advantage - light variant */
.sis-light-advantage {
   background-color: var(--secondary-color);
}

.sis-light-advantage .sisf-e-title a {
   color: var(--heading-color);
   transition: color 0.3s ease-in-out;
}

.sis-light-advantage .sisf-e-title a:hover {
   color: var(--primary-color);
}

.sis-light-advantage .sisf-e-support-content:hover .vertical-icon {
   background: var(--primary-color);
   color: var(--white-color);
}

.sis-light-advantage .sisf-electical-support-counters {
   border-top-color: rgba(47, 54, 58, 0.15);
}

.sis-light-advantage .sis-counter {
   color: var(--heading-color);
}

/* Our Businesses - social links */
.sis-business-social-section {
   background-color: var(--white-color);
   border: 1px solid rgba(33, 151, 213, 0.12);
}

.business-social-card {
   height: calc(100% - 30px);
   margin-bottom: 30px;
   padding: 28px;
   background-color: var(--secondary-color);
   border: 1px solid rgba(33, 151, 213, 0.12);
   transition: all 0.3s ease-in-out;
}

.business-social-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 14px 30px rgba(33, 151, 213, 0.12);
}

.business-social-card:hover .vertical-icon {
   background: var(--primary-color);
   color: var(--white-color);
}

.business-social-head {
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid rgba(47, 54, 58, 0.12);
}

.business-social-vertical {
   display: block;
   margin-bottom: 2px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   color: var(--primary-color);
}

/* Business detail sidebar - social links card */
.business-detail-social {
   height: auto;
   margin-top: 30px;
   margin-bottom: 0;
   padding: 25px;
}

.business-social-links a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   font-size: 14px;
   font-weight: 500;
   line-height: 1;
   border-radius: 50px;
   background-color: var(--white-color);
   color: var(--heading-color);
   transition: all 0.3s ease-in-out;
}

.business-social-links a svg {
   font-size: 15px;
   color: var(--primary-color);
   transition: color 0.3s ease-in-out;
}

.business-social-links a:hover {
   background-color: var(--primary-color);
   color: var(--white-color);
}

.business-social-links a:hover svg {
   color: var(--white-color);
}

.sis-light-advantage .sisf-content {
   color: var(--text-color);
}

/* Values - background arch + person, separated */
.values-figure {
   --values-arch-color: var(--primary-color);
   position: relative;
   max-width: 420px;
   margin: 0 auto;
   aspect-ratio: 423 / 550;
}

.values-figure-bg {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 85%;
   background: var(--values-arch-color);
   border-radius: 999px 999px 0 0;
   z-index: 0;
   overflow: hidden;
}

.values-figure-bg::after {
   content: '';
   position: absolute;
   inset: 18px 18px 0;
   border: 1px dashed rgba(255, 255, 255, 0.3);
   border-bottom: 0;
   border-radius: 999px 999px 0 0;
}

.values-figure-person {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: bottom center;
   transform: scale(1.2);
   transform-origin: bottom center;
}

/* Why partner - icons */
.why-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: var(--white-color);
   color: var(--primary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease-in-out;
}

.sisf-sis-icon-with-text--hover:hover .why-icon {
   background: var(--primary-color);
   color: var(--white-color);
}

/* Testimonials - author initial avatar */
.testimonial-initial {
   width: 56px;
   height: 56px;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--primary-color);
   color: var(--white-color);
   font-family: var(--heading-font);
   font-size: 24px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Legacy timeline */
.legacy-timeline {
   position: relative;
   padding-left: 70px;
}

.legacy-timeline::before {
   content: '';
   position: absolute;
   left: 25px;
   top: 10px;
   bottom: 10px;
   width: 2px;
   background: linear-gradient(to bottom, var(--secondary-color) 0%, var(--primary-color) 70%, transparent 100%);
}

.legacy-step {
   position: relative;
   margin-bottom: 18px;
}

.legacy-step:last-child {
   margin-bottom: 0;
}

.legacy-node {
   position: absolute;
   left: -70px;
   top: 50%;
   transform: translateY(-50%);
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--white-color);
   border: 2px solid var(--primary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
   transition: all 0.3s ease-in-out;
}

.legacy-node span {
   font-weight: 800;
   font-size: 16px;
   color: var(--primary-color);
   transition: color 0.3s ease-in-out;
}

.legacy-card {
   position: relative;
   background: var(--secondary-color);
   border-radius: 16px;
   padding: 20px 24px;
   border-left: 4px solid transparent;
   transition: all 0.3s ease-in-out;
}

.legacy-card::before {
   content: '';
   position: absolute;
   left: -12px;
   top: 50%;
   transform: translateY(-50%);
   border: 8px solid transparent;
   border-right-color: var(--secondary-color);
   transition: border-color 0.3s ease-in-out;
}

.legacy-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 6px;
}

.legacy-card-head h3 {
   font-size: 22px;
   font-weight: 800;
   color: var(--heading-color);
   margin: 0;
}

.legacy-tag {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--primary-color);
   background: var(--white-color);
   border-radius: 50px;
   padding: 4px 12px;
}

.legacy-step:hover .legacy-card {
   transform: translateX(6px);
   border-left-color: var(--primary-color);
   box-shadow: 0 10px 30px rgba(24, 118, 168, 0.12);
}

.legacy-step:hover .legacy-node {
   background: var(--primary-color);
}

.legacy-step:hover .legacy-node span {
   color: var(--white-color);
}

/* Today - highlighted */
.legacy-step.is-today .legacy-node {
   background: var(--primary-color);
   animation: legacyPulse 2s ease-out infinite;
}

.legacy-step.is-today .legacy-node span {
   color: var(--white-color);
}

.legacy-step.is-today .legacy-card {
   background: var(--primary-color);
}

.legacy-step.is-today .legacy-card::before {
   border-right-color: var(--primary-color);
}

.legacy-step.is-today .legacy-card-head h3,
.legacy-step.is-today .legacy-card p {
   color: var(--white-color);
}

.legacy-step.is-today .legacy-tag {
   background: var(--yellow-color);
   color: var(--heading-color);
}

.legacy-step.is-today:hover .legacy-card {
   border-left-color: var(--yellow-color);
}

@keyframes legacyPulse {
   0% { box-shadow: 0 0 0 0 rgba(24, 118, 168, 0.45); }
   70% { box-shadow: 0 0 0 14px rgba(24, 118, 168, 0); }
   100% { box-shadow: 0 0 0 0 rgba(24, 118, 168, 0); }
}

/* Tomorrow - future / dashed */
.legacy-step.is-future .legacy-node {
   border-style: dashed;
}

.legacy-step.is-future .legacy-card {
   background: transparent;
   border: 2px dashed var(--primary-color);
}

.legacy-step.is-future .legacy-card::before {
   display: none;
}

.legacy-step.is-future .legacy-tag {
   background: var(--secondary-color);
}

@media only screen and (max-width: 767px) {
   .legacy-timeline {
      padding-left: 52px;
   }

   .legacy-timeline::before {
      left: 19px;
   }

   .legacy-node {
      left: -52px;
      width: 40px;
      height: 40px;
   }

   .legacy-node span {
      font-size: 13px;
   }

   .legacy-card {
      padding: 16px 18px;
   }

   .legacy-card-head h3 {
      font-size: 18px;
   }
}

/* ===================== Inner pages ===================== */

/* Header - active menu item */
.sis-main-menu .nav-link.active,
.sis-main-menu .sub-menu .nav-link.active {
   color: var(--primary-color);
}

/* Sidebar list (business / about pages) - active item */
.sisf-sis-page-list .sisf-sis-list-item.active a {
   color: var(--main-color);
}

.sisf-sis-page-list .sisf-sis-list-item.active i {
   transform: rotate(0deg);
}

.sisf-sis-page-list .sisf-sis-list-item i svg {
   width: 14px;
   height: 14px;
}

/* Philosophy / pull quote */
.page-quote {
   position: relative;
   background: var(--secondary-color);
   border-left: 4px solid var(--primary-color);
   border-radius: 16px;
   padding: 28px 32px;
}

.page-quote p {
   font-size: 22px;
   line-height: 1.45;
   font-weight: 700;
   color: var(--heading-color);
   margin: 0;
}

.page-quote .page-quote-label {
   display: block;
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.6px;
   color: var(--primary-color);
   margin-bottom: 10px;
}

/* Capability list - two columns */
.capability-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px 24px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.capability-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-weight: 500;
   color: var(--heading-color);
}

.capability-list li svg {
   flex-shrink: 0;
   margin-top: 5px;
   color: var(--primary-color);
}

@media only screen and (max-width: 575px) {
   .capability-list {
      grid-template-columns: 1fr;
   }

   .page-quote {
      padding: 22px;
   }

   .page-quote p {
      font-size: 18px;
   }
}

/* Leadership - aside (photo + quote card) */
.leader-aside {
   position: sticky;
   top: 120px;
}

.leader-photo {
   position: relative;
   margin: 0 0 0 18px;
}

.leader-photo::before {
   content: '';
   position: absolute;
   top: -18px;
   left: -18px;
   width: 70%;
   height: 70%;
   border: 2px solid var(--yellow-color);
   border-radius: 24px;
   z-index: 0;
}

.leader-photo figure {
   position: relative;
   z-index: 1;
   border-radius: 24px;
   overflow: hidden;
}

.leader-photo img {
   aspect-ratio: 4 / 5;
   object-fit: cover;
}

.leader-years {
   position: absolute;
   top: 24px;
   right: -14px;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: var(--yellow-color);
   color: var(--heading-color);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   line-height: 1.2;
   text-align: center;
   border-radius: 16px;
   padding: 14px 16px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.leader-years strong {
   font-size: 32px;
   font-weight: 800;
   line-height: 1;
   margin-bottom: 4px;
}

.leader-quote-card {
   position: relative;
   z-index: 3;
   margin: -90px 0 0 46px;
   background: var(--primary-color);
   border-radius: 24px;
   padding: 30px 30px 26px;
   box-shadow: 0 20px 45px rgba(24, 118, 168, 0.28);
   overflow: hidden;
}

.leader-quote-icon {
   position: absolute;
   top: 14px;
   right: 22px;
   font-size: 72px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.14);
}

.leader-quote-label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--yellow-color);
   margin-bottom: 12px;
}

.leader-quote-card h3 {
   position: relative;
   font-size: 22px;
   line-height: 1.4;
   color: var(--white-color);
   margin: 0 0 20px;
}

.leader-quote-author {
   display: flex;
   flex-direction: column;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   padding-top: 14px;
}

.leader-quote-author strong {
   color: var(--white-color);
   font-size: 17px;
}

.leader-quote-author span {
   color: rgba(255, 255, 255, 0.75);
   font-size: 14px;
}

/* Leadership - letter */
.leader-letter {
   position: relative;
   background: var(--white-color);
   border: 1px solid rgba(33, 151, 213, 0.12);
   border-radius: 24px;
   padding: 44px 46px;
   box-shadow: 0 10px 40px rgba(24, 118, 168, 0.08);
}

.leader-letter::before {
   content: '';
   position: absolute;
   top: 44px;
   left: 0;
   width: 4px;
   height: 64px;
   background: var(--yellow-color);
   border-radius: 0 4px 4px 0;
}

.leader-letter p {
   font-size: 17px;
   line-height: 1.8;
}

.leader-letter-label {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--primary-color);
   background: var(--secondary-color);
   border-radius: 50px;
   padding: 6px 14px;
   margin-bottom: 20px;
}

.leader-letter .leader-lead {
   font-size: 20px;
   line-height: 1.65;
   font-weight: 600;
   color: var(--heading-color);
}

.leader-letter .leader-lead::first-letter {
   float: left;
   font-size: 64px;
   line-height: 0.9;
   font-weight: 800;
   color: var(--primary-color);
   margin: 6px 12px 0 0;
}

.leader-facts {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin: 28px 0;
   padding: 0;
   list-style: none;
   background: var(--secondary-color);
   border-radius: 18px;
}

.leader-facts li {
   display: flex;
   flex-direction: column;
   padding: 20px 22px;
}

.leader-facts li + li {
   border-left: 1px solid rgba(33, 151, 213, 0.18);
}

.leader-facts strong {
   font-size: 30px;
   font-weight: 800;
   line-height: 1.1;
   color: var(--primary-color);
}

.leader-facts span {
   font-size: 14px;
   color: var(--heading-color);
}

.leader-highlight {
   position: relative;
   margin: 30px 0;
   padding: 26px 30px;
   border-radius: 18px;
   background: linear-gradient(135deg, var(--heading-color) 0%, var(--primary-color) 100%);
}

.leader-highlight-label {
   display: block;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--yellow-color);
   margin-bottom: 8px;
}

.leader-letter .leader-highlight p {
   font-size: 21px;
   line-height: 1.45;
   font-weight: 700;
   color: var(--white-color);
   margin: 0;
}

.leader-values {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 0 0 24px;
   padding: 0;
   list-style: none;
}

.leader-values li {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 700;
   color: var(--heading-color);
   border: 1px solid rgba(33, 151, 213, 0.25);
   border-radius: 50px;
   padding: 8px 18px;
   transition: all 0.3s ease-in-out;
}

.leader-values li::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--yellow-color);
}

.leader-values li:hover {
   background: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--white-color);
}

.leader-sign {
   display: flex;
   flex-direction: column;
   margin-top: 30px;
   padding-top: 24px;
   border-top: 1px dashed rgba(33, 151, 213, 0.3);
}

.leader-sign-mark {
   font-style: italic;
   font-size: 16px;
   margin-bottom: 4px;
}

.leader-sign strong {
   font-size: 22px;
   font-weight: 800;
   color: var(--heading-color);
}

.leader-sign span:last-child {
   font-size: 14px;
   color: var(--primary-color);
   font-weight: 600;
}

@media only screen and (max-width: 991px) {
   .leader-aside {
      position: static;
      max-width: 520px;
      margin: 0 auto;
   }
}

@media only screen and (max-width: 575px) {
   .leader-photo {
      margin-left: 12px;
   }

   .leader-photo::before {
      top: -12px;
      left: -12px;
   }

   .leader-years {
      right: 12px;
   }

   .leader-quote-card {
      margin: -60px 12px 0;
      padding: 24px 22px 20px;
   }

   .leader-quote-card h3 {
      font-size: 19px;
   }

   .leader-letter {
      padding: 28px 22px;
   }

   .leader-letter::before {
      top: 28px;
   }

   .leader-letter .leader-lead {
      font-size: 18px;
   }

   .leader-facts {
      grid-template-columns: 1fr;
   }

   .leader-facts li + li {
      border-left: 0;
      border-top: 1px solid rgba(33, 151, 213, 0.18);
   }

   .leader-highlight {
      padding: 22px;
   }

   .leader-letter .leader-highlight p {
      font-size: 18px;
   }
}

/* Mission pillars */
.mission-card {
   height: 100%;
   background: var(--white-color);
   border-radius: 16px;
   padding: 28px;
   transition: all 0.3s ease-in-out;
}

.mission-card .mission-num {
   display: inline-block;
   font-size: 14px;
   font-weight: 800;
   color: var(--primary-color);
   background: var(--secondary-color);
   border-radius: 50px;
   padding: 4px 14px;
   margin-bottom: 16px;
   transition: all 0.3s ease-in-out;
}

.mission-card h3 {
   font-size: 22px;
   margin-bottom: 8px;
}

.mission-card:hover {
   background: var(--primary-color);
   transform: translateY(-4px);
}

/* .mission-card:hover h3,
.mission-card:hover p {
   color: var(--white-color);
} */

.mission-card.sis-comman-bg {
   background: var(--secondary-color);
}

.mission-card.sis-comman-bg .mission-num {
   background: var(--white-color);
}

.mission-card.sis-comman-bg:hover {
   background: var(--primary-color);
}

.mission-card:hover a {
   color: var(--yellow-color);
}

.mission-card:hover .mission-num {
   background: var(--yellow-color);
   color: var(--heading-color);
}

/* Business overview - integrated flow */
.flow-step {
   text-align: center;
   background: var(--white-color);
   border-radius: 16px;
   padding: 24px 18px;
   height: 100%;
}

.flow-step h3 {
   font-size: 20px;
   margin: 14px 0 6px;
}

.flow-step .vertical-icon {
   margin: 0 auto;
}

/* Our Story - The Future (light) */
.future-section {
   background: linear-gradient(180deg, var(--white-color) 0%, var(--secondary-color) 100%);
   border: 1px solid rgba(33, 151, 213, 0.12);
   overflow: hidden;
}

.future-section::before {
   content: '';
   position: absolute;
   top: -160px;
   right: -160px;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   border: 60px solid rgba(33, 151, 213, 0.06);
   pointer-events: none;
}

.future-intro p {
   font-size: 17px;
   line-height: 1.7;
}

.future-label {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--primary-color);
   margin: 10px 0 22px;
}

.future-label::after {
   content: '';
   flex: 1;
   height: 1px;
   background: rgba(33, 151, 213, 0.2);
}

.future-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 18px;
   margin-bottom: 40px;
}

.future-card {
   position: relative;
   overflow: hidden;
   background: var(--white-color);
   border: 1px solid rgba(33, 151, 213, 0.12);
   border-radius: 18px;
   padding: 26px 22px;
   box-shadow: 0 6px 20px rgba(24, 118, 168, 0.06);
   transition: all 0.35s ease-in-out;
}

.future-card::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 3px;
   background: var(--yellow-color);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.35s ease-in-out;
}

.future-num {
   position: absolute;
   top: 14px;
   right: 18px;
   font-size: 38px;
   font-weight: 800;
   line-height: 1;
   color: rgba(33, 151, 213, 0.12);
   transition: color 0.35s ease-in-out;
}

.future-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   background: var(--secondary-color);
   color: var(--primary-color);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 40px;
   transition: all 0.35s ease-in-out;
}

.future-card h3 {
   font-size: 20px;
   line-height: 1.3;
   color: var(--heading-color);
   margin: 0;
}

.future-card:hover {
   border-color: transparent;
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(24, 118, 168, 0.15);
}

.future-card:hover::before {
   transform: scaleX(1);
}

.future-card:hover .future-num {
   color: rgba(247, 173, 6, 0.3);
}

.future-card:hover .future-icon {
   background: var(--primary-color);
   color: var(--white-color);
   transform: rotate(-8deg);
}

.future-closing {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 24px;
   border-radius: 20px;
   padding: 36px 40px;
}

.future-closing-text {
   flex: 1 1 420px;
   border-left: 4px solid var(--yellow-color);
   padding-left: 22px;
}

.future-closing p {
   font-size: 17px;
   color: var(--white-color);
   opacity: 0.85;
   margin-bottom: 6px;
}

.future-closing h3 {
   font-size: 28px;
   line-height: 1.3;
   color: var(--white-color);
   margin: 0;
}

@media only screen and (max-width: 1199px) {
   .future-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media only screen and (max-width: 575px) {
   .future-closing {
      padding: 26px 22px;
   }
}

@media only screen and (max-width: 767px) {
   .future-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
   }

   .future-icon {
      margin-bottom: 24px;
   }

   .future-card h3 {
      font-size: 17px;
   }

   .future-closing h3 {
      font-size: 22px;
   }
}

@media only screen and (max-width: 420px) {
   .future-grid {
      grid-template-columns: 1fr;
   }
}

/* Closing CTA */
.page-cta .button-group {
   gap: 16px;
}

/* CSR intro - image with floating objective card */
.csr-intro-media {
   position: relative;
   padding-right: 60px;
   padding-bottom: 80px;
}

.csr-intro-media figure {
   margin: 0;
}

.csr-intro-media img {
   aspect-ratio: 4 / 4.2;
   object-fit: cover;
}

.csr-objective-card {
   position: absolute;
   right: 0;
   bottom: 0;
   width: min(340px, 75%);
   padding: 30px 28px;
   background: var(--heading-color);
   color: var(--white-color);
   box-shadow: 0 24px 48px rgba(47, 54, 58, 0.22);
   border-top: 4px solid var(--primary-color);
}

.csr-objective-label {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--primary-color);
   margin-bottom: 14px;
}

.csr-objective-card h3 {
   color: var(--white-color);
   font-size: 22px;
   line-height: 1.35;
   margin-bottom: 22px;
}

.csr-objective-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding-top: 18px;
   border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.csr-objective-name {
   display: block;
   font-weight: 700;
   color: var(--white-color);
}

.csr-objective-role {
   display: block;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
}

.csr-objective-quote {
   color: var(--primary-color);
   opacity: 0.9;
}

.csr-intro-content {
   padding-left: 20px;
}

.csr-intro-lead {
   font-size: 20px;
   line-height: 1.5;
   font-weight: 600;
   color: var(--heading-color);
   padding-left: 18px;
   border-left: 3px solid var(--primary-color);
   margin-bottom: 24px;
}

.csr-intro-tags {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.csr-intro-tags li {
   padding: 8px 16px;
   border-radius: 100px;
   background: var(--secondary-color);
   color: var(--heading-color);
   font-size: 14px;
   font-weight: 600;
   transition: all 0.3s ease-in-out;
}

.csr-intro-tags li:hover {
   background: var(--primary-color);
   color: var(--white-color);
}

@media only screen and (max-width: 991px) {
   .csr-intro-content {
      padding-left: 0;
   }
}

@media only screen and (max-width: 575px) {
   .csr-intro-media {
      padding-right: 0;
      padding-bottom: 0;
   }

   .csr-objective-card {
      position: relative;
      width: auto;
      margin: -50px 16px 0;
      padding: 24px 22px;
   }

   .csr-objective-card h3 {
      font-size: 19px;
   }

   .csr-intro-lead {
      font-size: 18px;
   }
}

/* ===================== Enquiry Success Page ===================== */
.enquiry-success-card {
   padding: 56px 40px;
}

.enquiry-success-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 84px;
   height: 84px;
   margin-bottom: 24px;
   border-radius: 50%;
   background: var(--primary-color);
   color: var(--white-color);
   font-size: 34px;
   box-shadow: 0 0 0 10px rgba(33, 151, 213, .15);
}

.enquiry-success-link {
   color: var(--primary-color);
   font-weight: 600;
}

.enquiry-success-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 16px;
   margin-top: 32px;
}

.enquiry-success-actions .enquiry-success-btn-alt {
   background-color: var(--heading-color);
}

@media (max-width: 576px) {
   .enquiry-success-card {
      padding: 40px 20px;
   }
}

/* ===================== Completed Projects Page ===================== */
.cp-search {
   position: relative;
}

.cp-search svg {
   position: absolute;
   top: 50%;
   left: 20px;
   transform: translateY(-50%);
   color: var(--primary-color);
   pointer-events: none;
}

.cp-search input {
   width: 100%;
   padding: 16px 20px 16px 50px;
   border: 1px solid rgba(47, 54, 58, .12);
   border-radius: 50px;
   background: var(--white-color);
   color: var(--heading-color);
   font-size: 16px;
   transition: border-color .3s, box-shadow .3s;
}

.cp-search input:focus {
   outline: none;
   border-color: var(--primary-color);
   box-shadow: 0 0 0 4px rgba(33, 151, 213, .15);
}

.cp-count {
   margin-top: 10px;
   padding-left: 20px;
   font-size: 14px;
   color: var(--text-color);
}

.cp-card {
   display: block;
   height: 100%;
   overflow: hidden;
   border-radius: 20px;
   background: var(--white-color);
   box-shadow: 0 6px 24px rgba(47, 54, 58, .08);
   transition: transform .35s, box-shadow .35s;
}

.cp-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 40px rgba(47, 54, 58, .14);
}

.cp-card-img {
   position: relative;
   overflow: hidden;
   aspect-ratio: 3 / 2;
   background: var(--secondary-color);
}

.cp-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s;
}

.cp-card:hover .cp-card-img img {
   transform: scale(1.06);
}

.cp-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   padding: 5px 12px;
   border-radius: 50px;
   background: var(--primary-color);
   color: var(--white-color);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
}

.cp-zoom {
   position: absolute;
   top: 50%;
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   color: var(--primary-color);
   font-size: 20px;
   opacity: 0;
   transform: translate(-50%, -50%) scale(.7);
   transition: opacity .35s, transform .35s;
}

.cp-card:hover .cp-zoom {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
}

.cp-card-body {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 18px 20px 20px;
}

.cp-num {
   flex-shrink: 0;
   min-width: 38px;
   padding: 4px 0;
   border-radius: 8px;
   background: var(--secondary-color);
   color: var(--primary-color);
   font-size: 14px;
   font-weight: 700;
   text-align: center;
}

.cp-card-body h3 {
   margin: 0 0 4px;
   font-size: 18px;
   line-height: 1.3;
   color: var(--heading-color);
   transition: color .3s;
}

.cp-card:hover .cp-card-body h3 {
   color: var(--primary-color);
}

.cp-loc {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   color: var(--text-color);
}

.cp-loc svg {
   color: var(--primary-color);
}

.cp-empty {
   padding: 48px 20px;
   border-radius: 20px;
   background: var(--secondary-color);
   color: var(--text-color);
}

@media (max-width: 576px) {
   .cp-card-body h3 {
      font-size: 17px;
   }
}

/* ===================== Careers Page ===================== */
.career-btn-dark {
   background-color: var(--heading-color);
}

.career-benefits {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 12px;
}

.career-benefits li {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 18px 22px;
   background: var(--white-color);
   color: var(--heading-color);
   font-weight: 600;
   transition: transform .3s, box-shadow .3s;
}

.career-benefits li:hover {
   transform: translateX(6px);
   box-shadow: 0 10px 28px rgba(47, 54, 58, .08);
}

.career-benefit-num {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: var(--primary-color);
   color: var(--white-color);
   font-weight: 700;
}

.career-culture-img {
   aspect-ratio: 4 / 3.4;
   object-fit: cover;
}

/* Life at Naata - moment cards */
.career-moment {
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.career-moment-img {
   display: block;
   overflow: hidden;
   aspect-ratio: 16 / 9;
   background: var(--secondary-color);
}

.career-moment-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s;
}

.career-moment:hover .career-moment-img img {
   transform: scale(1.05);
}

.career-moment-body {
   padding: 24px 26px 28px;
}

.career-moment-body h3 {
   font-size: 22px;
   margin-bottom: 10px;
   padding-left: 14px;
   border-left: 3px solid var(--primary-color);
}

.career-life-photo {
   display: block;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   background: var(--white-color);
}

.career-life-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s;
}

.career-life-photo:hover img {
   transform: scale(1.06);
}

.career-gallery-item {
   display: block;
   overflow: hidden;
   aspect-ratio: 1;
   background: var(--white-color);
}

.career-gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s;
}

.career-gallery-item:hover img {
   transform: scale(1.06);
}

/* Role cards */
.career-role-card {
   display: flex;
   flex-direction: column;
   padding: 28px 24px;
   background: var(--white-color);
   border: 1px solid rgba(47, 54, 58, .08);
   box-shadow: 0 6px 24px rgba(47, 54, 58, .06);
   transition: transform .35s, box-shadow .35s, border-color .35s;
}

.career-role-card:hover {
   transform: translateY(-6px);
   border-color: var(--primary-color);
   box-shadow: 0 16px 40px rgba(47, 54, 58, .12);
}

.career-role-card .why-icon {
   background: var(--secondary-color);
   margin-bottom: 18px;
   transition: background .3s, color .3s;
}

.career-role-card:hover .why-icon {
   background: var(--primary-color);
   color: var(--white-color);
}

.career-role-card h3 {
   font-size: 20px;
   line-height: 1.3;
   margin-bottom: 10px;
}

.career-role-card p {
   flex-grow: 1;
   margin-bottom: 18px;
}

.career-apply-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   align-self: flex-start;
   color: var(--primary-color);
   font-weight: 700;
}

.career-apply-link i {
   transition: transform .3s;
}

.career-role-card:hover .career-apply-link i {
   transform: translateX(4px);
}

.career-note {
   margin-top: 8px;
   font-size: 15px;
   font-style: italic;
   color: var(--text-color);
}

/* Resume form */
#submit-resume {
   scroll-margin-top: 100px;
}

.career-steps {
   list-style: none;
   padding: 0;
   margin: 24px 0 0;
   display: grid;
   gap: 14px;
}

.career-steps li {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   color: var(--white-color);
}

.career-steps span {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--yellow-color);
   color: var(--heading-color);
   font-weight: 700;
   font-size: 14px;
}

.career-upload {
   position: relative;
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
   padding: 18px 22px;
   border: 2px dashed rgba(33, 151, 213, .4);
   border-radius: 16px;
   cursor: pointer;
   transition: border-color .3s, background-color .3s;
}

.career-upload:hover,
.career-upload.has-file {
   border-color: var(--primary-color);
}

.career-upload input[type=file] {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
}

.career-upload-icon {
   flex-shrink: 0;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: var(--white-color);
   color: var(--primary-color);
}

.career-upload.has-file .career-upload-icon {
   background: var(--primary-color);
   color: var(--white-color);
}

.career-upload-text {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.career-upload-text strong {
   color: var(--heading-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.career-upload-text small {
   color: var(--text-color);
}

@media only screen and (max-width: 575px) {
   .career-moment-body {
      padding: 20px;
   }

   .career-moment-body h3,
   .career-role-card h3 {
      font-size: 19px;
   }

   .career-benefits li {
      padding: 14px 16px;
      gap: 14px;
   }
}