@import url('fonts/Roboto.css');
@import '/assets_new/fonts/twincore-new/font/style.css';

/*
  main.css — TwinCore
  Loaded after Bootstrap 5 so our rules take priority where needed.
  All color values are referenced via CSS custom properties defined in :root.
*/

/* ============================================================
   0. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */

:root {
  /* Brand palette */
  --orange:       #FE6B35;
  --orange-dark:  #E85A25;   /* hover / pressed state */
  --blue:         #0177B5;
  --black:        #232528;
  --light-grey:   #F3F5F7;
  --white:        #FFFFFF;
  --grey:         #DFE2E5;
  --grey2:         #f6f6f8;
  --grey3:        #2325284D;
  --light-blue:   #CCE4F0;
  --accent-blue:  #E0EBF2;

  /* Semantic / derived */
  --body-bg:           var(--light-grey);
  --body-text:         var(--black);
  --link:              var(--blue);

  /* Shadows (rgba tokens) */
  --shadow-card:               rgba(16, 45, 97, 0.08);
  --shadow-mega-menu:          rgba(16, 45, 97, 0.10);
  --shadow-btn-primary:        rgba(254, 107, 53, 0.30);
  --shadow-btn-secondary:      rgba(1, 119, 181, 0.15);
  --backdrop:            rgba(35, 37, 40, 0.50);
  --menu-backdrop:       rgba(35, 37, 40, 0.15);
  --icon-circle-bg:      rgba(1, 119, 181, 0.08);
  --icon-circle-orange-bg: rgba(254, 107, 53, 0.08);
  --card-border-dark:      rgba(223, 226, 229, 0.30);
  --shadow-scroll-top-btn:     #E8E8E833;

  /* Border-radius scale */
  --radius-pill:    30px;
  --radius-card:    24px;
  --radius-panel:   20px;
  --radius-header:  40px;
  --radius-icon:    60px;
}


/* ============================================================
   1. BASE RESETS / GLOBAL
   ============================================================ */

/* Bootstrap already provides box-sizing and normalize resets.
   We only add what Bootstrap does not cover. */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--body-bg);
  color: var(--body-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;  
  padding-top: calc(24px + 76px + 30px);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Skip-to-content (a11y) */
.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--black);
  color: var(--white);
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  transition: top 0.1s;
}
.skip-link:focus {
  top: 0;
}


/* ============================================================
   2. HEADER
   ============================================================ */

.site-header {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 90px);
  max-width: 1830px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-header);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Logo link */
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
}

.site-header__logo img {
  display: block;
  height: 18px;
  width: auto;
}

/* Desktop nav wrapper — hidden on <lg, shown on lg+ */
.site-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: block;
  }
}


/* ============================================================
   3. NAV LINKS (desktop)
   ============================================================ */

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
}

.nav-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.nav-link .chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-link[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}


/* ============================================================
   4. MEGA-MENU PANEL (sidebar + columns layout — no icons)
   ============================================================ */

/* Positioning shell — handles show/hide, no visual styles */
.mega-menu {
  position: fixed;
  top: calc(24px + 74px + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: calc(100% - 90px);
  max-width: 1830px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
}

.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* White panel box */
.mega-menu__panel {
  position: relative;
  background: var(--white);
  border-radius: 3px;
  box-shadow: 0px 13px 40px rgba(11, 125, 182, 0.07),
              0px 0px 14px rgba(11, 125, 182, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mega-menu__close {
  position: absolute;
  top: 20px;
  right: max(14px, calc((100% - 1288px) / 2 - 24px));
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9999px;
  background: var(--white);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.2;
  transition: 0.2s ease;
}

.mega-menu__close img{
  width: 15px;
  height: 15px;
}

.mega-menu__close:hover {
  opacity: 0.4;
}

.mega-menu__close:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Centers sidebar + columns at max 1288px */
.mega-menu__inner {
  display: flex;
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
}

/* ── Sidebar (left, 328px) ── */
.mega-menu__sidebar {
  width: 328px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--grey);
}

.mega-menu__sidebar-body {
  flex: 1;
  background: var(--light-grey);
  padding: 24px;
}

.mega-menu__sidebar-title {
  font-size: 26px;
  font-weight: 400;
  line-height: normal;
  color: var(--black);
  text-transform: capitalize;
  letter-spacing: 0.26px;
  margin: 0 0 16px;
}

.mega-menu__sidebar-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
  max-width: 270px;
}

.mega-menu__sidebar-foot {
  background: var(--grey);
  padding: 25px 24px 37px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 190px;
}

.mega-menu__sidebar-cta-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--black);
  letter-spacing: 0.5px;
  margin: 0;
}

/* ── Content columns ── */
.mega-menu__columns {
  flex: 1;
  display: flex;
  gap: 40px;
  padding: 24px 40px 30px;
  min-width: 0;
}

.mega-menu__col {
  width: 268px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mega-menu__group-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mega-menu__group {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--black);
  margin: 0;
}

.mega-menu__group a,
.mega-menu__tab-title a {
  color: inherit;
  text-decoration: none;
}

.mega-menu__group a:hover,
.mega-menu__group a:focus-visible,
.mega-menu__tab-title a:hover,
.mega-menu__tab-title a:focus-visible {
  color: inherit;
}

.mega-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mega-menu__links li + li {
  margin-top: 8px;
}

.mega-menu__links a {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  display: block;
  transition: color 0.15s ease;
}

.mega-menu__links a:hover,
.mega-menu__links a:focus-visible {
  color: var(--blue);
}

/* Standalone heading-level links (Resources: About us, Careers) */
.mega-menu__standalone-link {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--black);
  text-decoration: none;
  display: block;
  transition: color 0.15s ease;
}

.mega-menu__standalone-link:hover,
.mega-menu__standalone-link:focus-visible {
  color: var(--blue);
}

/* ── Blog / resource card ── */
.mega-menu__card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.mega-menu__card-img {
  width: 100%;
  height: 190px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--light-grey);
}

.mega-menu__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mega-menu__card-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
  margin-top: 12px;
  padding: 0 8px;
}

.mega-menu__card-excerpt {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
  padding: 0 8px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mega-menu__card-btn {
  position: absolute;
  right: 19px;
  top: 148px;
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--black);
  transition: background-color 0.15s ease;
}

.mega-menu__card-btn img{
  width: 12px;
}

.mega-menu__card-btn:hover {
  background: var(--light-grey);
}

/* ── Industries: tabbed panel ── */

.mega-menu__tab-nav {
  width: 328px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--grey);
  padding: 20px 0;
}

.mega-menu__tab-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 14px 9px 20px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-transform: capitalize;
  text-align: left;
  background: none;
  border: none;
  border-right: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mega-menu__tab-btn:hover {
  background: var(--light-grey);
}

.mega-menu__tab-btn.is-active {
  background: var(--light-grey);
  border-right-color: var(--orange);
}

.mega-menu__tab-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.mega-menu__tab-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 14px 9px 20px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-transform: capitalize;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.mega-menu__tab-link:hover,
.mega-menu__tab-link:focus-visible {
  background: var(--accent-blue);
}

.mega-menu__tab-panels {
  flex: 1;
  min-width: 0;
  min-height: 300px;
}

.mega-menu__tab-panel {
  display: none;
  flex-direction: column;
  gap: 30px;
  padding: 24px 0 24px 40px;
  height: 100%;
}

.mega-menu__tab-panel.is-active {
  display: flex;
}

#ind-tab-mod-logistics {
  padding-bottom: 0;
}

#ind-tab-mod-logistics .mega-menu__bottom-bar {
  width: calc(100% + 368px);
  margin-left: -368px;
  margin-right: 0;
}

.mega-menu__tab-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--blue);
  text-transform: capitalize;
  margin: 0;
}

.mega-menu__tab-cols {
  display: flex;
  gap: 40px;
  flex: 1;
}

.mega-menu__tab-col {
  width: 268px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Case study card inside Industries tab */
.mega-menu__case-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  padding: 12px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.mega-menu__case-card-img {
  width: 100%;
  height: 193px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--light-grey);
  flex-shrink: 0;
}

.mega-menu__case-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mega-menu__case-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.mega-menu__case-card-location {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
}

  .mega-menu__case-card-location img {
    width: 16px;
    flex-shrink: 0;
  }

.mega-menu__case-card-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.mega-menu__case-card-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

.mega-menu__case-card-btn {
  position: absolute;
  right: 19px;
  top: 148px;
  width: 48px;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--black);
  transition: background-color 0.15s ease;
}

.mega-menu__case-card-btn img{
  width: 12px;
}

.mega-menu__case-card-btn:hover {
  background: var(--light-grey);
}

/* Bottom CTA bar — full-width, grey bg (Industries only) */
.mega-menu__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  background: var(--grey);
  min-height: 96px;
  flex-shrink: 0;
}

.mega-menu__bottom-bar p {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: var(--black);
  letter-spacing: 0.5px;
  margin: 0;
}

/* Technologies: CTA row sits only under central columns (before promo) */
#megamenu-technologies .mega-menu__bottom-bar {
  width: min(984px, calc(100% - 200px));
  margin-left: max(20px, calc((100% - 1288px) / 2));
  margin-right: 0;
}

/* Hidden on mobile/tablet */
@media (max-width: 1023px) {
  .mega-menu {
    display: none;
  }
}


/* ──────────────────────────────────────────────────────────────
   4b. MEGA-MENU EXTENSIONS
   (Industries Logistics tab · Technologies · Products)
   ────────────────────────────────────────────────────────────── */

/* Industries — sidebar body fills full height when no footer present */
.mega-menu__sidebar-body--full {
  flex: 1;
  padding-bottom: 24px;
}

.mega-menu__tab-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  position: relative;
  z-index: 0;
  text-decoration: none;
  color: var(--black);
  transition: color 0.15s ease;
}

.mega-menu__tab-item::before {
  content: "";
  position: absolute;
  inset: -8px -20px;
  background-color: var(--accent-blue);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.15s ease;
}

.mega-menu__tab-item:hover,
.mega-menu__tab-item:focus-visible {
  color: var(--black) !important;
}

.mega-menu__tab-item:hover::before,
.mega-menu__tab-item:focus-visible::before {
  opacity: 1;
}

.mega-menu__tab-item__title {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  font-style: normal;
}

.mega-menu__tab-item__desc {
  display: block;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
}

.mega-menu__mod-link {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--black);
  text-decoration: none;
  margin-bottom: 10px;
}

.mega-menu__mod-link:hover,
.mega-menu__mod-link:focus-visible {
  color: var(--black);
}

.mega-menu__mod-link--title {
  font-size: 18px;
  line-height: 24px;
  color: var(--blue);
  text-transform: capitalize;
}

.mega-menu__mod-link--title:hover,
.mega-menu__mod-link--title:focus-visible {
  color: var(--blue);
}

/* Technologies — link list with 14px gap between items */
.mega-menu__links--tech li + li {
  margin-top: 14px;
}

/* Technologies — promo image column */
.mega-menu__col--promo {
  width: 268px;
  flex-shrink: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-self: stretch;
  margin-top: -24px;
  margin-bottom: -30px;
}

/* Technologies: promo image/caption extend down to the bottom CTA row */
#megamenu-technologies .mega-menu__col--promo {
  margin-bottom: -126px;
}

.mega-menu__promo {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.mega-menu__promo-img {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.mega-menu__promo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.mega-menu__promo-img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--light-grey));
  opacity: 0.8;
  pointer-events: none;
}

.mega-menu__promo-caption {
  display: flex;
  align-items: center;
  background: var(--grey2);
  padding: 8px 20px 12px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  min-height: 96px;
  color: var(--black);
}

/* Products — plain headline links, 30px gap */
.mega-menu__col--products {
  gap: 30px;
}

.mega-menu__col--products > a {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--black);
  text-decoration: none;
  display: block;
  transition: color 0.15s ease;
}

.mega-menu__col--products > a:hover,
.mega-menu__col--products > a:focus-visible {
  color: var(--blue);
}


/* ============================================================
   5. MOBILE DRAWER NAV
   ============================================================ */

.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(360px, 100vw);
  background: var(--white);
  padding: 24px 24px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.mobile-drawer.is-open .mobile-drawer__panel {
  transform: translateX(0);
}

.mobile-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px -8px 24px auto;
  display: block;
  color: var(--black);
}

.drawer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-nav-item > a,
.drawer-nav-item > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--grey);
  cursor: pointer;
  text-align: left;
}

.drawer-accordion {
  display: none;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--grey);
}

.drawer-accordion.is-open {
  display: block;
}

.drawer-accordion a {
  display: block;
  padding: 8px 0 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
}

.drawer-accordion a:hover {
  color: var(--blue);
}

@media (max-width: 1023px) {
  .mobile-drawer {
    display: block;
  }
}

/* Hamburger button */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--black);
}

@media (max-width: 1023px) {
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ============================================================
   6. BUTTONS
   ============================================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  background-color: var(--orange);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
  background-color: var(--black);
}

.btn-primary:focus-visible {
  border: 1px solid var(--black);
  outline: none;
}

.btn-primary img {
  width: 16px;
  height: 16px;
}

.btn-primary span.icon{
  font-size: 10px;
  margin-left: 4px;
}

/* Full-width variant used in mobile drawer CTA */
.btn-primary--drawer {
  width: 100%;
  justify-content: center;
  margin-top: 32px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  background-color: var(--white);
  color: var(--black);
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.15s ease;
}

.btn-secondary:hover {
  border-color: var(--black);
  color: var(--black);
}

.btn-secondary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.btn-secondary img {
  width: 16px;
  height: 16px;
}


@media (max-width: 767px) {
  .btn-secondary {
    font-size: 14px;
    line-height: 20px;
    gap: 4px;
  }
}


/* ============================================================
   7. HERO SECTION
   ============================================================ */

.hero-section {
  position: relative;
  padding-top: 30px;
  padding-bottom: 40px;
  overflow: visible;
}

.hero-inner {
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-content {
  flex: 0 0 646px;
  max-width: 646px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--black);
  letter-spacing: 0.5px;
}

.hero-h1 {
  font-size: 50px;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: 0.5px;
  margin: 0;
}

.hero-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
  max-width: 646px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 0;
}

.hero-rating img {
  width: 127px;
  height: auto;
  display: block;
}

.hero-testimonials {
  flex: 0 0 760px;
  width: 760px;
  margin-right: calc((100vw - 1288px) / -2 - 24px);
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.hero-testimonials.splide {
  visibility: visible;
}

.hero-testimonials .splide__track {
  overflow: hidden;
}

.hero-testimonials .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-testimonials .splide__slide {
  flex: 0 0 424px;
  width: 424px;
  display: flex;
  align-items: stretch;
}

.hero-testimonials .splide__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1279px) {
  body {    
    padding-top: calc(12px + 68px + 34px);
  }
  .hero-section {
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero-inner {
    flex-wrap: wrap;
    gap: 40px;
  }
  .hero-content {
    flex: 1 1 100%;
    max-width: 100%;
    gap: 20px;
  }
  .hero-testimonials {
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin: 0 -20px;
    padding-left: 20px;
  }
}

@media (max-width: 767px) {
  .hero-inner {
    gap: 24px;
  }

  .hero-h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .hero-body {
    font-size: 16px;
    line-height: 24px;
  }

  .hero-ctas{
    column-gap: 8px;
    row-gap: 20px;
  }

  .hero-rating{
    width: 100%;
    padding: 10px 0;
  }
}


/* ============================================================
   8. TESTIMONIAL CARDS
   ============================================================ */

.testimonials-track {
  display: flex;
  gap: 20px;
  width: 100%;
  animation: none;
}

.testimonial-card {
  flex: 0 0 424px;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 306px;
  transition: opacity 0.35s ease;
  user-select: none;
}

.hero-testimonials .splide__slide .testimonial-card {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.hero-testimonials .splide__slide.is-active .testimonial-card {
  opacity: 1;
}

.testimonial-stars {
  display: flex;
  gap: 5px;
  margin-bottom: 24px;
}

.testimonial-stars img {
  width: 16px;
  height: 16px;
}

.testimonial-quote {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0 0 24px;
  flex: 1;
}

.testimonial-quote p{
  margin: 0;
}

.testimonial-author-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-avatar {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-icon);
  background-color: var(--light-grey);
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: capitalize;
  color: var(--black);
  margin: 0;
}

.testimonial-role {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

@media (max-width: 767px) {
  .hero-testimonials {
    display: block;
    width: 100%;
  }

  .testimonials-track {
    gap: 16px;
    animation: none;
  }

  .hero-testimonials .splide__slide {
    flex: 0 0 288px;
    width: 288px;
  }

  .testimonial-card {
    padding: 20px;
    flex: 0 0 calc(100vw - 40px);
    min-height: unset;
    gap: 0;
  }

  .testimonial-quote{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
  }

  .testimonial-stars {
    margin-bottom: 16px;
  }
}


/* ============================================================
   9. MAIN BANNER (SOCIAL PROOF)
   ============================================================ */

.main-banner {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 67px 64px;
  background: var(--black);
}

.main-banner__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.main-banner__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 313px;
  text-align: center;
}

  .main-banner__item a{
    display: block;
    height: 100%;
    width: 100%;
  }

.main-banner__value {
  margin: 0;
  font-size: 50px;
  font-weight: 500;
  line-height: 56px;
  color: var(--white);
}

.main-banner__label {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
}

.main-banner__clutch {
  max-height: 94px;
  height: auto;
  display: inline-block;
}

.banner-mobile {
  display: none;
}

@media (max-width: 1279px) {
  .main-banner__value {
    font-size: 52px;
    line-height: 60px;
  }
  .main-banner__label {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 1023px) {
  .main-banner {
    padding: 67px 64px;
  }
  .main-banner__grid {
    flex-wrap: wrap;
  }
  .main-banner__item {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  .main-banner {
    padding: 12px;
  }
  .main-banner__grid {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 10px;
  }
  .main-banner__item {
    flex: 1 1 calc((100% - 40px) / 3);
    max-width: none;
    padding: 12px 0;
  }
  .main-banner__item:nth-child(4) {
    flex: 0 0 100%;
    padding: 0;
  }
  .main-banner__value {
    font-size: 28px;
    line-height: 33px;
  }
  .main-banner__label {
    font-size: 14px;
    line-height: 20px;
  }
  .banner-desktop {
    display: none;
  }
  .banner-mobile {
    display: block;
  }
  .main-banner__clutch{
    max-width: 100%;
  }
}


/* ============================================================
   UTILITIES
   ============================================================ */

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}


/* ============================================================
   9. CLIENT LOGOS STRIP
   ============================================================ */

.logos-section {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 70px 24px;
  box-sizing: border-box;
}

.logos-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 100%;
  width: max-content;
}

.logos-strip li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 16px;
  flex-shrink: 0;
}

.logos-strip img {
  max-height: 50px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 1023px) {
  .logos-strip {
    justify-content: flex-start;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .logos-strip img {
    max-height: 36px;
    max-width: 120px;
  }

  .logos-section {
    padding: 60px 0;
  }
}


/* ============================================================
   10. SHOWCASE IMAGE
   ============================================================ */

.showcase-section {
  padding: 0 64px 80px;
  margin-top: 20px;
}

.showcase-image {
  width: 100%;
  aspect-ratio: 1312 / 600;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

@media (max-width: 1023px) {
  .showcase-section {
    padding: 0 32px 60px;
  }
  .showcase-image {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }
}

@media (max-width: 767px) {
  .showcase-section {
    padding: 0 20px 40px;
  }
  .showcase-image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }
}


/* ============================================================
   11. OVERLAY BACKDROP (mega-menu)
   ============================================================ */

.menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 98;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.menu-backdrop.is-visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================
   12. UTILITY / HELPER
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Splide screen-reader helper should stay visually hidden */
.splide__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icon circle (service columns in mega-menu) */
.icon-circle {
  width: 58px;
  height: 58px;
  background: var(--icon-circle-bg);
  border-radius: var(--radius-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 20px; /* replaces Tailwind mb-5 */
}

.icon-circle img,
.icon-circle svg {
  width: 18px;
  height: 18px;
  filter: grayscale(1) brightness(0.1);
}

/* Focus ring global reset (rely on :focus-visible per-component) */
:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================
   13. FOOTER
   ============================================================ */

/* Footer-specific tokens — extend :root */
:root {
  --gradient-footer:              linear-gradient(213deg, #232528 28.66%, #F93822 197.69%);
  --footer-link:            rgba(255, 255, 255, 0.60);
  --footer-divider:         rgba(255, 255, 255, 0.12);
  --footer-icon-bg:         rgba(255, 255, 255, 0.10);
  --footer-icon-bg-hover:   rgba(255, 255, 255, 0.20);
  --footer-copyright:       rgba(0, 0, 0, 0.45);

  /* Brand name overlap: how much of the giant text is hidden under .footer-meta.
     ⚠ Verify with Figma (get_node_attributes on node 5187-26009).            */
  --footer-brand-overlap:         72px;
}


/* ────────────────────────────────────────────────────────────
   LAYER 1 — Dark gradient section (.footer-dark)
   ──────────────────────────────────────────────────────────── */

.footer-dark {
  position: relative;
  z-index: 1;
  background: var(--gradient-footer);
  color: var(--white);
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 64px 0 64px;
}

/* ── Top Row: 4-column nav grid ── */

.footer-nav-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 80px;
}

.footer-nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
  text-align: left;
  cursor: default;        /* not interactive on desktop */
}

.footer-chevron {
  display: none;          /* hidden on desktop */
  width: 10px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.footer-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;          /* always visible on desktop */
  flex-direction: column;
  gap: 12px;
}

.footer-nav-links a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--footer-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-nav-links a:hover {
  color: var(--white);
}

.footer-nav-links a:focus-visible {
  color: var(--white);
  outline: 2px solid var(--white);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Section divider ── */

.footer-divider {
  border: none;
  border-top: 1px solid var(--footer-divider);
  margin: 0;
}

/* ── Bottom Row: Contact · Address · Social ── */

.footer-nav-bottom {
  display: grid;
  grid-template-columns: 313px 1fr 313px;
  gap: 20px;
  padding-bottom: 30px;
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--footer-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-contact-link:hover {
  color: var(--white);
}

.footer-image-wrapper{
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-contact-link img {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

.footer-contact-link img.email-icon {
  width: 18px;
  height: 18px;
}

.footer-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--footer-link);
  margin: 0;
}

.address-item{
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-address img {
  width: 24px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Social icons (right-aligned) ── */

.footer-right-col{
  padding-top: 31px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: center;
  margin-bottom: 20px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: 0.15s ease;
  text-decoration: none;
}

.footer-social-link:hover {
  opacity: 0.8;
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.footer-social-link img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

/*  */

.footer-ratings{
  display: flex;
  align-items: center;
  gap: 32px;
}

.rating-item{
  transition: .2s ease;
}

a.rating-item:hover {
  opacity: 0.8;
}

.rating-item img {
  height: 32px;
}

.footer-logo-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 60px;
}

.footer-brand-logo {
  width: 100%;
}

.footer-meta {
  position: relative;
  z-index: 2;
  background: var(--white);
}

.footer-meta-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-meta-copy {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

.footer-meta-links {
  display: flex;
  gap: 24px;
}

.footer-meta-links a {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  opacity: 0.8;
  transition: 0.15s ease;
}

.footer-meta-links a:hover {
  opacity: 1;
}

.scroll-top-btn {
  position: absolute;
  top: -27.5px;
  right: 233px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0px 1px 7px 0px var(--shadow-scroll-top-btn);
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.25s ease;
  /* Hidden until user scrolls down */
  opacity: 0;
  pointer-events: none;
}

.scroll-top-btn img {
  width: 37px;
  height: 37px;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top-btn:hover {
  transform: translateY(-3px);
}

.scroll-top-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .scroll-top-btn {
    right: 20px;
    top: -27.5px;
  }
}

/* ────────────────────────────────────────────────────────────
   TABLET  768px – 1023px
   ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-inner {
    padding: 60px 32px 40px;
  }

  .footer-nav-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
    padding-bottom: 48px;
  }

  .footer-nav-bottom {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 0;
  }

  .footer-brand-wrap {
    padding: 40px 32px 0;
  }

  .footer-meta-inner {
    padding: 20px 32px 28px;
  }
}


/* ────────────────────────────────────────────────────────────
   MOBILE  < 768px
   ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --footer-brand-overlap: 40px;
  }

  .scroll-top-btn {
    display: none !important;
  }

  .footer-inner {
    padding: 40px 20px 0 20px;
  }

  /* Accordion: groups stacked vertically */
  .footer-nav-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 0;
  }

  .footer-nav-heading {
    margin: 0;
    cursor: pointer;
    justify-content: start;
    gap: 10px;
  }

  .footer-chevron {
    display: block;
  }

  .footer-nav-group.is-open .footer-chevron {
    transform: rotate(180deg);
  }

  /* Links: hidden until group is opened */
  .footer-nav-links {
    display: none;
    padding: 16px 0;
  }

  .footer-nav-group.is-open .footer-nav-links {
    display: flex;
  }

  .footer-divider {
    margin-top: 32px;
  }

  /* Bottom row: stacked */

  .footer-mini-col .footer-nav-heading{
    margin-bottom: 8px;
  }

  .footer-nav-bottom {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 0;
  }

  .footer-address{
    gap: 12px;
  }

  .footer-social {
    margin-left: 0;
    margin-bottom: 12px;
  }

  .footer-logo-wrap {
    padding-top: 55px;
    margin: 0 -8px;
  }

  /* Meta bar: stacked */
  .footer-meta-inner {
    flex-direction: column;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }

  .footer-meta-links {
    gap: 16px;
    justify-content: space-between;
    width: 100%;
  }

  .footer-meta-copy{
    font-size: 12px;
  }
}


/* ============================================================
  2a. NAV LINK — ANIMATED UNDERLINE
  Slide-in orange underline on hover / focus.
   Uses background-image trick so it works inside flex containers.
   ============================================================ */

.nav-link {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 3px;
  /* Extend the existing transition from §3 */
  transition: background-size 0.22s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  background-size: 100% 2px;
}

/*  */

.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 10px;
  padding: 1px 1px 1px 19px;
  background-color: var(--orange);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: 73px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: 3px solid var(--orange);
  transition: background-color 0.15s ease;
}

.btn-nav-cta:hover {
  background-color: var(--white);
  color: var(--black);
}

.btn-nav-cta:focus-visible {
  outline: 1px solid var(--black);
  color: var(--black);
}

.btn-nav-cta__text {
  flex-shrink: 0;
}

/* White circle containing the arrow icon */
.btn-nav-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--white);
  border-radius: 20px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.btn-nav-cta__icon img {
  width: 10px;
  height: 10px;
}

.btn-nav-cta__icon span.icon {
  font-size: 10px;
  color: var(--black);
}

/* Icon-only small CTA button (mobile variant of btn-nav-cta) */
.btn-cta-sm {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-color: var(--orange);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn-cta-sm img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  display: block;
}

.btn-cta-sm:hover {
  background-color: var(--black);
}

.btn-cta-sm:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .site-header {    
    width: calc(100% - 16px);
    top: 12px;
    padding: 10px 8px 10px 20px;
    border-radius: 40px;
    height: 68px;
  }

  .site-header__logo {
    width: auto;
    height: 34px;
  }

  .site-header__logo img {
    height: 14px;
  }

  .site-header .btn-nav-cta{
    margin-left: auto;
  }

  /*  */

  .btn-nav-cta:not(.mobile-same-as-desktop) {
    padding: 1px 1px 1px 10px;
    font-size: 12px;
    line-height: 18x;
    border-width: 2px;
    gap: 6px;
  }

  .btn-nav-cta:not(.mobile-same-as-desktop) .btn-nav-cta__icon {
    width: 28px;
    height: 28px;
  }

  .btn-nav-cta:not(.mobile-same-as-desktop) .btn-nav-cta__icon img {
    width: 8px;
    height: 8px;
  }

  .hamburger {
    width: 48px;
    height: 48px;
    padding: 2px;
  }

  .hamburger__icon {
    width: 16px;
    height: 16px;
  }

  .hamburger__icon--close{
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 1023px) {
  body.mobile-menu-open .site-header {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 10px 12px;
  }
}

/* ── Secondary "Get in touch" used inside mega-menu panels ── */
.btn-menu-cta {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 4px 3px 19px;
  background-color: var(--white);
  border: 1px solid var(--grey);
  color: var(--black);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: 73px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.15s ease;
}

.btn-menu-cta:hover {
  background-color: var(--orange);
  border-color: var(--white);
  box-shadow: 0 0 0 1px var(--orange);
  color: var(--white);
}

.btn-menu-cta:focus-visible {
  outline: none;
  border-color: var(--black);
}

/* Orange circle containing the arrow icon */
.btn-menu-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--orange);
  border-radius: 20px;
  flex-shrink: 0;
  color: var(--white);
}

.btn-menu-cta__icon img {
  width: 10px;
  height: 10px;
  filter: brightness(0) invert(1);
}


/* ============================================================
   4c. LEGACY COLUMN VARIANTS — removed (icons removed in v3.0)
   Industries tabs handled above in §4.
   ============================================================ */


/* ============================================================
   14. HAMBURGER ICON TOGGLE
   Two SVGs inside the button. CSS drives visibility via
   aria-expanded on the parent button.
   ============================================================ */

.hamburger__icon--close {
  display: none;
}

.hamburger[aria-expanded="true"] .hamburger__icon--open {
  display: none;
}

.hamburger[aria-expanded="true"] .hamburger__icon--close {
  display: block;
}


/* ============================================================
   15. MOBILE MENU (full-screen below header)
   Replaces the old .mobile-drawer right-slide pattern.
   Top position is driven by --mobile-menu-top, set by nav.js
   each time the menu opens (= header's getBoundingClientRect().bottom).
   ============================================================ */

/* Hidden on desktop — hamburger is never shown ≥ 1024 px so the
   menu can never be triggered, but we explicitly hide it too. */
.mobile-menu {
  position: fixed;
  top: calc(var(--mobile-menu-top, 90px) - 12px);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  z-index: 150;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--light-grey);
  padding-top: 12px;
}

@media (max-width: 1023px) {
  .mobile-menu {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s 0.22s;
  }

  .mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease;
  }
}

/* ── Scrollable content ── */
.mobile-menu__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Nav list ── */
.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Individual items ── */

/* Plain <a> link row */
.mobile-nav-link {
  display: block;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mobile-nav-link:hover {
  color: var(--blue);
}

.mobile-nav-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* ── Accordion trigger ── */
.mobile-nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.mobile-nav-trigger:hover {
  color: var(--blue);
}

.mobile-nav-trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.mobile-nav-trigger__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--black);
  transition: transform 0.2s ease;
}

.mobile-nav-trigger[aria-expanded="true"] .mobile-nav-trigger__chevron {
  transform: rotate(180deg);
}

/* ── Accordion panel (collapsed by default) ── */
.mobile-accordion {
  display: none;
  padding: 4px 20px 16px;
}

.mobile-accordion.is-open {
  display: block;
}

/* ── 2-column link grid — strictly NO dividers ── */
.mobile-accordion__grid {
  column-count: 2;
}

.mobile-accordion__grid a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  text-decoration: none;
  margin-bottom: 16px;
  break-inside: avoid;
  transition: color 0.15s ease;
}

.mobile-accordion__grid a.mobile-accordion__parent {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 16px;
  break-inside: avoid;
}

.mobile-accordion__grid a.mobile-accordion__child {
  padding-left: 0;
}

.mobile-accordion__grid a:hover {
  color: var(--blue);
}

.mobile-accordion__grid a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ── Social row — sticky bottom, outside the scroll container ── */
.mobile-menu__social {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 14px 20px 27px;
  background-color: var(--white);
}

.mobile-menu__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.mobile-menu__social-link:hover {
  opacity: 0.75;
}

.mobile-menu__social-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.mobile-menu__social-link img {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) saturate(100%);
}


/* ============================================================
   B5. DEVELOPERS SLIDER
   Section: "Meet our Developers"
   Desktop: fixedWidth 424px, 3 cards visible, gap 20px.
   Tablet:  fixedWidth 380px, gap 16px.
   Mobile:  fixedWidth 335px, 1 card visible, gap 12px.
   ============================================================ */

/* ── Section wrapper ── */
.dev-slider {
  background-color: var(--light-grey);
  padding: 80px 0;
}

/* ── Centred inner container ── */
.dev-slider__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 45px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#developers-splide {
  width: auto;
  margin-left: 0;
  margin-right: calc(50% - 50vw);
}

/* ── Header row: heading + pagination ── */
.dev-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dev-slider__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

/* Splide structural styles (required when Splide CSS bundle is not loaded) */
.dev-slider .splide {
  visibility: visible;
}

.dev-slider .splide__track {
  overflow: visible;
}

.dev-slider .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dev-slider .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ── Prev / Next button group ── */
.dev-slider__pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.dev-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey);
  background-color: var(--white);
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.dev-slider__btn img {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Next: filled black */
.dev-slider__btn--next {
  background-color: var(--black);
  border-color: var(--black);
}

.dev-slider__btn--next img {
  filter: brightness(0) invert(1);
}

.dev-slider__btn:hover {
  border-color: var(--black);
}

.dev-slider__btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}


/* ── Developer card ── */
.dev-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--white);
  border-radius: var(--radius-card);
  padding: 16px 16px 20px;
  height: 100%;
  box-sizing: border-box;
}

/* ── Photo area ── */
.dev-card__img {
  position: relative;
  height: 246px;
  background-color: var(--accent-blue);
  border-radius: var(--radius-panel);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 12px;
}

.dev-card__photo {
  display: block;
  width: 65%;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  object-position: bottom center;
}

/* ── Link button (top-right of photo) ── */
.dev-card__link-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-pill);
  transition: 0.2s ease;
  flex-shrink: 0;
}

.dev-card__link-btn img {
  display: block;
  width: 10px;
  height: 10px;
}

.dev-card__link-btn:hover {
  border-color: var(--black);
}

.dev-card__link-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Card body ── */
.dev-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Name + badge row ── */
.dev-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--black);
}

.dev-card__name-block {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dev-card__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-transform: capitalize;
  color: var(--black);
  margin: 0;
}

.dev-card__role {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
}

/* ── Year badge ── */
.dev-card__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 7px;
  border: 1px solid var(--grey);
  border-radius: 12px;
  width: 74px;
  flex-shrink: 0;
  white-space: nowrap;
}

.dev-card__badge-value {
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: var(--black);
}

.dev-card__badge-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--black);
}

/* ── Availability tags ── */
.dev-card__availability {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dev-card__availability li {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--light-grey);
  border-radius: 50px;
  padding: 8px 16px 8px 12px;
}

.dev-card__availability li span {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  white-space: nowrap;
}

.dev-card__check-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Bio text ── */
.dev-card__bio {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ── Skill tags ── */
.dev-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dev-card__tag {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  background-color: var(--light-grey);
  border-radius: 50px;
  padding: 8px 16px;
  white-space: nowrap;
}


/* ── Tablet (768px – 1279px) ── */
@media (max-width: 1279px) {
  .dev-slider__inner {
    padding: 0 32px;
  }

  .dev-slider__title {
    font-size: 30px;
  }
}


/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  .dev-slider {
    padding: 60px 0;
  }

  .dev-slider__inner {
    padding: 0 20px;
    gap: 20px;
  }

  .dev-slider__title {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  /* Card: tighter padding on mobile */
  .dev-card {
    padding: 12px;
    gap: 12px;
  }

  /* Name: H3 mob scale */
  .dev-card__name {
    font-size: 18px;
    line-height: 24px;
  }

  /* Role: caption scale */
  .dev-card__role {
    font-size: 14px;
    line-height: 20px;
  }

  /* Year badge: compact */
  .dev-card__badge {
    padding: 8px 16px;
    width: auto;
  }

  .dev-card__badge-value {
    font-size: 18px;
    line-height: 24px;
  }

  /* Availability: smaller icon + text */
  .dev-card__check-icon {
    width: 12px;
    height: 12px;
  }

  .dev-card__availability li span {
    font-size: 12px;
    line-height: 18px;
  }

  /* Skill tags: caption-mob scale */
  .dev-card__tag {
    font-size: 12px;
    line-height: 18px;
  }

  .dev-card__photo {
    width: 100%;
  }
}


/* ============================================================
   B5. WHY TWINCORE
   Two-column: copy + photo (left) | scrollable card list (right).
   ============================================================ */

.why-twincore {
  background-color: var(--white);
  padding: 0;
}

.why-twincore__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  gap: 40px;
  align-items: center;
}

/* ── Left column ── */

.why-twincore__left {
  flex: 1 1 51%;
  max-width: 646px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 80px;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.why-twincore__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why-twincore__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 1px;
  color: var(--black);
  margin: 0;
}

.why-twincore__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
}

.why-twincore__image-wrap {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
}

.why-twincore__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.why-twincore__image-wrap--mobile {
  display: none;
}

/* ── Right column — scrollable, no visible scrollbar ── */

.why-twincore__cards {
  flex: 1 1 49%;
  max-width: 626px;
  min-width: 0;
  height: auto;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 80px;
  padding-bottom: 80px;
  box-sizing: border-box;
  scroll-padding-top: 80px;
  scroll-padding-bottom: 80px;
  max-height: 800px;
}

.why-twincore__mobile-slider-header {
  display: none;
}

.why-twincore__splide {
  width: 100%;
}

.why-twincore__splide .splide__track {
  overflow: visible;
}

.why-twincore__splide .splide__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-twincore__splide .splide__slide {
  flex: 0 0 auto;
}

.why-twincore__cards::-webkit-scrollbar {
  display: none;
}

/* ── Why card ── */

.why-card {
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  user-select: none;
}

.why-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.why-card__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-card__icon .icon {
  display: block;
  font-size: 16px;
  color: var(--orange);
}

.why-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  margin: 0;
}

.why-card__body {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

/* ── Responsive: tablet ── */

@media (max-width: 1279px) {
  .why-twincore__cards {
    max-height: unset;
  }
}

/* ── Responsive: tablet ── */

@media (max-width: 1023px) {
  .why-twincore__inner {
    flex-direction: column;
    padding: 60px 40px;
    gap: 32px;
  }

  .why-twincore__left {
    flex: none;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .why-twincore__cards {
    flex: none;
    width: 100%;
    height: auto;
    overflow-y: visible;
    padding-top: 0;
    padding-bottom: 0;
    scroll-padding-top: 0;
    scroll-padding-bottom: 0;
  }
}

/* ── Responsive: mobile ── */

@media (max-width: 767px) {
  .why-twincore__inner {
    padding: 60px 20px;
    gap: 20px;
  }

  .why-twincore__left {
    gap: 24px;
  }

  .why-twincore__heading {
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.5px;
  }

  .why-twincore__copy {
    gap: 20px;
  }

  .why-twincore__image-wrap--desktop {
    display: none;
  }

  .why-twincore__image-wrap--mobile {
    display: block;

  }

  .why-twincore__cards {
    overflow: visible;
    gap: 20px;
  }

  .why-twincore__mobile-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .why-twincore__mobile-pagination {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-weight: 500;
    line-height: 1;
  }

  .why-twincore__mobile-pagination-current {
    font-size: 18px;
    color: var(--black);
  }

  .why-twincore__mobile-pagination-total {
    font-size: 18px;
    color: var(--grey3);
  }

  .why-twincore__splide {
    margin-right: calc(50% - 50vw);
  }

  .why-twincore__splide .splide__list {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  .why-twincore__splide .splide__slide {
    display: flex;
    align-items: stretch;
    height: auto;
  }

  .why-card {
    width: 256px;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    gap: 12px;
  }

  .why-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .why-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .why-twincore__btn--prev:disabled,
  .why-twincore__btn--next:disabled {
    opacity: 0.55;
    cursor: default;
  }
}


/* ============================================================
   B5. APPROACH — "What you get when you hire TwinCore"
   Desktop (≥1280px): two-column flex + Splide card slider (bleeds right)
   Tablet  (768–1279px): two-column, narrower text col, slider clips
   Mobile  (<768px): single column, BENEFITS tag header + accordion
   ============================================================ */

/* ── Section shell ── */
.approach {
  padding: 80px 0;
  background-color: var(--light-grey);
}

.approach__inner {
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ── Left text column ── */
.approach__text {
  flex: 0 0 404px;
  width: 404px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.approach__text-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approach__title-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Mobile-only BENEFITS tag — hidden on desktop/tablet */
.approach__tag {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

.approach__tag .icon {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--orange);
}

.approach__tag .approach__tag-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--black);
  opacity: 0.9;
  text-transform: uppercase;
  margin-top: 2px;
}

.approach__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.approach__desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0;
}

/* ── Prev / Next navigation (desktop/tablet only) ── */
.approach__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.approach__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.approach__btn:hover {
  border-color: var(--black);
}

.approach__btn:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.approach__btn:disabled,
.approach__btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.approach__btn img {
  width: 8px;
  height: 8px;
  display: block;
  pointer-events: none;
}

/* ── Desktop Splide slider wrapper ── */
.approach__slider-wrap {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  /* Bleed right to the viewport edge, compensating for container padding */
  margin-right: calc((100vw - 1288px) / -2 - 20px);
}

.approach__slider-wrap .splide {
  visibility: visible;
}

.approach__slider-wrap .splide__track {
  overflow: hidden;
}

.approach__slider-wrap .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approach__slider-wrap .splide__slide {
  flex: 0 0 424px;
  width: 424px;
  display: flex;
  align-items: stretch;
}

/* ── Approach card (desktop slider) ── */
.approach-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--white);
  border-radius: var(--radius-card);
  width: 100%;
}

.approach-card__icon-wrap {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.approach-card__icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 14px;
}

/* Smaller icon container used inside accordion triggers */
.approach-card__icon-wrap--sm {
  width: 74px;
  height: 74px;
  border-radius: 10px;
}

.approach-card__icon-wrap--sm img {
  width: 100%;
  height: 100%;
}

.approach-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approach-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.approach-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--black);
  margin: 0;
}

/* ── Mobile accordion (hidden on desktop/tablet) ── */
.approach__accordion {
  display: none;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.approach__accordion-item {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.approach__accordion-trigger {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.approach__accordion-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.approach__accordion-trigger:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  border-radius: var(--radius-card);
}

.approach__accordion-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--black);
  text-transform: capitalize;
}

.approach__accordion-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-pill);
  transition: transform 0.25s ease;
}

.approach__accordion-icon img {
  width: 12px;
  height: 12px;
  display: block;
}

/* Rotate + to × when expanded */
.approach__accordion-trigger[aria-expanded="true"] .approach__accordion-icon {
  transform: rotate(45deg);
}

.approach__accordion-body {
  padding: 0 20px 20px;
}

.approach__accordion-body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--black);
  margin: 0;
}

/* ── Tablet (768–1279px) ── */
@media (max-width: 1279px) {
  .approach__text {
    flex: 0 0 320px;
    width: 320px;
  }

  .approach__title {
    font-size: 28px;
    letter-spacing: 0.28px;
  }

  /* Stop the right bleed — let slider clip at container edge */
  .approach__slider-wrap {
    margin-right: 0;
  }

  .approach__slider-wrap .splide__slide {
    flex: 0 0 380px;
    width: 380px;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .approach {
    padding: 60px 0;
  }

  .approach__inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .approach__text {
    flex: none;
    width: 100%;
    gap: 12px;
    align-items: center;
    text-align: center;
  }

  .approach__tag {
    display: flex;
  }

  .approach__title {
    font-size: 24px;
    letter-spacing: 0.24px;
    text-align: center;
  }

  .approach__desc {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
  }

  /* Hide desktop slider and nav on mobile */
  .approach__nav {
    display: none;
  }

  .approach__slider-wrap {
    display: none;
  }

  /* Show accordion on mobile */
  .approach__accordion {
    display: flex;
  }
}

/* ============================================================
   B6. CASES SLIDER
   Section: "Our .NET Projects"
   Desktop: fixedWidth 1090px, landscape cards (content left + image right), gap 20px.
   Tablet:  fixedWidth 680px, gap 16px.
   Mobile:  fixedWidth 335px, portrait cards (image top + content below), gap 12px.
   ============================================================ */

/* Image panel gradient — dark navy at 30% opacity overlaid on accent-blue fallback */
:root {
  --case-img-bg: linear-gradient(124deg, rgba(0, 27, 54, 0.30) 11%, rgba(7, 36, 63, 0.30) 87%);
}

/* ── Section wrapper ── */
.cases-slider {
  background-color: var(--white);
  padding: 80px 0;
}

.cases-slider-transparent {
  background-color: transparent;
}

/* ── Centred inner container ── */
.cases-slider__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 45px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Splide root: bleed to viewport right edge (same pattern as dev-slider) */
#cases-splide {
  width: auto;
  margin-left: 0;
  margin-right: calc(50% - 50vw);
}

/* Splide structural overrides */
.cases-slider .splide {
  visibility: visible;
}

.cases-slider .splide__track {
  overflow: visible;
}

.cases-slider .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases-slider .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ── Header row: heading + pagination ── */
.cases-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cases-slider__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

/* ── Prev / Next button group ── */
.cases-slider__pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cases-slider__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey);
  background-color: var(--white);
  cursor: pointer;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}

.cases-slider__btn .icon {
  font-size: 10px;
  color: var(--black);
}

/* Next: filled black */
.cases-slider__btn--next {
  background-color: var(--black);
  border-color: var(--black);
}

.cases-slider__btn--next .icon {
  color: var(--white);
}

.cases-slider__btn:hover {
  opacity: 0.8;
}

.cases-slider__btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Case card ── */
.case-card {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 40px;
  height: 450px;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  padding: 12px;
  box-sizing: border-box;
}

/* ── Content column (left on desktop) ── */
.case-card__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
}

/* Text block: location + title + description */
.case-card__text {
  flex: 1 0 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* ── Location row ── */
.case-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.case-card__location .icon {
  font-size: 18px;
  color: var(--orange);
  flex-shrink: 0;
}

.case-card__country {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--black);
}

/* ── Heading + description group ── */
.case-card__heading-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.case-card__title {
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.24px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.case-card__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
}

/* ── Metric pills (desktop: inline pill; mobile: box tile) ── */
.case-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.case-card__metric {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--light-grey);
  border-radius: 50px;
  padding: 8px 16px;
  white-space: nowrap;
}

.case-card__metric-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
}

.case-card__metric-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
}

/* ── Image column (right on desktop) ── */
.case-card__img {
  flex: 1 0 0;
  min-width: 0;
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.case-card__img img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-panel);
  object-fit: cover;
}

/* ── Card link button (diagonal arrow) ── */
.case-card__link-btn {
  position: absolute;
  bottom: 23px;
  right: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-pill);
  transition: 0.2s ease;
  flex-shrink: 0;
  z-index: 1;
}

.case-card__link-icon {
  font-size: 10px;
  color: var(--black);
  display: inline-block;
}

.case-card__link-btn:hover {
  border-color: var(--black);
}

.case-card__link-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── CTA button ── */
.cases-slider__cta-wrap {
  display: flex;
  justify-content: center;
}

/* ── Tablet (768px – 1279px) ── */
@media (max-width: 1279px) {
  .cases-slider__inner {
    padding: 0 32px;
  }

  .cases-slider__title {
    font-size: 30px;
  }
}


/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  .cases-slider {
    padding: 60px 0;
  }

  #cases-splide {
    margin-right: 0;
  }

  .cases-slider .splide__track {
    overflow: hidden;
  }

  .cases-slider .splide__list {
    align-items: flex-start !important;
  }

  .cases-slider .splide__slide {
    display: block !important;
    align-items: flex-start !important;
    height: auto !important;
  }

  .cases-slider__inner {
    padding: 0 20px;
    gap: 20px;
  }

  .cases-slider__title {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  /* Card: portrait layout */
  .case-card {
    flex-direction: column;
    height: auto;
    gap: 8px;
    padding: 12px;
    border: none;
  }

  /* Image panel: moves to top via order, fixed height */
  .case-card__img {
    order: -1;
    flex: none;
    height: 193px;
  }

  /* Content: adjusted spacing */
  .case-card__content {
    padding: 0;
    gap: 16px;
    height: auto;
    order: 0;
  }

  .case-card__text {
    flex: none;
    min-height: auto;
    overflow: visible;
    gap: 4px;
  }

  /* Country: regular weight on mobile */
  .case-card__country {
    font-weight: 400;
    line-height: 24px;
  }

  .case-card__heading-group {
    gap: 8px;
    overflow: visible;
  }

  .case-card__title {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    margin-top: 2px;
  }

  .case-card__desc {
    font-size: 14px;
    line-height: 20px;
  }

  /* Metrics: box tile layout (two tiles side-by-side, centered text) */
  .case-card__metrics {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .case-card__metric {
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 12px 7px;
    gap: 0;
    white-space: normal;
    text-align: center;
  }

  .case-card__metric-value {
    line-height: normal;
  }

  .case-card__metric-label {
    font-size: 12px;
    line-height: 18px;
  }

  /* Screenshots: centred and clipped within the 193px image panel */
  .case-card__screenshots {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .case-card__screenshot-image {
    width: 100%;
    height: 100%;
  }

  .case-card__screenshot--detail {
    width: 198px;
    height: 108px;
    left: 195.5px;
    top: 182.5px;
    border-radius: 8px;
    box-shadow: 2px 2px 17px rgba(0, 0, 0, 0.28);
  }

  /* Link button: pinned to bottom-right corner of image area */
  .case-card__link-btn {
    position: absolute;
    top: 149px;
    bottom: auto;
    right: 20px;
  }
}

.sm-yes, .sm-block, .sm-flex {
  display: none;
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
  .sm-no{
    display: none;
  }

  .sm-yes, .sm-block{
    display: block;
  }

  .sm-flex{
    display: flex;
  }
}


/* ============================================================
   B8. SOLUTIONS — "Hire .NET Professionals for Your Software Projects"
   Desktop (≥1024px): hero row (text left · image right)
                       + 3-card flex row:
                         Card 1 — featured, always expanded (626px)
                         Cards 2 & 3 — accordion, toggle via circular + button
   Tablet  (768–1023px): hero flex-row, cards column
   Mobile  (<768px): single-column hero; cards use CSS Grid for
                     [icon icon] / [title btn] / [body body] layout
   ============================================================ */

/* ── Section shell ── */
.solutions {
  padding: 80px 0;
}

.solutions__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 160px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Hero row: text block + team photo ── */
.solutions__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.solutions__text {
  flex: 0 0 auto;
  width: min(646px, 50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solutions__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.solutions__desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solutions__desc p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0;
}

.solutions__image-wrap {
  flex: 1;
  min-width: 0;
  height: 449px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.solutions__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Cards row ── */
.solutions__cards {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ── Base card ── */
.solution-card {
  background-color: var(--white);
  border-radius: var(--radius-card);
}

/* ── Icon circle ── */
.solution-card__icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-icon);
  background-color: var(--icon-circle-orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solution-card__icon-wrap .icon {
  font-size: 20px;
  color: var(--orange);
  display: block;
}

/* ── Open card (currently active) ── */
.solution-card--accordion.solution-card--open {
  flex: 0 0 626px;
  min-height: auto;
}

.solution-card--accordion.solution-card--open .solution-card__expand-btn {
  display: none;
}

.solution-card--accordion.solution-card--open .solution-card__body {
  display: flex;
  flex-direction: column;
}

.solution-card--accordion.solution-card--open .solution-card__body p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0 0 10px;
}

.solution-card--accordion.solution-card--open .solution-card__body p:last-child {
  margin-bottom: 0;
}

.solution-card--accordion.solution-card--open .solution-card__body ul {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.solution-card--accordion.solution-card--open .solution-card__body li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
}

/* ── Accordion cards (Cards 2 & 3) ── */
.solution-card--accordion {
  flex: 1;
  padding: 32px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.solution-card--accordion .solution-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

/* Body: hidden by default; appears above button when expanded */
.solution-card--accordion .solution-card__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
}

.solution-card--accordion .solution-card__body p {
  margin: 0;
}

/* Expand button: pushed to bottom of card via margin-top: auto */
.solution-card__expand-btn {
  margin-top: auto;
  align-self: flex-start;
  width: 48px;
  height: 48px;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.solution-card__expand-btn:hover {
  border-color: var(--orange);
}

.solution-card__expand-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.solution-card__expand-btn .icon-plus {
  font-size: 12px;
  color: var(--black);
  display: inline-block;
  transition: transform 0.25s ease;
}

/* Rotate + to × when expanded */
.solution-card__expand-btn[aria-expanded="true"] .icon-plus {
  transform: rotate(45deg);
}

@media (max-width: 1240px) {
  .solution-card--accordion.solution-card--open {
    flex: 0 0 420px;
  }
}

/* ── Tablet (768–1023px) ── */
@media (max-width: 1279px) {
  .solutions__inner {
    padding: 0 clamp(24px, 5vw, 64px);
  }

  .solutions__text {
    width: auto;
    flex: 1;
  }

  .solutions__image-wrap {
    height: 380px;
  }

  .solutions__cards {
    flex-direction: column;
    gap: 16px;
  }

  .solution-card--accordion.solution-card--open {
    flex: none;
    width: 100%;
  }

  .solution-card--accordion {
    flex: none;
    width: 100%;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .solutions {
    padding: 60px 0;
  }

  .solutions__inner {
    padding: 0 20px;
    gap: 20px;
  }

  /* Hero stacks to single column */
  .solutions__hero {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  /* dissolve wrapper so heading and desc become direct flex children of hero */
  .solutions__text {
    display: contents;
  }

  .solutions__heading {
    order: 1;
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .solutions__image-wrap {
    order: 2;
    flex: none;
    height: 240px;
  }

  .solutions__desc {
    order: 3;
  }

  .solutions__desc p {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  /* Cards stack full-width */
  .solutions__cards {
    flex-direction: column;
    gap: 20px;
  }

  /* Open card on mobile: flex layout (overrides grid), full-width */
  .solution-card--accordion.solution-card--open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: none;
    width: 100%;
    padding: 20px;
    min-height: auto;
    gap: 12px;
  }

  .solution-card--accordion.solution-card--open .solution-card__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    align-self: auto;
  }

  .solution-card--accordion.solution-card--open .solution-card__body p,
  .solution-card--accordion.solution-card--open .solution-card__body li {
    font-size: 14px;
    line-height: 20px;
  }

  /* Accordion cards: CSS Grid matches Figma mobile layout exactly
     Row 1: icon (spans 2 cols)
     Row 2: title (flex-1) | expand button
     Row 3: body text (spans 2 cols, visible when expanded) */
  .solution-card--accordion {
    flex: none;
    width: 100%;
    padding: 20px;
    min-height: auto;
    display: grid;
    grid-template-areas:
      "icon  icon"
      "title btn"
      "body  body";
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
  }

  .solution-card--accordion .solution-card__icon-wrap {
    grid-area: icon;
    align-self: start;
  }

  .solution-card--accordion .solution-card__title {
    grid-area: title;
    align-self: center;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
  }

  .solution-card--accordion .solution-card__body {
    grid-area: body;
    font-size: 14px;
    line-height: 20px;
  }

  .solution-card__expand-btn {
    grid-area: btn;
    margin-top: 0;
    align-self: center;
  }
}


/* ============================================================
   B9. TECH STACK — ".NET Technologies and Architectures We Work with"
   Analogous to B4. WHY TWINCORE.
   Desktop (≥1024px): two-column flex — 646px left col | flex-1 right scrollable col
   Tablet  (768–1023px): single column, cards stack vertically
   Mobile  (<768px): single column + Splide horizontal slider (1/4 pagination)
   ============================================================ */

/* ── Section shell ── */
.tech-stack {
  background-color: var(--black);
}

.tech-stack__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  gap: 40px;
  align-items: center;
}

/* ── Left column ── */
.tech-stack__left {
  flex: 1 1 51%;
  max-width: 646px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 0;
}

/* Section icon circle (white bg, orange icon) */
.tech-stack__icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-icon);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tech-stack__icon-wrap .icon {
  font-size: 12px;
  color: var(--orange);
  display: block;
}

/* Copy: heading + body paragraphs */
.tech-stack__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tech-stack__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.36px;
  color: var(--white);
  text-transform: capitalize;
  margin: 0;
}

.tech-stack__body {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--white);
  margin: 0;
}

/* CTA panel — white rounded box */
.tech-stack__cta {
  background-color: var(--white);
  border-radius: var(--radius-panel);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.tech-stack__cta-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

/* Orange pill button: [SEND FORM text] [white circle →] */
.tech-stack__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 4px 3px 19px;
  background-color: var(--orange);
  border-radius: 9999px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.tech-stack__cta-btn:hover {
  background-color: var(--orange-dark);
}

.tech-stack__cta-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 9999px;
}

.tech-stack__cta-btn-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tech-stack__cta-btn-icon {
  width: 40px;
  height: 40px;
  background-color: var(--white);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tech-stack__cta-btn-icon .icon {
  font-size: 12px;
  color: var(--black);
  display: block;
}

/* ── Right column — scrollable vertical list on desktop ── */
.tech-stack__cards {
  flex: 1 1 49%;
  max-width: 626px;
  min-width: 0;
  height: 100%;
  max-height: 800px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 80px 0;
}

.tech-stack__cards::-webkit-scrollbar {
  display: none;
}

/* Mobile header: hidden on desktop/tablet */
.tech-stack__mobile-header {
  display: none;
}

/* Splide: vertical list on desktop */
.tech-stack__splide {
  width: 100%;
}

.tech-stack__splide .splide__track {
  overflow: visible;
}

.tech-stack__splide .splide__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 12px;
}

.tech-stack__splide .splide__slide {
  flex: 0 0 auto;
}

/* ── Tech card ── */
.tech-card {
  background-color: transparent;
  border: 1px solid var(--card-border-dark);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas:
    "icon title"
    "body body";
  column-gap: 12px;
  row-gap: 12px;
  flex-shrink: 0;
}

.tech-card__icon {
  grid-area: icon;
  align-self: center;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tech-card__icon .icon {
  font-size: 16px;
  color: var(--orange);
  display: block;
}

.tech-card__title {
  grid-area: title;
  align-self: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--white);
  text-transform: capitalize;
  margin: 0;
}

.tech-card__body {
  grid-area: body;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--white);
  opacity: 0.6;
  margin: 0;
}

/* ── Prev/Next buttons (mobile) ── */
.tech-stack__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-stack__btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--grey);
  border-radius: var(--radius-pill);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.tech-stack__btn .icon {
  font-size: 10px;
  color: var(--white);
  display: block;
}

.tech-stack__btn:hover {
  border-color: var(--white);
}

.tech-stack__btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tech-stack__btn:disabled,
.tech-stack__btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ── Tablet (768–1023px) ── */
@media (max-width: 1023px) {

  .tech-stack__inner {
    flex-direction: column;
    padding: 60px clamp(24px, 4vw, 64px);
    gap: 32px;
  }

  .tech-stack__left {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .tech-stack__cards {
    flex: none;
    width: 100%;
    max-width: none;
    height: auto;
    overflow-y: visible;
    padding: 0;
    gap: 20px;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .tech-stack {
    padding: 0;
  }

  .tech-stack__inner {
    padding: 60px 20px;
    gap: 40px;
  }

  .tech-stack__left {
    gap: 20px;
  }

  .tech-stack__heading {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .tech-stack__body {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  /* CTA: compact padding, swap to icon-only button */
  .tech-stack__cta {
    padding: 20px;
    gap: 12px;
  }

  .tech-stack .btn-nav-cta {
    display: none;
  }

  .tech-stack .btn-cta-sm {
    display: flex;
  }

  /* Show mobile header (pagination + nav) */
  .tech-stack__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .tech-stack__mobile-pagination {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-weight: 500;
    line-height: 1;
  }

  .tech-stack__mobile-pagination-current {
    font-size: 18px;
    color: var(--white);
  }

  .tech-stack__mobile-pagination-total {
    font-size: 18px;
    color: var(--white);
    opacity: 0.4;
  }

  /* Horizontal slider: bleed to viewport right edge */
  .tech-stack__splide {
    margin-right: calc(50% - 50vw);
    gap: 0;
  }

  .tech-stack__splide .splide__list {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  .tech-stack__splide .splide__slide {
    display: flex;
    align-items: stretch;
    height: auto;
  }

  .tech-card {
    width: 256px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  .tech-card__title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
  }

  .tech-card__icon{
    align-self: flex-start;
  }
}


/* ============================================================
   B10. REASONS
   "Why companies hire .NET developers instead of full-time
   recruitment"

   Desktop/Tablet (≥768px): centered heading + vertical card column
   Mobile (<768px): heading + accordion cards
   ============================================================ */

/* ── Section wrapper ── */
.reasons {
  padding: clamp(60px, 5.5vw, 80px) 0;
  background: var(--body-bg);
}

.reasons__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

.reasons + .why-logistics {
  padding-top: 0 !important;
}

.logistics-solutions + .reasons {
  padding-top: 0 !important;
}

/* ── Header: heading + intro paragraph ── */
.reasons__header {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
}

.reasons__heading {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--black);
  text-transform: capitalize;
  margin: 0 0 20px;
}

.reasons__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--black);
  max-width: 680px;
  margin: auto;
  text-align: center;
}

/* ── Desktop card column ── */
.reasons__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reasons-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 60px 60px 100px 0 var(--shadow-card);
}

.reasons-card__icon-wrap {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.reasons-card__icon-wrap img {
  display: block;
  width: 120px;
  height: 120px;
}

.reasons-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reasons-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.reasons-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}

/* ── Mobile accordion — hidden above mobile breakpoint ── */
.reasons__accordion {
  display: none;
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {

  .reasons__header {
    margin-bottom: 32px;
  }

  .reasons__cards {
    display: none;
  }

  .reasons__accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .reasons__accordion-item {
    background: var(--white);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .reasons__accordion-trigger {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }

  .reasons__accordion-icon-wrap {
    flex-shrink: 0;
    width: 74px;
    height: 74px;
  }

  .reasons__accordion-icon-wrap img {
    display: block;
    width: 74px;
    height: 74px;
  }

  .reasons__accordion-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .reasons__accordion-label {
    flex: 1;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.33;
    color: var(--black);
    text-transform: capitalize;
  }

  .reasons__accordion-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--grey);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .reasons__accordion-btn .icon {
    font-size: 12px;
    color: var(--black);
    transition: transform 0.2s ease;
  }

  .reasons__accordion-trigger[aria-expanded="true"] .reasons__accordion-btn .icon {
    transform: rotate(45deg);
  }

  .reasons__accordion-body {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 20px;
    color: var(--black);
  }

  .reasons__accordion-body p {
    margin: 0;
  }

}


/* ============================================================
   B11. FOCUS AREAS
   "Where hired .NET developers add the most value"

   Desktop/Tablet (≥768px): header + [vertical tabs | Splide 1-slide]
   Mobile (<768px): heading + horizontal-scroll tabs + one panel visible
   ============================================================ */

/* ── Section ── */
.focus-areas {
  padding: 80px 0;
  background: var(--white);
  overflow-x: clip;
}

.focus-areas__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

/* ── Header ── */
.focus-areas__header {
  max-width: 868px;
  margin: 0 auto 60px;
  text-align: center;
}

.focus-areas__heading {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
  text-transform: capitalize;
  margin: 0 0 16px;
}

.focus-areas__desc {
  font-size: 16px;
  line-height: 1.625;
  color: var(--black);
  margin: 0;
}

/* ── Body: tab column + slider ── */
.focus-areas__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* ── Vertical tab list (desktop) ── */
.focus-areas__tabs {
  flex: 0 0 172px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.focus-areas__tab {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px 10px 12px;
  border: 1px solid transparent;
  border-radius: 42px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  text-align: left;
  transition: border-color 0.2s ease;
}

  .focus-areas__tab:hover {
    border-color: var(--grey);
  }

.focus-areas__tab--active {
  border-color: var(--grey);
  font-weight: 500;
}

.focus-areas__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  opacity: 0.2;
  transition: opacity 0.2s ease;
}

.focus-areas__tab--active .focus-areas__tab-icon {
  opacity: 1;
}

.focus-areas__tab-icon .icon {
  font-size: 18px;
  color: var(--black);
}

.focus-areas__tab--active .focus-areas__tab-icon .icon {
  color: var(--orange);
}

/* ── Slider wrapper ── */
.focus-areas__slider-wrap {
  flex: 1;
  min-width: 0;
}

/* Desktop Splide: bleed to viewport right edge, next slide peeks */
#focus-areas-splide {
  margin-right: calc(-1 * ((100vw - min(100vw, 1320px)) / 2 + clamp(20px, 5vw, 60px)));
  clip-path: inset(-1px -9999px -1px 0);
}

.focus-areas__splide .splide__track {
  overflow: visible;
}

.focus-areas__splide .splide__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.focus-areas__splide .splide__slide {
  flex: 0 0 auto;
  min-width: 0;
}

/* ── Card — desktop layout ── */
.focus-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 40px;
  padding: 12px 12px 12px 40px;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  min-height: 412px;
  height: 100%;
  box-sizing: border-box;
  user-select: none;
}

.focus-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.focus-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Actions row: CTA + toggle button (toggle hidden on desktop) */
.focus-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.focus-card__toggle {
  display: none;
}

.focus-card__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--black);
  text-transform: capitalize;
  letter-spacing: 0.01em;
  margin: 0;
}

.focus-card__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}

/* ── Card image (right half, desktop) ── */
.focus-card__img {
  position: relative;
  flex: 1;
  max-width: 568px;
  align-self: stretch;
  border-radius: 20px;
  overflow: hidden;
}

.focus-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {

  .focus-areas__slider-wrap{
    width: 100%;
  }

  .focus-areas {
    padding: 60px 0;
  }

  #focus-areas-splide {
    margin-right: 0;
    clip-path: none;
  }

  .focus-areas__header {
    max-width: none;
    margin-bottom: 24px;
    text-align: left;
  }

  /* Sub-copy not shown on mobile (not present in Figma mobile) */
  .focus-areas__desc {
    display: none;
  }

  .focus-areas__body {
    flex-direction: column;
    gap: 20px;
  }

  /* Horizontal scrollable tab bar */
  .focus-areas__tabs {
    flex: none;
    width: calc(100% + 40px);
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -20px;
    padding: 0 20px;
  }

  .focus-areas__tabs::-webkit-scrollbar {
    display: none;
  }

  .focus-areas__tab {
    flex-shrink: 0;
    height: 42px;
    padding: 2px 12px 2px 5px;
    gap: 2px;
    font-size: 12px;
    line-height: 18px;
  }

  .focus-areas__tab-icon .icon {
    font-size: 16px;
  }

  /* Keep Splide active on mobile: drag/swipe with one card per view */
  .focus-areas__splide .splide__track {
    overflow: hidden;
    padding: 0;
  }

  .focus-areas__splide .splide__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .focus-areas__splide .splide__slide {
    flex: 0 0 100%;
    min-width: 0;
    margin-right: 0;
  }

  /* Mobile card: vertical — image on top, content below */
  .focus-card {
    flex-direction: column;
    min-height: auto;
    padding: 12px;
    gap: 20px;
    border-color: var(--light-grey);
  }

  /* Image floats to top */
  .focus-card__img {
    order: -1;
    width: 100%;
    max-width: none;
    height: 242px;
    flex: none;
    align-self: auto;
  }

  .focus-card__content {
    padding: 0 0 0 8px;
    align-self: auto;
    width: 100%;
    justify-content: flex-start;
  }

  .focus-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .focus-card__body {
    font-size: 14px;
    line-height: 20px;
    max-height: 80px;
    overflow: hidden;
  }

  /* Second paragraph hidden on mobile */
  .focus-card__body--secondary {
    display: none;
  }

  .focus-card__body + .focus-card__body {
    margin-top: 0;
  }

  /* Toggle button: visible on mobile */
  .focus-card__toggle {
    display: flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--grey);
    background: var(--white);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

  .focus-card__toggle:hover {
    border-color: var(--black);
  }

  .focus-card__toggle .icon {
    font-size: 6px;
    color: var(--black);
    transition: transform 0.25s ease;
  }

  .focus-card__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  /* Expanded card: show full text */
  .focus-card--expanded .focus-card__body {
    max-height: none;
    overflow: visible;
  }

  .focus-card--expanded .focus-card__body--secondary {
    display: block;
  }

}


/* ============================================================
   CORE TECHNOLOGIES SLIDER
   "Core technologies our .NET developers work with"
   Desktop/tablet: always-on Splide, prev/next in header row.
   Mobile: Splide + pagination bar (counter + buttons).
   ============================================================ */

/* ── Section shell ── */
.core-tech {
  background-color: var(--light-grey);
  padding: 80px 0;
  overflow: hidden;
}

/* ── Inner container ── */
.core-tech__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 45px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Header row: heading left · nav right ── */
.core-tech__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.core-tech__heading-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 642px;
}

.core-tech__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.core-tech__subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0;
}

/* Desktop nav (flex-shrink so it never wraps) */
.core-tech__nav {
  flex-shrink: 0;
}

/* Mobile pagination bar — hidden on desktop/tablet */
.core-tech__mobile-header {
  display: none;
}

/* ── Disabled button state (Figma: opacity-40 at bounds) ── */
.core-tech__btn--prev:disabled,
.core-tech__btn--next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Splide structural overrides ── */
.core-tech .splide {
  visibility: visible;
}

.core-tech .splide__track {
  overflow: visible;
}

.core-tech .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.core-tech .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ── Card ── */
.core-tech-card {
  background-color: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  box-sizing: border-box;
}

/* ── Icon bubble ── */
.core-tech-card__icon {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-icon);
  background-color: var(--icon-circle-orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.core-tech-card__icon .icon {
  font-size: 18px;
  color: var(--orange);
}


.core-tech-card__icon .icon.icon-code-chevrons {
  font-size: 14px;
}

/* ── Card content ── */
.core-tech-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--black);
}

.core-tech-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-transform: capitalize;
  margin: 0;
  color: var(--black);
}

.core-tech-card__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
}

.core-tech-card__body p {
  margin: 0 0 10px;
}

.core-tech-card__body p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   TABLET  (768px – 1279px)
   ============================================================ */
@media (max-width: 1279px) {
  .core-tech__inner {
    padding: 0 32px;
  }

  .core-tech__title {
    font-size: 30px;
  }
}

/* ============================================================
   MOBILE  (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  .core-tech {
    padding: 60px 0;
  }

  .core-tech__inner {
    padding: 0 20px;
    gap: 20px;
  }

  /* Heading stacks vertically; desktop nav disappears */
  .core-tech__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .core-tech__nav {
    display: none;
  }

  /* Show mobile pagination bar */
  .core-tech__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* "1/4" counter */
  .core-tech__counter {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--black);
    text-transform: capitalize;
    margin: 0;
  }

  .core-tech__counter-total {
    color: var(--grey3);
  }

  /* Mobile heading sizes */
  .core-tech__title {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .core-tech__subtitle {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  /* Mobile card: add border, tighter padding/gap */
  .core-tech-card {
    padding: 20px;
    gap: 12px;
    border: 1px solid var(--grey);
  }

  .core-tech-card__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .core-tech-card__body {
    font-size: 14px;
    line-height: 20px;
  }
}


/* ============================================================
   HOW IT WORKS
   "How TwinCore's .NET developers join your team"
   Desktop (≥1024px): two-column flex. Left: H2+photo fixed. Right: 5 step cards, vertical scroll.
   Tablet  (768–1023px): single column, all cards stacked.
   Mobile  (<768px): heading+photo → pagination bar (1/5) → Splide slider.
   ============================================================ */

/* ── Section shell ── */
.hiw {
  background-color: var(--white);
}

/* ── Inner container ── */
.hiw__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 64px);
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ── Left column: heading + photo ── */
.hiw__left {
  flex: 1 1 51%;
  max-width: 626px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px 0;
}

.hiw__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.hiw__img-wrap {
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
}

.hiw__img {
  display: block;
  width: 100%;
  height: 449px;
  object-fit: cover;
}

/* ── Right column: scrollable card list ── */
.hiw__cards {
  flex: 1 1 49%;
  max-width: 626px;
  min-width: 0;
  max-height: 764px;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 80px 0;
}

.hiw__cards::-webkit-scrollbar {
  display: none;
}

/* Mobile pagination bar — hidden on desktop/tablet */
.hiw__mobile-header {
  display: none;
}

/* ── Splide structural overrides ── */
.hiw__splide {
  width: 100%;
}

.hiw__splide .splide__track {
  overflow: visible;
}

.hiw__splide .splide__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiw__splide .splide__slide {
  flex: 0 0 auto;
}

/* ── Step card ── */
.hiw-card {
  background-color: var(--light-grey);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Card header: badge + title in a row on desktop */
.hiw-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* Number badge circle */
.hiw-card__badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--icon-circle-orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiw-card__badge span {
  font-size: 12px;
  font-weight: 900;
  line-height: 18px;
  color: var(--orange);
}

.hiw-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.hiw-card__body {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

/* ============================================================
   TABLET  (768px – 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .hiw__inner {
    flex-direction: column;
    padding: 60px 40px;
    gap: 32px;
  }

  .hiw__left {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .hiw__img {
    height: auto;
  }

  .hiw__cards {
    flex: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow-y: visible;
    padding: 0;
  }
}

/* ============================================================
   MOBILE  (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  .hiw {
    padding: 60px 0;
  }

  .hiw__inner {
    padding: 0 20px;
    gap: 20px;
  }

  .hiw__left {
    gap: 20px;
  }

  .hiw__title {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .hiw__img {
    height: 240px;
  }

  /* Show mobile pagination bar */
  .hiw__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Gap between mobile header and splide */
  .hiw__cards {
    gap: 20px;
    overflow: visible;
  }

  /* "1/5" counter */
  .hiw__counter {
    display: flex;
    align-items: baseline;
    gap: 1px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    margin: 0;
  }

  .hiw__counter-current {
    color: var(--black);
  }

  .hiw__counter-total {
    color: var(--grey3);
  }

  /* Disabled button state */
  .hiw__btn--prev:disabled,
  .hiw__btn--next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Bleed slider to right viewport edge */
  .hiw__splide {
    margin-right: calc(50% - 50vw);
  }

  .hiw__splide .splide__list {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  .hiw__splide .splide__slide {
    display: flex;
    align-items: stretch;
  }

  /* Mobile card: badge stacks above title */
  .hiw-card {
    width: 256px;
    min-height: 284px;
    padding: 20px;
    box-sizing: border-box;
  }

  .hiw-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hiw-card__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }
}

/* ============================================================
   18. HIRING MODELS
   ============================================================ */

/* ── Section ── */
.hiring-models {
  background: var(--light-grey);
  padding: 80px 0;
}

.hiring-models__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.hiring-models__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: var(--black);
  text-align: center;
  margin: 0 auto;
  max-width: 498px;
}

.hiring-models__title + p {
  margin-top: 20px;
}

/* ── Cards grid ── */
.hiring-models__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

/* ── Individual card ── */
.hm-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

/* ── Card header: icon above title on desktop ── */
.hm-card__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Icon bubble ── */
.hm-card__icon {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: var(--radius-icon);
  background: var(--icon-circle-orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hm-card__icon .icon {
  font-size: 16px;
  color: var(--orange);
}

/* ── Title ── */
.hm-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--black);
  margin: 0;
}

/* ── Body ── */
.hm-card__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--black);
}

.hm-card__body p {
  margin: 0;
  margin-top: 12px;
}

/* Toggle hidden on desktop, body always visible */
.hm-card__toggle {
  display: none;
}

@media (min-width: 768px) {
  .hm-card__body {
    display: block !important;
  }
}

/* ── Tablet: tighten inner padding ── */
@media (max-width: 1024px) {
  .hiring-models__inner {
    padding: 0 32px;
  }

  .hiring-models__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .hiring-models {
    padding: 60px 0;
  }

  .hiring-models__inner {
    padding: 0 20px;
    gap: 20px;
  }

  .hiring-models__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Mobile card: row header, accordion body */
  .hm-card {
    padding: 20px;
    gap: 0;
  }

  /* Header becomes a row: icon + title | toggle */
  .hm-card__header {
    flex-direction: column;
    gap: 12px;
  }

  .hm-card__mobile-header-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .hm-card__title {
    flex: 1;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  /* Toggle pill button */
  .hm-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--grey);
    background: var(--white);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  /* Rotate plus to × when expanded */
  .hm-card__toggle[aria-expanded="true"] img {
    transform: rotate(45deg);
  }

  .hm-card__toggle[aria-expanded="true"] {
    display: none;
  }

  .hm-card__toggle img {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
  }
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

.contact-section {
  --contact-frosted-bg: rgba(255, 255, 255, 0.3);
  background-color: var(--black);
  width: 100%;
}

.contact-section__inner {
  display: flex;
  gap: 40px;
  padding: 80px 0;
  max-width: min(calc(100vw - 40px), 1312px);
  margin: 0 auto;
}

/* ── Left column ─────────────────────────────────────────── */
.contact__left {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 626px;
  flex-shrink: 0;
}

.contact__text-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__title-group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact__icon-badge {
  width: 58px;
  height: 58px;
  background-color: var(--white);
  border-radius: var(--radius-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact__icon-badge .icon {
  font-size: 16px;
  color: var(--orange);
}

.contact__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.36px;
  text-transform: capitalize;
  margin: 0;
}

.contact__body {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--white);
  letter-spacing: 0.5px;
  margin: 0;
}

/* Social proof card */
.contact__social-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: var(--contact-frosted-bg);
  border-radius: var(--radius-panel);
  padding: 32px;
}

.contact__social-avatar {
  width: 116px;
  height: 116px;
  border-radius: var(--radius-icon);
  border: 1px solid var(--orange);
  overflow: hidden;
  flex-shrink: 0;
}

.contact__social-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.contact__social-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--light-grey);
  letter-spacing: 0.24px;
  text-transform: capitalize;
  margin: 0;
}

/* ── Right: form card ────────────────────────────────────── */
.contact__form-card {
  flex: 1;
  min-width: 0;
  background-color: var(--white);
  border-radius: var(--radius-panel);
  padding: 40px 32px 32px;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
}

.contact__input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.contact__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--black);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.contact__required {
  margin-left: 1px;
}

.contact__input-field {
  width: 100%;
  background-color: var(--light-grey);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  outline: none;
  transition: border-color 0.15s ease;
}

.contact__input-field::placeholder {
  color: var(--black);
  opacity: 0.5;
}

.contact__input-field:hover {
  border-color: var(--black);
}

.contact__input-field:focus {
  border-color: var(--blue);
}

.contact__input-field.is-invalid {
  border-color: var(--orange);
}

/* Message: textarea + attach button inside same pill */
.contact__textarea-wrap {
  display: flex;
  gap: 10px;
  background-color: var(--light-grey);
  border-radius: 12px;
  padding: 6px 8px 6px 20px;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.contact__textarea-container{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.contact__textarea-wrap:hover {
  border-color: var(--black);
}

.contact__textarea-wrap:focus-within {
  border-color: var(--blue);
}

.contact__textarea {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  resize: none;
  outline: none;
  min-height: 24px;
  overflow: hidden;
}

.contact__textarea::placeholder {
  color: var(--black);
  opacity: 0.5;
}

.contact__attach-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease;
}

.contact__attach-btn:hover {
  border-color: var(--black);
}

.contact__attach-btn:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.contact__attach-btn .icon {
  font-size: 13px;
}

/* SEND FORM — uppercase label to match Figma */
.contact__submit {
  text-transform: uppercase;
}

/* ── Tablet (768–1279px) ─────────────────────────────────── */
@media (max-width: 1279px) {
  .contact-section__inner {
    padding: 60px 0;
  }

  .contact__left {
    width: 420px;
  }

  .contact__social-text {
    font-size: 20px;
  }
}

@media (max-width: 1024px) {
  .contact-section__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .contact__left {
    width: 100%;
    gap: 20px;
  }
}

/* ── Mobile (< 768px) ────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-section__inner {
    flex-direction: column;
    padding: 60px 0;
    gap: 40px;
    align-items: stretch;
  }

  .contact__left {
    width: 100%;
    gap: 20px;
  }

  .contact__heading {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .contact__body {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .contact__social-card {
    padding: 20px;
    gap: 12px;
  }

  .contact__social-avatar {
    width: 58px;
    height: 58px;
  }

  .contact__social-text {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .contact__form-card {
    padding: 24px;
  }

  .contact__form {
    gap: 24px;
  }
}


/* ============================================================
   REVIEWS SECTION
   ============================================================ */

.reviews-section {
  background-color: var(--grey2);
  padding: 80px 0;
}

.reviews-section__inner {  
  max-width: 1312px;
  margin: 0 auto;
}

/* ── Header: heading + nav ── */
.reviews-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.reviews-section__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--black);
  letter-spacing: 0.36px;
  text-transform: capitalize;
  margin: 0;
}

/* ── Splide structural (no Splide CSS bundle) ── */
.reviews-section .splide {
  visibility: visible;
}

.reviews-section .splide__track {
  overflow: visible;
}

.reviews-section .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviews-section .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ── Review card ── */
.review-card {
  background-color: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  width: 100%;
  height: 306px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  user-select: none;
}

.review-card__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Stars */
.review-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-stars__star {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* Quote */
.review-quote {
  margin: 0;
}

.review-quote p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
  overflow: hidden;
}

/* Author row */
.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-author__info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.review-avatar-wrap {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-icon);
  overflow: hidden;
  flex-shrink: 0;
}

.review-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-avatar--text {
  background-color: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}

.review-author__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

.review-role {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

.review-logo {
  height: 17px;
  max-width: 100px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Achievement badges ── */
.reviews-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  margin-top: 80px;
}

.reviews-badges__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 179px;
}

.reviews-badges__item img {
  max-height: 88px;
  max-width: 86px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Tablet (768–1279px) ─────────────────────────────────── */
@media (max-width: 1279px) {
  .reviews-section__inner {
    padding: 0 40px;
  }

  .reviews-section__header {
    margin-bottom: 32px;
  }

  .review-card {
    height: auto;
    min-height: 260px;
  }

  .reviews-badges__item {
    height: 120px;
  }

  .reviews-badges__item img {
    max-height: 120px;
  }
}

/* ── Mobile (< 768px) ────────────────────────────────────── */
@media (max-width: 767px) {
  .reviews-section {
    padding: 60px 0;
  }

  .reviews-section__inner {
    padding: 0 20px;
  }

  .reviews-section__header {
    align-items: flex-end;
    margin-bottom: 20px;
  }

  .reviews-section__title {
    font-size: 24px;
    letter-spacing: 0.24px;
    line-height: 1.1;
  }

  .review-card {
    padding: 20px;
    height: auto;
    gap: 20px;
  }

  .review-card__top {
    gap: 16px;
  }

  .review-author__info {
    gap: 8px;
  }

  .review-avatar-wrap {
    width: 48px;
    height: 48px;
  }

  /* 2 rows × 3 badges */
  .reviews-badges {
    flex-wrap: wrap;
    padding: 0;
    gap: 20px;
  }

  .reviews-badges__item {
    flex: 0 0 calc(33.333% - 14px);
    height: 94px;
  }

  .reviews-badges__item img {
    max-height: 75px;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}


/* ============================================================
   ARTICLES SLIDER SECTION
   ============================================================ */

.articles-section {
  background-color: var(--white);
  padding: 80px 0;
}

.articles-section__inner {
  max-width: 1312px;
  margin: 0 auto;
}

/* ── Header: heading + white nav buttons ── */
.articles-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.articles-section__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--black);
  letter-spacing: 0.36px;
  text-transform: capitalize;
  margin: 0;
}

/* ── Nav buttons — both white (no black fill) ── */
.articles-section__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.articles-section__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: 30px;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.articles-section__btn:hover:not(:disabled) {
  border-color: var(--black);
}

.articles-section__btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.articles-section__btn img {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* ── Splide structural ── */
.articles-section .splide {
  visibility: visible;
}

.articles-section .splide__track {
  overflow: visible;
}

.articles-section .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.articles-section .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

/* ── Article card ── */
.article-card {
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  padding: 12px 12px 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s ease;
}

.article-card:hover {
  box-shadow: 0 4px 20px var(--shadow-card);
}

.article-card__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cover image */
.article-card__img {
  height: 190px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--light-grey);
}

.article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title + excerpt */
.article-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 12px;
}

.article-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
  letter-spacing: 0;
}

.article-card__excerpt {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tag pills */
.article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px;
  align-items: flex-end;
}

.article-card__tag {
  display: inline-flex;
  align-items: center;
  background-color: var(--light-grey);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  white-space: nowrap;
}

/* ── Bottom CTA ── */
.articles-section__footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.articles-section__cta-btn {
  text-transform: uppercase;
}

/* ── Tablet (768–1279px) ─────────────────────────────────── */
@media (max-width: 1279px) {
  .articles-section__inner {
    padding: 0 40px;
  }

  .articles-section__title {
    font-size: 32px;
  }
}

/* ── Mobile (< 768px) ────────────────────────────────────── */
@media (max-width: 767px) {
  .articles-section {
    padding: 60px 0;
  }

  .articles-section__inner {
    padding: 0 20px;
  }

  .articles-section__header {
    margin-bottom: 20px;
    align-items: center;
  }

  .articles-section__title {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .article-card {
    padding: 12px 12px 20px;
    gap: 20px;
  }

  .article-card__top {
    gap: 20px;
  }

  .article-card__content {
    gap: 8px;
    padding: 0 8px;
  }

  .article-card__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
  }

  .article-card__excerpt {
    font-size: 14px;
    line-height: 20px;
    max-height: 40px;
  }

  .article-card__tags {
    padding: 0 8px;
  }

  .article-card__tag {
    font-size: 12px;
    line-height: 18px;
    padding: 8px 12px;
    height: 34px;
  }

  .articles-section__footer {
    margin-top: 24px;
  }
}


/* ============================================================
   FAQ SECTION
   ============================================================ */

.faq-section {
  padding: 80px 0;
}

.faq-section__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* ── Left aside ── */
.faq-section__aside {
  width: 312px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

.faq-section__label {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  padding-left: 7px;
}

.faq-section__label .icon {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--orange);
}

.faq-section__label-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  text-transform: uppercase;
  opacity: 0.9;
}

.faq-section__title {
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

/* ── Accordion list ── */
.faq-section__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 870px;
}

/* ── FAQ item card ── */
.faq-item {
  background-color: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.faq-item__header {
  display: block;
}

.faq-item__question {
  margin: 0;
}

.faq-item__question-text {
  flex: 1;
  min-width: 0;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--black);
  text-transform: capitalize;
}

.faq-item__btn {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  text-align: left;
  cursor: pointer;
}

.faq-item__btn-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--grey);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: 0.2s ease;
}

.faq-item__btn:hover .faq-item__btn-icon {
  border-color: var(--black);
}

.faq-item__icon {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  font-size: 0;
  color: var(--black);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}

.faq-item__icon::before {
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  left: 50%;
  top: 50%;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.faq-item--open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__body {
  padding: 0 32px 32px;
}

.faq-item__body p {
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--black);
  margin: 0;
}

/* ── Tablet (768–1279px) ── */
@media (max-width: 1279px) {
  .faq-section__inner {
    padding: 0 40px;
    gap: 40px;
  }

  .faq-section__aside {
    width: 260px;
  }

  .faq-section__title {
    font-size: 28px;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-section__inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 24px;
  }

  .faq-section__aside {
    width: 100%;
    position: static;
  }

  .faq-section__label{
    display: none;
  }

  .faq-section__title {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .faq-item__header {
    display: block;
  }

  .faq-item__btn {
    gap: 12px;
    padding: 16px 20px;
  }

  .faq-item__question-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }

  .faq-item__body {
    padding: 0 20px 16px;
  }

  .faq-item__body p {
    font-size: 14px;
    line-height: 20px;
  }
}


/* ============================================================
   VIDEO SECTION
   ============================================================ */

.video-section {
  padding: 36px 0;
}

.video-section.video-section-white {
  background-color: var(--white);
  padding: 80px 0;
}

.video-section__inner {
  max-width: min(1296px, calc(100vw - 40px));
  margin: 0 auto;
}

.video-section__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 38px;
  overflow: hidden;
  background-color: var(--black);
}

.video-section__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Tablet (768–1279px) ── */
@media (max-width: 1279px) {

  .video-section.video-section-white {
    padding: 40px 0;
  }

  .video-section__frame {
    border-radius: 24px;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .video-section__frame {
    border-radius: 14px;
  }
}


/* ============================================================
   LOGISTICS FRAMEWORK SECTION
   ============================================================ */

.logistics-framework {
  background-color: var(--white);
  padding: 80px 0;
}

.logistics-framework__inner {
  max-width: min(1296px, calc(100vw - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Hero: CSS Grid — photo left, unified content block right ── */
.logistics-framework__hero {
  display: grid;
  grid-template-columns: minmax(0, 626px) 1fr;
  grid-template-areas: "photo content";
  column-gap: 40px;
  align-items: center;
}

.logistics-framework__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logistics-framework__photo-wrap {
  grid-area: photo;
  height: 450px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.logistics-framework__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logistics-framework__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.logistics-framework__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logistics-framework__body-wrap p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0;
}

/* ── Feature cards: 3-column grid ── */
.logistics-framework__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lf-card {
  background-color: var(--light-grey);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lf-card__icon-wrap {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: var(--radius-icon);
  background-color: var(--icon-circle-orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf-card__icon-wrap .icon {
  font-size: 18px;
  color: var(--orange);
}

.lf-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lf-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.lf-card__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
}

/* ── Tablet (768–1279px) ── */
@media (max-width: 1279px) {
  .logistics-framework {
    padding: 60px 0;
  }

  .logistics-framework__hero {
    grid-template-columns: 45% 1fr;
  }

  .logistics-framework__photo-wrap {
    height: auto;
    aspect-ratio: 626 / 450;
  }

  .logistics-framework__heading {
    font-size: 28px;
  }

  .logistics-framework__body-wrap p {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .logistics-framework {
    padding: 40px 0;
  }

  .logistics-framework__inner {
    gap: 20px;
  }

  /* Flex column: heading -> photo -> body */
  .logistics-framework__hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .logistics-framework__content {
    display: contents;
  }

  .logistics-framework__heading {
    order: 1;
  }

  .logistics-framework__photo-wrap {
    order: 2;
  }

  .logistics-framework__body-wrap {
    order: 3;
  }

  .logistics-framework__photo-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 626 / 449;
  }

  .logistics-framework__heading {
    font-size: 24px;
    letter-spacing: 0.24px;
  }

  .logistics-framework__body-wrap p {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .logistics-framework__cards {
    grid-template-columns: 1fr;
  }

  .lf-card {
    padding: 20px;
    gap: 12px;
  }

  .lf-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .lf-card__desc {
    font-size: 14px;
    line-height: 20px;
  }
}


/* ============================================================
   LOGISTICS SOLUTIONS — TABBED SECTION
   ============================================================ */

.logistics-solutions {
  padding: 80px 0;
}

.logistics-solutions__inner {
  max-width: min(1296px, calc(100vw - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.logistics-solutions__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

/* ── Tab bar — horizontal, scrollable on overflow ── */
.logistics-solutions__tabs {
  display: flex;
  flex-direction: row;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.logistics-solutions__tabs::-webkit-scrollbar {
  display: none;
}

/* ── Individual tab ── */
.lsol-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 10px 16px 10px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 42px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lsol-tab:hover {
  border-color: var(--grey);
}

.lsol-tab--active {
  background-color: var(--white);
  border-color: var(--grey);
  font-weight: 500;
}

.lsol-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  opacity: 0.2;
  transition: opacity 0.2s ease;
}

.lsol-tab--active .lsol-tab__icon {
  opacity: 1;
}

.lsol-tab__icon .icon {
  font-size: 18px;
  color: var(--black);
}

.lsol-tab--active .lsol-tab__icon .icon {
  color: var(--orange);
}

/* ── Panels container ── */
.logistics-solutions__panels {
  width: 100%;
}

.logistics-solutions__panels.splide {
  position: relative;
}

.logistics-solutions__panels .splide__track {
  overflow: hidden;
}

.logistics-solutions__panels .splide__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logistics-solutions__panels .splide__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.lsol-panel.hidden {
  display: none;
}

/* ── Card — desktop layout ── */
.lsol-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 40px;
  background-color: var(--white);
  border-radius: var(--radius-card);
  min-height: 450px;
  overflow: hidden;
  user-select: none;
}

/* Image on left: small left padding, larger right padding on text side */
.lsol-card--img-left {
  padding: 12px 40px 12px 12px;
}

/* Text on left: larger left padding, small right padding on image side */
.lsol-card--img-right {
  padding: 12px 12px 12px 40px;
}

/* ── Image cells ── */
.lsol-card__img-wrap {
  flex: 1 0 0;
  max-width: 568px;
  align-self: stretch;
  border-radius: 20px;
  overflow: hidden;
}

/* Contained screenshot — light-grey bg, image centered with object-contain */
.lsol-card__img-wrap--contain {
  background-color: var(--light-grey);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsol-card__img-wrap--contain img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: none;
  border-radius: 20px;
}

/* Full-cover photo — fills cell edge to edge */
.lsol-card__img-wrap--cover {
  position: relative;
}

.lsol-card__img-wrap--cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Content column ── */
.lsol-card__content {
  flex: 1;
  min-width: 0;
  max-width: 730px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.lsol-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lsol-card__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.24px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.lsol-card__body {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin: 0;
}

.lsol-card__list {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  padding-left: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style-type: disc;
}

/* ── Actions row ── */
.lsol-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

/* Toggle button hidden on desktop */
.lsol-card__toggle {
  display: none;
}

/* ── Tablet (768–1279px) ── */
@media (max-width: 1279px) {
  .logistics-solutions {
    padding: 60px 0;
  }

  .logistics-solutions__heading {
    font-size: 28px;
  }
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .logistics-solutions {
    padding: 60px 0;
  }

  .logistics-solutions__inner {
    gap: 20px;
  }

  .logistics-solutions__heading {
    font-size: 24px;
    letter-spacing: 0.24px;
    text-align: center;
    padding: 0 20px;
  }

  /* Extend tab bar to viewport edges, hide scrollbar */
  .logistics-solutions__tabs {
    width: calc(100% + 40px);
    margin: 0 -20px;
    padding: 0 20px;
    gap: 12px;
  }

  .lsol-tab {
    height: 42px;
    padding: 2px 12px 2px 5px;
    gap: 2px;
    font-size: 12px;
    line-height: 18px;
  }

  .lsol-tab__icon .icon {
    font-size: 16px;
  }

  /* Card: vertical, image on top (same mobile pattern as focus cards) */
  .lsol-card,
  .lsol-card--img-left,
  .lsol-card--img-right {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: 12px;
    gap: 20px;
    border: 1px solid var(--light-grey);
  }

  .lsol-card__img-wrap {
    order: -1;
    width: 100%;
    max-width: none;
    height: 242px;
    flex: none;
    align-self: auto;
  }

  .lsol-card__content {
    padding: 0 0 0 8px;
    max-width: none;
    width: 100%;
    align-self: auto;
    justify-content: flex-start;
    gap: 16px;
  }

  .lsol-card__title {
    font-size: 18px;
    line-height: 24px;
  }

  .lsol-card__body {
    font-size: 14px;
    line-height: 20px;
  }

  .lsol-card:not(.lsol-card--expanded) .lsol-card__body:not(.lsol-card__body--secondary) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lsol-card__list {
    font-size: 14px;
    line-height: 20px;
  }

  /* Secondary body content hidden until expanded */
  .lsol-card__body--secondary,
  .lsol-card__list.lsol-card__body--secondary {
    display: none;
  }

  .lsol-card--expanded .lsol-card__body--secondary,
  .lsol-card--expanded .lsol-card__list.lsol-card__body--secondary {
    display: block;
  }

  .lsol-card--expanded .lsol-card__body {
    display: block;
    overflow: visible;
  }

  .lsol-card--expanded .lsol-card__list.lsol-card__body--secondary {
    display: flex;
  }

  /* Toggle button: visible on mobile */
  .lsol-card__toggle {
    display: flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--grey);
    background: var(--white);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

  .lsol-card__toggle:hover {
    border-color: var(--orange);
  }

  .lsol-card__toggle .icon {
    font-size: 6px;
    color: var(--black);
    transition: transform 0.25s ease;
  }

  .lsol-card__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }
}

/* ═══════════════════════════════════════════
   WHY TWINCORE FOR LOGISTICS
   components/why-twincore-logistics.html
═══════════════════════════════════════════ */

.why-logistics {
  background-color: var(--light-grey);
  padding: 60px 0;
}

.why-logistics__inner {
  max-width: min(1296px, calc(100vw - 40px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.why-logistics__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why-logistics__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--black);
  text-transform: capitalize;
  max-width: 670px;
  margin-bottom: 0;
}

.why-logistics__intro {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  max-width: 816px;
  margin-bottom: 0;
}

/* ── Feature cards ── */
.why-logistics__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.wl-card {
  background-color: var(--white);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wl-card__icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-icon);
  background-color: var(--icon-circle-orange-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wl-card__icon-wrap .icon {
  font-size: 18px;
  color: var(--orange);
}

.wl-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--black);
  text-transform: capitalize;
  margin-bottom: 0;
}

.wl-card__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--black);
  margin-bottom: 0;
}

/* ── Footer: closing paragraph + CTA ── */
.why-logistics__footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.why-logistics__closing {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  margin-bottom: 0;
}

.m-auto{
  margin: 0 auto;
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .why-logistics__header,
  .why-logistics__footer {
    text-align: center;
    align-items: center;
  }

  .why-logistics__heading {
    max-width: none;
    font-size: 24px;
    line-height: 32px;
  }

  .why-logistics__intro {
    max-width: none;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
  }

  .why-logistics__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .wl-card {
    padding: 20px;
    gap: 12px;
  }

  .wl-card__title {
    font-size: 18px;
    line-height: 27px;
  }

  .wl-card__desc {
    font-size: 14px;
    line-height: 20px;
  }

  .why-logistics__closing {
    max-width: 281px;
    font-size: 16px;
    line-height: 24px;
  }
}


/* ═══════════════════════════════════════════
   WHY LOGISTICS CAROUSEL
   components/why-logistics-carousel.html
   Desktop: fixed 404px left col (heading + nav) + flex:1 Splide carousel
   Mobile:  flex col — heading → mobile nav bar → slider
═══════════════════════════════════════════ */

.wlc {
  background-color: var(--light-grey);
  padding: 80px 0;
  overflow: hidden;
}

.wlc__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 45px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* ── Left column ── */
.wlc__left {
  width: 404px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wlc__heading-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wlc__heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: 0.36px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.wlc__subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;
  color: var(--black);
  margin: 0;
}

/* Desktop nav */
.wlc__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile nav bar — hidden on desktop */
.wlc__mobile-nav {
  display: none;
}

/* Disabled state */
.wlc__btn--prev:disabled,
.wlc__btn--next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Right slider column ── */
.wlc__slider {
  flex: 1;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Splide structural overrides ── */
.wlc .splide {
  visibility: visible;
}

/* Keep right-side overflow possible, but clip any slide overflow into the left text column */
#wlc-splide {
  clip-path: inset(-1px -9999px -1px 0);
}

.wlc .splide__track {
  overflow: visible;
}

.wlc .splide__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wlc .splide__slide {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  user-select: none;
}

/* ── Card ── */
.wlc-card {
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 270px;
  box-sizing: border-box;
}

.wlc-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wlc-card__icon .icon {
  font-size: 18px;
  color: var(--black);
}

.wlc-card__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.wlc-card__list {
  list-style: disc;
  padding-left: 21px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wlc-card__list li {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--black);
}

/* ── Mobile counter ── */
.wlc__counter {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--black);
  text-transform: capitalize;
  margin: 0;
}

.wlc__counter-total {
  color: var(--grey3);
}

/* ── Mobile (<768px) ── */
@media (max-width: 767px) {
  .wlc {
    padding: 60px 0;
  }

  .wlc__inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 20px;
  }

  .wlc__left {
    width: 100%;
    gap: 20px;
  }

  .wlc__nav {
    display: none;
  }

  .wlc__mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .wlc__heading {
    font-size: 24px;
    letter-spacing: 0.24px;
    line-height: 32px;
  }

  .wlc__subtitle {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .wlc__slider {
    width: 100%;
  }

  #wlc-splide {
    clip-path: none;
  }
}


/* small classes */

.hidden {
  display: none;
}