/* ============================================
   CANNON JAMES - Global Styles
   Font: Aktiv Grotesk Ex
   Colors: #111 (bg), #F5F5F5 (white), #DF7837 (orange), #979797 (gray)
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: aktiv-grotesk-extended, sans-serif;
  background-color: #111;
  color: #f5f5f5;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}

a {
  color: #f5f5f5;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #df7837;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* --- Typography --- */
h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.17;
}

h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
}

h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.text-orange {
  color: #df7837;
}

.text-gray {
  color: #979797;
}

.text-center {
  text-align: center;
}

/* --- Layout --- */
.container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 100px 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px 9px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  white-space: nowrap;
  min-width: 185px;
}

.btn-primary {
  background-color: #df7837;
  color: #111;
  border: 1px solid #df7837;
}

.btn-outline {
  background: transparent;
  color: #f5f5f5;
  border: 1px solid #f5f5f5;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  color: #f5f5f5;
}

.btn-outline-orange {
  background: transparent;
  color: #f5f5f5;
  border: 1px solid #df7837;
  background-image: linear-gradient(to left, transparent 0%, transparent 50%, #f5f5f5 50%, #f5f5f5 100%);
  background-size: 220% 100%;
  background-position: right center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 185px;
}

.btn-outline-orange:hover {
  background-position: left center;
  color: #111;
  border-color: #f5f5f5;
}

.btn-white {
  background-color: #f5f5f5;
  color: #111;
}

.btn-white:hover {
  background-color: #ddd;
  color: #111;
}

.btn img, .btn svg {
  width: 24px;
  height: 24px;
}

.btn-arrow::after {
  content: '›';
  font-size: 22px;
  margin-left: 4px;
}

/* --- Header / Navigation --- */
/* --- Header / Navigation --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 1000;
  padding: 24px 0;
  transition: padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.4) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.header.scrolled {
  padding: 16px 0;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* --- Logo: symbol + wordmark --- */
.header-logo {
  display: flex;
  align-items: center;
  gap: 2px;
}

.logo-symbol {
  height: 56px;
  width: auto;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.header.scrolled .logo-symbol {
  height: 56px;
}

.logo-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  overflow: hidden;
}

.logo-word {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #f5f5f5;
  letter-spacing: 0.5px;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1),
              opacity 0.4s ease;
}

.header.scrolled .logo-word-cannon {
  transform: translateY(-110%);
  opacity: 0;
  transition-delay: 0.05s;
}

.header.scrolled .logo-word-james {
  transform: translateY(-110%);
  opacity: 0;
  transition-delay: 0.1s;
}

/* Reverse — words flip back in */
.header:not(.scrolled) .logo-word-cannon {
  transition-delay: 0.25s;
}

.header:not(.scrolled) .logo-word-james {
  transition-delay: 0.2s;
}

/* --- Full nav links --- */
.nav {
  display: flex;
  align-items: center;
  gap: 44px;
}

.nav a {
  font-size: 18px;
  font-weight: 400;
  color: #f5f5f5;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

/* Nav hover — exact match to footer */
.nav a .nav-text {
  display: block;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav a .nav-text-dup {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  color: #df7837;
}

.nav a:hover .nav-text {
  transform: translateY(-100%);
  color: #df7837;
  transition-delay: 0s !important;
}

.nav a:hover .nav-text-dup {
  transform: translateY(0);
  transition-delay: 0s !important;
}

/* On scroll — rapid stagger flip-out: Home first, Contact last */
.header.scrolled .nav a .nav-text {
  transform: translateY(-110%);
  transition-delay: 0s;
}

.header.scrolled .nav a { pointer-events: none; }

.header.scrolled .nav a:nth-child(1) .nav-text { transition-delay: 0s; }
.header.scrolled .nav a:nth-child(2) .nav-text { transition-delay: 0.04s; }
.header.scrolled .nav a:nth-child(3) .nav-text { transition-delay: 0.08s; }
.header.scrolled .nav a:nth-child(4) .nav-text { transition-delay: 0.12s; }
.header.scrolled .nav a:nth-child(5) .nav-text { transition-delay: 0.16s; }
.header.scrolled .nav a:nth-child(6) .nav-text { transition-delay: 0.2s; }

/* Hide the underline when scrolled */
.header.scrolled .nav a::after { width: 0 !important; transition-delay: 0s; }

/* Reverse — links flip back in, Contact first, Home last */
.header:not(.scrolled) .nav a:nth-child(1) .nav-text { transition-delay: 0.28s; }
.header:not(.scrolled) .nav a:nth-child(2) .nav-text { transition-delay: 0.24s; }
.header:not(.scrolled) .nav a:nth-child(3) .nav-text { transition-delay: 0.2s; }
.header:not(.scrolled) .nav a:nth-child(4) .nav-text { transition-delay: 0.16s; }
.header:not(.scrolled) .nav a:nth-child(5) .nav-text { transition-delay: 0.12s; }
.header:not(.scrolled) .nav a:nth-child(6) .nav-text { transition-delay: 0.08s; }

.nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #df7837;
  transition: width 0.3s ease;
}

.nav a.active::after {
  width: 100%;
}

/* --- Burger icon --- */
.nav-burger {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  flex-shrink: 0;
  /* Hidden by default — burger lines have width 0 */
}

.nav-burger span {
  display: block;
  height: 2px;
  background: #f5f5f5;
  border-radius: 1px;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  width: 0;
}

.nav-burger span:nth-child(1) { transition-delay: 0s; }
.nav-burger span:nth-child(2) { transition-delay: 0.04s; }
.nav-burger span:nth-child(3) { transition-delay: 0.08s; }

/* Burger appears on scroll — lines draw in from right */
.header.scrolled .nav-burger span {
  width: 100%;
}

.header.scrolled .nav-burger span:nth-child(1) { transition-delay: 0.38s; }
.header.scrolled .nav-burger span:nth-child(2) { transition-delay: 0.42s; width: 65%; }
.header.scrolled .nav-burger span:nth-child(3) { transition-delay: 0.46s; }

/* Reverse — lines retract */
.header:not(.scrolled) .nav-burger span:nth-child(1) { transition-delay: 0.08s; }
.header:not(.scrolled) .nav-burger span:nth-child(2) { transition-delay: 0.04s; }
.header:not(.scrolled) .nav-burger span:nth-child(3) { transition-delay: 0s; }

/* Burger hover — lines turn orange */
.nav-burger:hover span {
  background: #df7837;
}

.nav-burger:hover span:nth-child(2) {
  width: 100%;
}

/* Pointer events only when visible */
.nav-burger { pointer-events: none; }
.header.scrolled .nav-burger { pointer-events: auto; }

/* Burger to X animation */
.nav-burger.active span:nth-child(1) {
  width: 100%;
  transform: rotate(45deg) translate(6px, 6px);
}

.nav-burger.active span:nth-child(2) {
  opacity: 0;
  width: 0 !important;
}

.nav-burger.active span:nth-child(3) {
  width: 100%;
  transform: rotate(-45deg) translate(6px, -6px);
}

/* --- Slide-out menu --- */
.slide-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 1001;
}

.slide-menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.slide-menu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/about-hero.jpg') center/cover no-repeat;
  z-index: 0;
}

.slide-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 0;
}

.slide-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  background: transparent;
  border-left: 1px solid rgba(223, 120, 55, 0.15);
  z-index: 1002;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 48px;
  overflow: hidden;
}

.slide-menu.open {
  transform: translateX(0);
}

.slide-menu-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.slide-menu-links a {
  font-size: 22px;
  font-weight: 400;
  color: #979797;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  transform: translateX(20px);
  opacity: 0;
}

.slide-menu.open .slide-menu-links a {
  transform: translateX(0);
  opacity: 1;
}

.slide-menu.open .slide-menu-links a:nth-child(1) { transition-delay: 0.1s; }
.slide-menu.open .slide-menu-links a:nth-child(2) { transition-delay: 0.15s; }
.slide-menu.open .slide-menu-links a:nth-child(3) { transition-delay: 0.2s; }
.slide-menu.open .slide-menu-links a:nth-child(4) { transition-delay: 0.25s; }
.slide-menu.open .slide-menu-links a:nth-child(5) { transition-delay: 0.3s; }
.slide-menu.open .slide-menu-links a:nth-child(6) { transition-delay: 0.35s; }

.slide-menu-links a .nav-text,
.slide-menu-links a .nav-text-dup {
  display: block;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  padding: 12px 0;
}

.slide-menu-links a .nav-text-dup {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  color: #df7837;
}

.slide-menu-links a:hover .nav-text {
  transform: translateY(-100%);
  color: #df7837;
}

.slide-menu-links a:hover .nav-text-dup {
  transform: translateY(0);
}

.slide-menu-links a.active {
  color: #df7837;
}

.slide-menu-footer {
  margin-top: 48px;
  padding-top: 32px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
}

.slide-menu.open .slide-menu-footer {
  opacity: 1;
  transform: translateY(0);
}

/* Close button inside slide menu */
.slide-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.slide-menu-close span {
  position: absolute;
  width: 22px;
  height: 2px;
  background: #f5f5f5;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.slide-menu-close span:nth-child(1) {
  transform: rotate(45deg);
}

.slide-menu-close span:nth-child(2) {
  transform: rotate(-45deg);
}

.slide-menu-close:hover span {
  background: #df7837;
}

.slide-menu-footer .btn {
  width: 100%;
  font-size: 16px;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  height: 807px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 15px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video {
  display: block;
}

/* Hide default play button on mobile */
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}
.hero-video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}


.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 376px;
  background: linear-gradient(to bottom, transparent, #111 57.7%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1290px;
  padding: 0 32px;
}

.hero-content h1 {
  text-shadow: 0 0 100px black, 0 0 97px black;
  margin-bottom: 32px;
}

.hero-content .subtitle {
  font-size: 20px;
  text-shadow: 0 0 100px black, 0 0 20px black;
  margin-bottom: 40px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.hero-arrow {
  margin: 60px auto 0;
  width: 28px;
  height: 14px;
  opacity: 0.7;
  cursor: pointer;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* --- Intro / Statement Section --- */
.intro-section {
  padding: 48px 0 32px;
  overflow: visible;
  position: relative;
  z-index: 3;
}

.intro-layout {
  position: relative;
}

.intro-text {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.intro-section h2 {
  font-size: 42px;
  margin-bottom: 24px;
  max-width: 670px;
}

.intro-section p {
  color: #979797;
  max-width: 700px;
}

.intro-accent {
  width: 60px;
  height: 2px;
  background: #df7837;
  margin-top: 36px;
}

.intro-symbol {
  position: absolute;
  right: -350px;
  top: 50%;
  transform: translateY(-50%) translateX(80px);
  width: 900px;
  height: 900px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-symbol.revealed {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.intro-symbol-shape {
  width: 100%;
  height: 100%;
  background-image: url('../images/about-hero.jpg');
  background-size: 140%;
  background-position: 40% 30%;
  -webkit-mask-image: url('../images/logo-symbol-white.svg');
  mask-image: url('../images/logo-symbol-white.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.4;
}

/* --- What We Do / Icon Feature Section --- */
.feature-section {
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.feature-section .feature-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.feature-section .feature-bg img:not(.glow) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.feature-section .feature-bg .glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 868px;
  height: 476px;
  opacity: 0.6;
}

.feature-fade-top,
.feature-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 280px;
  pointer-events: none;
  z-index: 1;
}

.feature-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #111, transparent);
}

.feature-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #111, transparent);
}

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

.feature-divider {
  display: flex;
  align-items: center;
  gap: 43px;
  margin: 48px 0;
}

.feature-divider .line {
  flex: 1;
  height: 1px;
}

.feature-divider .line-left {
  background: linear-gradient(to right, transparent, #df7837);
}

.feature-divider .line-right {
  background: linear-gradient(to right, #df7837, transparent);
}

.feature-divider .logo-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.feature-divider .logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Cards Grid --- */
.cards-grid {
  display: flex;
  gap: 28px;
}

.card {
  background: #141413;
  flex: 1;
  padding: 36px 32px;
  border: none;
  border-left: 1px solid rgba(223,120,55,0.3);
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top left / 0% 1px no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top right / 1px 0% no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) bottom right / 0% 1px no-repeat;
  background-size: 0% 1px, 1px 0%, 0% 1px;
  transition: background-size 0.3s ease;
}

.card:hover::after {
  animation: borderTrace 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes borderTrace {
  0% {
    background-size: 0% 1px, 1px 0%, 0% 1px;
  }
  33% {
    background-size: 100% 1px, 1px 0%, 0% 1px;
  }
  66% {
    background-size: 100% 1px, 1px 100%, 0% 1px;
  }
  100% {
    background-size: 100% 1px, 1px 100%, 100% 1px;
  }
}

.card-number {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.card-number .num {
  font-size: 72px;
  font-weight: 800;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.card-number h4 {
  flex: 1;
}

.card p {
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
}

/* --- Service Cards --- */
/* Horizontal scroll wrapper */
.services-scroll-wrap {
  position: relative;
}

.services-scroll-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.services-scroll-header {
  text-align: center;
  padding: 0 80px;
  margin-bottom: 48px;
  flex-shrink: 0;
}

.services-scroll-header p {
  color: #979797;
  max-width: 680px;
  margin: 16px auto 0;
}

.service-cards {
  display: flex;
  gap: 24px;
  will-change: transform;
  padding: 0 80px;
}

.service-card {
  min-width: 380px;
  max-width: 380px;
  flex-shrink: 0;
  background: #141413;
  position: relative;
  border: none;
  border-left: 1px solid rgba(223,120,55,0.3);
}


.service-card:hover {
  border-left-color: rgba(223,120,55,0.3);
}

.service-card-img {
  height: 220px;
  overflow: hidden;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card-content {
  padding: 24px 28px 28px;
}

.service-card-content h4 {
  margin-bottom: 12px;
}

/* --- Who We Work With Cards --- */
.work-with-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.work-with-card {
  background: #141413;
  height: 266px;
  display: flex;
  border-left: 1px solid rgba(223,120,55,0.3);
  position: relative;
  transition: border-left-color 0.4s ease;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 16px;
}

.work-with-card img {
  width: 45px;
  height: 45px;
}

.work-with-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top left / 0% 1px no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top right / 1px 0% no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) bottom right / 0% 1px no-repeat;
  background-size: 0% 1px, 1px 0%, 0% 1px;
  transition: background-size 0.3s ease;
}

.work-with-card:hover {
  border-left-color: rgba(223,120,55,0.7);
}

.work-with-card:hover::after {
  animation: borderTrace 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.work-with-card p {
  font-weight: 700;
  line-height: 1.5;
}

/* Mobile-only line break in "What You Can Expect" heading */
.expect-br { display: none; }

/* "Software, Data & AI" role tag wraps differently per breakpoint: desktop
   keeps "Software, Data &" / "AI", mobile uses "Software," / "Data & AI" so it
   stays two lines in the narrow grid. Swap the two spans by breakpoint. */
.industry-item .role-mob { display: none; }

/* --- What You Can Expect --- */
.expect-section-outer {
  position: relative;
  overflow: hidden;
}

.expect-image-bg {
  position: absolute;
  top: -100px;
  bottom: -100px;
  left: 0;
  width: 55%;
  z-index: 0;
}

.expect-image-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expect-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to bottom, #111 0%, #111 30%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.expect-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to top, #111 0%, #111 30%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.expect-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  background: linear-gradient(to left, #111 0%, #111 10%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

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

.expect-content-layer .expect-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  justify-content: center;
  max-width: 50%;
  margin-left: 50%;
  padding-left: 20px;
}

.expect-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expect-item img {
  width: 48px;
  height: 48px;
}

.expect-item:last-child img {
  width: 40px;
  height: 40px;
}

.expect-item h4 {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
}

/* --- Core Values --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  background: #141413;
  position: relative;
  border: none;
  border-left: 1px solid rgba(223,120,55,0.3);
}

.value-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top left / 0% 1px no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top right / 1px 0% no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) bottom right / 0% 1px no-repeat;
  background-size: 0% 1px, 1px 0%, 0% 1px;
  transition: background-size 0.3s ease;
}

.value-card:hover {
  border-left-color: rgba(223,120,55,0.7);
}

.value-card:hover::after {
  animation: borderTrace 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.value-card-img {
  height: 220px;
  overflow: hidden;
}

.value-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.value-card-content {
  padding: 30px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Team Section --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.team-member-photo {
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #f5f5f5;
}

.team-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.team-member-info {
  margin-top: 46px;
}

.team-member-info h4 {
  margin-bottom: 12px;
}

.team-member-info .role {
  color: #df7837;
  font-style: italic;
  font-size: 18px;
  margin-bottom: 24px;
}

.team-member-info p {
  line-height: 1.55;
}

.team-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.team-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(223, 120, 55, 0.3);
  color: #f5f5f5;
  transition: all 0.3s ease;
}

.team-social-link:hover {
  background: #E8713A;
  border-color: #E8713A;
  color: #fff;
}

/* --- Process Timeline --- */
.process-scroll-wrapper {
  height: 250vh;
  position: relative;
  background: #111;
}


.process-section {
  position: relative;
  overflow: hidden;
  min-height: 745px;
  background: #111;
}

.process-section.process-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  overflow: hidden;
  z-index: 5;
}


.process-section-bg {
  position: absolute;
  inset: 0;
  opacity: 0.015;
  pointer-events: none;
}

.process-section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(1) hue-rotate(-15deg) saturate(1.5);
}

.process-gradient-top {
  position: absolute;
  top: -269px;
  left: 0;
  width: 100%;
  height: 750px;
  background: linear-gradient(to bottom, #111 42%, rgba(17,17,17,0));
  pointer-events: none;
  z-index: 1;
}

.process-gradient-bottom {
  display: none;
}

.process-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 0;
  text-align: center;
}

.process-header p {
  max-width: 692px;
}

.process-timeline {
  position: relative;
  height: 260px;
  width: 100%;
  margin: 0 auto;
  /* no max-width or overflow:hidden — line extends off screen edges, clipped by section */
  z-index: 2;
}

.process-timeline-inner {
  position: absolute;
  width: 1440px;
  height: 479px;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.82);
  transform-origin: top center;
}

.process-path {
  position: absolute;
  left: -531px;
  top: 154px;
  width: 3879px;
  height: 197px;
  pointer-events: none;
}

.process-path img {
  display: block;
  width: 100%;
  height: 100%;
}

.step-label {
  position: absolute;
  font-size: 32px;
  font-weight: 700;
  color: #f5f5f5;
  white-space: nowrap;
  line-height: 1.3;
}

.step-icon-wrap {
  position: absolute;
  width: 72px;
  height: 72px;
}

.step-polygon {
  position: absolute;
  top: -1.6%;
  left: 0;
  width: 100%;
  height: 103.2%;
}

.step-polygon.step-polygon-indent {
  left: 5.31%;
  width: 89.38%;
}

.step-icon-inner {
  position: absolute;
  inset: 20%;
  overflow: hidden;
}

.step-icon-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step-overlay-icon {
  position: absolute;
  pointer-events: none;
}

/* --- Mobile Process Timeline (vertical snake) --- */
.process-mobile-timeline {
  display: none; /* Hidden on desktop */
}

.process-mobile-cta {
  display: none; /* Hidden on desktop; shown below timeline on mobile */
}

.process-mobile-inner {
  position: relative;
  padding: 0 28px 60px;
}

.process-mobile-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}


.process-mobile-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.process-mobile-step.step-active {
  opacity: 1;
  transform: translateY(0);
}

/* Left-aligned steps */
.process-mobile-step[data-side="left"] {
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 10%;
}

/* Right-aligned steps */
.process-mobile-step[data-side="right"] {
  flex-direction: row-reverse;
  justify-content: flex-start;
  padding-right: 10%;
  margin-left: auto;
}

.process-mobile-step-icon {
  width: 64px;
  height: 74px;
  flex-shrink: 0;
  position: relative;
}

.process-mobile-step-icon .step-polygon-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.process-mobile-step-icon .step-icon-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
}

.process-mobile-step-icon .step-icon-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.process-mobile-step-label {
  font-size: 18px;
  font-weight: 700;
  color: #979797;
  letter-spacing: 0.5px;
  transition: color 0.4s ease;
}

/* Mobile step activation — icon turns white, label turns white */
.process-mobile-step-icon svg path,
.process-mobile-step-icon svg circle,
.process-mobile-step-icon svg polygon {
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.process-mobile-step.step-active .process-mobile-step-icon svg path[fill="#111111"],
.process-mobile-step.step-active .process-mobile-step-icon svg path[stroke="#DF7837"] {
  fill: #ffffff;
  stroke: #ffffff;
}

.process-mobile-step.step-active .process-mobile-step-icon svg path[fill="#DF7837"] {
  fill: #111111;
}

.process-mobile-step.step-active .process-mobile-step-icon svg circle[fill="#DF7837"] {
  fill: #111111;
}

.process-mobile-step.step-active .process-mobile-step-icon svg polygon[fill="#DF7837"] {
  fill: #111111;
}

.process-mobile-step.step-active .process-mobile-step-icon .step-icon-inner img {
  filter: brightness(0);
}

.process-mobile-step.step-active .process-mobile-step-label {
  color: #ffffff;
}

/* --- Refined Process (Services page) --- */
.refined-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
}

.refined-process-card {
  display: flex;
  gap: 28px;
  align-items: center;
}

.refined-process-card-img {
  width: 250px;
  height: 190px;
  flex-shrink: 0;
  overflow: hidden;
}

.refined-process-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.refined-process-card-content h4 {
  margin-bottom: 12px;
}

/* --- Sectors --- */
/* --- Sector Stacking Cards --- */
.sector-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.sector-card {
  display: flex;
  min-height: 200px;
  background: #141413;
  overflow: hidden;
  position: sticky;
  top: 120px;
  z-index: calc(var(--card-index, 0) + 1);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease;
}

.sector-card-img {
  width: 528px;
  min-height: 200px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.sector-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sector-card-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.sector-card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f5f5f5;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

.sector-card-text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 44px 48px;
}

.sector-card-text p {
  font-size: 18px;
  line-height: 1.55;
  color: #f5f5f5;
}

.sector-card-text strong {
  font-weight: 700;
  color: #E8713A;
}

/* Clickable affordance on the Membership card (which links to /memberships) */
.sector-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 11px 22px;
  border: 1px solid #df7837;
  color: #df7837;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background 0.3s ease, color 0.3s ease;
}
.sector-card:hover .sector-card-cta {
  background: #df7837;
  color: #111;
}

/* Legacy - kept for compatibility */
.sector-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sector-item {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 40px 0;
  border-bottom: 1px solid #2a2a2a;
}

.sector-item-img {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
  overflow: hidden;
}

.sector-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sector-item-content h4 {
  color: #df7837;
  margin-bottom: 16px;
}

.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.role-tag {
  padding: 8px 20px;
  border: 1px solid #3f3f3f;
  font-size: 16px;
  color: #f5f5f5;
  cursor: default;
  position: relative;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.role-tag::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top left / 0% 1px no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) top right / 1px 0% no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) bottom right / 0% 1px no-repeat,
    linear-gradient(rgba(223,120,55,0.7), rgba(223,120,55,0.7)) bottom left / 1px 0% no-repeat;
  background-size: 0% 1px, 1px 0%, 0% 1px, 1px 0%;
  transition: background-size 0.3s ease;
}

.role-tag:hover {
  border-color: transparent;
}

.role-tag:hover::after {
  animation: borderTraceFull 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes borderTraceFull {
  0%   { background-size: 0% 1px, 1px 0%, 0% 1px, 1px 0%; }
  25%  { background-size: 100% 1px, 1px 0%, 0% 1px, 1px 0%; }
  50%  { background-size: 100% 1px, 1px 100%, 0% 1px, 1px 0%; }
  75%  { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0%; }
  100% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}

/* --- Industries Grid --- */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 48px 24px;
}

.industry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.industry-item p {
  font-size: 18px;
  font-weight: 700;
}

.industry-icon {
  width: 64px;
  height: 74px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industry-hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.industry-icon-svg {
  position: relative;
  width: 28px;
  height: 28px;
  z-index: 1;
  transition: stroke 0.3s ease, fill 0.3s ease;
}

.industry-item {
  cursor: default;
  transition: transform 0.3s ease;
}

.industry-item:hover {
  transform: translateY(-4px);
}

.industry-hex path {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.industry-item:hover .industry-hex path {
  fill: #ffffff;
  stroke: #ffffff;
}

.industry-item:hover .industry-icon-svg {
  stroke: #111 !important;
}

.industry-item:hover p {
  color: #f5f5f5;
}

.industry-item p {
  transition: color 0.3s ease;
}

/* --- Vacancies --- */
.filter-bar {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 48px;
}

.filter-bar-left {
  flex: 1;
}

.filter-bar-right {
  flex-shrink: 0;
}

.filter-label {
  font-size: 14px;
  color: #979797;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Location filter dropdown */
.location-filter {
  position: relative;
}

.location-filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border: 1px solid #f5f5f5;
  background: transparent;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.location-filter-btn:hover {
  background: #f5f5f5;
  color: #111;
}

.location-filter-btn svg {
  transition: transform 0.3s ease;
}

.location-filter.open .location-filter-btn {
  background: #f5f5f5;
  color: #111;
}

.location-filter.open .location-filter-btn svg {
  transform: rotate(180deg);
}

.location-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
}

.location-filter.open .location-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.location-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 15px;
  color: #f5f5f5;
  transition: background 0.2s ease;
}

.location-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.location-option input[type="checkbox"] {
  display: none;
}

.location-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.location-option input[type="checkbox"]:checked + .location-check {
  background: #E8713A;
  border-color: #E8713A;
}

.location-option input[type="checkbox"]:checked + .location-check::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Industry filter dropdown */
.industry-filter {
  position: relative;
}

.industry-filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border: 1px solid #f5f5f5;
  background: transparent;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.industry-filter-btn:hover {
  background: #f5f5f5;
  color: #111;
}

.industry-filter-btn svg {
  transition: transform 0.3s ease;
}

.industry-filter.open .industry-filter-btn {
  background: #f5f5f5;
  color: #111;
}

.industry-filter.open .industry-filter-btn svg {
  transform: rotate(180deg);
}

.industry-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
}

.industry-filter.open .industry-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.filter-tab {
  padding: 10px 24px;
  border: 1px solid #f5f5f5;
  background: transparent;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-tab.active,
.filter-tab:hover {
  background: #f5f5f5;
  color: #111;
}

/* --- Vacancy Header --- */
.vacancy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.vacancy-header h2 {
  flex: 1;
}

.vacancy-header-filters {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* --- Vacancy Groups --- */
.vacancy-group {
  margin-bottom: 0;
}

.vacancy-group-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.vacancy-group-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  padding: 48px 0;
}

.vacancy-group-info {
  padding-top: 4px;
}

.vacancy-group-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.vacancy-group-desc {
  color: #979797;
  font-size: 15px;
  line-height: 1.6;
}

/* --- Vacancy Cards --- */
.vacancy-group-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vacancy-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.25s ease;
}

.vacancy-card-link:hover {
  color: inherit;
  transform: translateY(-2px);
}

.vacancy-card {
  background: #171716;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease;
}

.vacancy-card-link:hover .vacancy-card {
  border-color: rgba(223, 120, 55, 0.3);
}

.vacancy-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}

.vacancy-card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.vacancy-card-title-row h4 {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.org-badge {
  background: #111;
  color: #979797;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.vacancy-card-top .location-tag {
  background: #df7837;
  color: #111;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.vacancy-card-desc {
  color: #979797;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.vacancy-card-meta {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #979797;
  font-size: 14px;
}

.meta-item svg {
  flex-shrink: 0;
}

/* --- Vacancy CTA buttons --- */
.vacancies-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Vacancy CTA Section (with logo pattern bg) --- */
.vacancy-cta-section {
  position: relative;
  overflow: hidden;
  padding-top: 20px;
}

.vacancy-cta-inner {
  text-align: center;
  padding: 16px 0 40px;
}

.vacancy-cta-bg {
  position: absolute;
  inset: -120px 0 0 0;
  opacity: 0.015;
  pointer-events: none;
}

.vacancy-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(1) hue-rotate(-15deg) saturate(1.5);
}

.vacancy-cta-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(to bottom, #111 0%, #111 20%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* --- Contact Form --- */
.contact-layout {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.contact-info {
  flex: 0 0 280px;
}

.contact-info h1 {
  font-size: 34px;
  margin-bottom: 20px;
}

.contact-details {
  display: flex;
  gap: 64px;
  margin-top: 40px;
  align-items: flex-start;
}

.contact-details-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s ease;
}

.contact-linkedin:hover {
  color: #E8713A;
}

.contact-linkedin svg {
  flex-shrink: 0;
}

.contact-detail h4 {
  margin-bottom: 12px;
}

.contact-detail p {
  margin-bottom: 6px;
}

/* Prevent browser auto-detection from underlining detected phone/email links */
.contact-detail a {
  text-decoration: none;
  color: inherit;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.social-link img {
  width: 24px;
  height: 24px;
}

.contact-form-wrapper {
  flex: 1;
  background: #111;
  padding: 36px 52px;
}

.contact-form-wrapper h4 {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-input {
  width: 100%;
  background: #161514;
  border: none;
  border-bottom: 1px solid #3f3f3f;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-bottom-color: #df7837;
}

.form-input::placeholder {
  color: #787878;
}

textarea.form-input {
  height: 110px;
  resize: vertical;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #df7837;
  color: #111;
  padding: 13px 32px 9px;
  border: none;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-btn:hover {
  background: #c5652e;
}

/* --- CTA Banner --- */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: 420px;
  z-index: 4;
  border-top: 0.5px solid rgba(223, 120, 55, 0.5);
}

.cta-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.5) 30%, rgba(17,17,17,0.5) 100%);
}

.cta-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 219px;
  align-items: flex-start;
  max-width: 1242px;
  margin: 0 auto;
  padding-top: 155px;
}

.cta-banner-content h3 {
  width: 360px;
  flex-shrink: 0;
}

.cta-banner-right {
  flex: 1;
  max-width: 662px;
}

.cta-banner-right p {
  margin-bottom: 32px;
}

.cta-buttons {
  display: flex;
  gap: 32px;
}

.cta-buttons .btn {
  min-width: 240px;
}

/* --- Footer --- */
.footer {
  border-top: 0.5px solid rgba(223, 120, 55, 0.5);
  padding: 64px 0 48px;
  position: relative;
  overflow: hidden;
}

.footer-bg {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 104.6%;
  height: 604px;
  z-index: 0;
  opacity: 0.012;
  pointer-events: none;
}

.footer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(1) hue-rotate(-15deg) saturate(1.5);
}

.footer-content {
  position: relative;
  z-index: 1;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 64px;
}

.footer-logo img {
  height: 102px;
  width: auto;
  margin-left: -8px;
}

.footer-nav {
  display: flex;
  gap: 44px;
}

.footer-nav a {
  font-size: 18px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.footer-nav a .nav-text {
  display: block;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.footer-nav a .nav-text-dup {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  color: #df7837;
}

.footer-nav a:hover .nav-text {
  transform: translateY(-100%);
  color: #df7837;
}

.footer-nav a:hover .nav-text-dup {
  transform: translateY(0);
}

.footer-bottom {
  border-top: 1px solid #3f3f3f;
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-bottom p {
  color: #979797;
  font-size: 16px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-axrem {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.footer-axrem img {
  display: block;
  height: 38px;
  width: auto;
}

.footer-axrem:hover { opacity: 0.85; }

.footer-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #3f3f3f;
  color: #979797;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-linkedin:hover {
  color: #fff;
  border-color: #E8713A;
  background: rgba(232,113,58,0.1);
}

.footer-linkedin svg { width: 20px; height: 20px; }

/* --- Privacy Policy --- */
.privacy-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 160px 32px 80px;
}

.privacy-content h1 {
  font-size: 40px;
  color: #df7837;
  margin-bottom: 48px;
}

.privacy-content h2 {
  font-size: 28px;
  margin-top: 48px;
  margin-bottom: 16px;
}

.privacy-content h3 {
  font-size: 22px;
  margin-top: 32px;
  margin-bottom: 12px;
}

.privacy-content p {
  color: #f5f5f5;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.7;
}

.privacy-content ul {
  margin-bottom: 16px;
  padding-left: 24px;
}

.privacy-content ul li {
  list-style: disc;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* --- Utility --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* --- Animations & Transitions --- */

/* Hero entrance - vertical flip reveal, line by line */
.hero-heading {
  display: block;
}

/* Mobile heading hidden by default, shown on mobile only */
.hero-heading-mobile {
  display: none !important;
}

.hero-line-wrap {
  display: block;
  overflow: hidden;
}

.hero-line {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  animation: heroFlipReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}

.hero-heading .hero-line-wrap:nth-child(1) .hero-line { animation-delay: 2.4s; animation-play-state: running; }
.hero-heading .hero-line-wrap:nth-child(2) .hero-line { animation-delay: 2.55s; animation-play-state: running; }
.hero-heading .hero-line-wrap:nth-child(3) .hero-line { animation-delay: 2.7s; animation-play-state: running; }

.hero-subtitle-lines {
  font-size: 20px;
  text-align: center;
  margin-bottom: 40px;
}

.hero:not(.subpage-hero) .hero-subtitle-lines {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.hero-content .hero-buttons {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 1.2s ease-out 5.3s forwards;
}

.hero-content .hero-arrow-link {
  opacity: 0;
  display: block;
  animation: heroFadeUp 0.8s ease-out 8s forwards, bounce 2s ease 8.8s infinite;
}

.hero-content .hero-arrow {
  opacity: 0.7;
}

/* Subpage hero animations — shorter delays (no preloader) */
.subpage-hero .hero-content {
  max-width: 960px;
}

.subpage-hero .hero-content h1,
.subpage-hero .hero-heading {
  text-shadow: none;
}

.subpage-hero .hero-heading .hero-line-wrap:nth-child(1) .hero-line { animation-delay: 0.3s; animation-play-state: running; }
.subpage-hero .hero-heading .hero-line-wrap:nth-child(2) .hero-line { animation-delay: 0.45s; animation-play-state: running; }
.subpage-hero .hero-heading .hero-line-wrap:nth-child(3) .hero-line { animation-delay: 0.6s; animation-play-state: running; }

/* Subtitle line delays are set dynamically via JS for responsive line-splitting */
/* Hide the raw <p> immediately so it's never visible before JS splits and animates it */
[data-split-lines] > p { opacity: 0; }

.subpage-hero .hero-content .hero-buttons {
  animation: heroFadeUp 1.2s ease-out 1.6s forwards;
}

.subpage-hero .hero-content .hero-arrow-link {
  animation: heroFadeUp 0.8s ease-out 2.2s forwards;
}

/* Vacancies listing hero — push content lower to close the gap to the next section */
.vacancies-hero {
  padding-bottom: 180px;
}

/* Vacancies hero (console image is fairly dark already) - moderate #111 scrim so the white text reads */
.vacancies-hero .hero-bg::after { background: rgba(17, 17, 17, 0.45); }

/* About page sections + How We Work — desktop-only richer fade-in */
@media (min-width: 769px) {
  /* About page: same animation settings as How We Work */
  /* Exclude grid containers (.work-with-grid, .values-grid) which have opacity:1 always */
  #who-we-work-with .reveal-up:not(.work-with-grid),
  .expect-section-outer .reveal-up,
  #core-values .reveal-up:not(.values-grid),
  #meet-the-team .reveal-up,
  #who-we-work-with .stagger,
  #core-values .stagger {
    opacity: 0;
    transform: translateY(55px);
    transition: opacity 1.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Revealed states — ID selector above has specificity 1,1,0 which beats the global
     .stagger.revealed / .reveal-up.revealed (0,2,0). Must match specificity here. */
  #who-we-work-with .reveal-up.revealed:not(.work-with-grid),
  .expect-section-outer .reveal-up.revealed,
  #core-values .reveal-up.revealed:not(.values-grid),
  #meet-the-team .reveal-up.revealed,
  #who-we-work-with .stagger.revealed,
  #core-values .stagger.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Services page — desktop-only richer fade-in for What We Do + Our Refined Process */
@media (min-width: 769px) {
  .services-scroll-pin .reveal-up,
  #refined-process .reveal-up {
    opacity: 0;
    transform: translateY(55px);
    transition: opacity 1.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .services-scroll-pin .reveal-up.revealed,
  #refined-process .reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* How We Work — mobile: stronger slide+fade so the animation is clearly visible */
@media (max-width: 768px) {
  .how-we-work-section .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .how-we-work-section .reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* All desktop-animated sections — mobile richer slide+fade (40px travel, 1.1s opacity) */
@media (max-width: 768px) {
  /* About page */
  #who-we-work-with .reveal-up:not(.work-with-grid),
  #who-we-work-with .stagger,
  .expect-section-outer .reveal-up,
  #core-values .reveal-up:not(.values-grid),
  #core-values .stagger,
  #meet-the-team .reveal-up,
  /* Services page */
  .services-scroll-pin .reveal-up,
  #refined-process .reveal-up,
  /* Sectors page */
  #roles-we-support .reveal-up,
  #roles-we-support .stagger,
  #membership-industries .reveal-up,
  #membership-industries .stagger {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Revealed states — specificity must beat global .reveal-up.revealed (0,2,0)
     and .stagger.revealed (0,2,0) where ID selectors are used */
  #who-we-work-with .reveal-up.revealed:not(.work-with-grid),
  #who-we-work-with .stagger.revealed,
  .expect-section-outer .reveal-up.revealed,
  #core-values .reveal-up.revealed:not(.values-grid),
  #core-values .stagger.revealed,
  #meet-the-team .reveal-up.revealed,
  .services-scroll-pin .reveal-up.revealed,
  #refined-process .reveal-up.revealed,
  #roles-we-support .reveal-up.revealed,
  #roles-we-support .stagger.revealed,
  #membership-industries .reveal-up.revealed,
  #membership-industries .stagger.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* How We Work — desktop-only richer fade-in (longer opacity, slightly more travel) */
@media (min-width: 769px) {
  .how-we-work-section .reveal-up {
    opacity: 0;
    transform: translateY(55px);
    transition: opacity 1.9s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Gap 1: Explore Services → How We Work headline — 20% tighter */
  /* feature-section bottom: 120px → 96px; how-we-work top: 100px → 80px */
  .feature-section { padding-bottom: 96px; }
  .how-we-work-section { padding-top: 80px; padding-bottom: 20px; }
}

.subpage-hero .hero-content .hero-arrow {
  animation: bounce 2s 3s infinite;
}

@keyframes heroFlipReveal {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll reveal — heading clip reveal (hero-style) */
.reveal-clip {
  overflow: hidden;
  display: block;
}

.reveal-clip-inner {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.9s ease;
}

.reveal-clip.revealed .reveal-clip-inner {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger delay for clip reveals within same parent */
.reveal-clip.delay-1 .reveal-clip-inner { transition-delay: 0.15s; }
.reveal-clip.delay-2 .reveal-clip-inner { transition-delay: 0.3s; }

/* Scroll reveal base states */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1s ease;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Revealed states */
.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-fade.revealed {
  opacity: 1;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children */
.stagger {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Grid containers - children handle their own animations */
.cards-grid.reveal-up,
.work-with-grid.reveal-up,
.values-grid.reveal-up,
.role-tags.reveal-up,
.industries-grid.reveal-up {
  opacity: 1;
  transform: none !important;
}

/* Card hover effects */
.card {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-left-color 0.4s ease;
}

.card:hover {
  border-left-color: rgba(223,120,55,0.7);
}

/* Button hover enhancements */
.btn {
  position: relative;
  overflow: hidden;
}

.btn-primary {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background-image: linear-gradient(to left, #df7837 0%, #df7837 50%, #f5f5f5 50%, #f5f5f5 100%);
  background-size: 220% 100%;
  background-position: right center;
  border: 1px solid #df7837;
}

.btn-primary:hover {
  background-position: left center;
  color: #111;
  border-color: #f5f5f5;
}

.btn-primary:hover img {
  filter: brightness(0);
}

.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(223, 120, 55, 0.15);
}

/* Feature divider line animation */
/* Feature section text vertical flip reveal */
.feature-title,
.feature-subtitle,
.feature-desc {
  overflow: hidden;
}

.feature-title-inner,
.feature-subtitle-inner,
.feature-desc-inner {
  display: block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.feature-subtitle {
  font-size: 20px;
  font-weight: 700;
  margin-top: 16px;
  overflow: hidden;
}

.feature-desc {
  max-width: 658px;
  margin: 0 auto 48px;
  color: #e9e9e9;
  text-shadow: 0 0 15px black, 0 0 84px black;
  overflow: hidden;
}

.revealed .feature-title-inner {
  transform: translateY(0);
  transition-delay: 0.2s;
}

.revealed .feature-subtitle-inner {
  transform: translateY(0);
  transition-delay: 0.4s;
}

.revealed .feature-desc-inner {
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* Feature CTA slide up + fade */
.feature-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 1.2s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s;
}

.revealed .feature-cta {
  opacity: 1;
  transform: translateY(0);
}

/* Feature divider lines - synced with text */
.feature-divider .line-left {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.feature-divider .line-right {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.revealed .feature-divider .line-left,
.revealed .feature-divider .line-right {
  transform: scaleX(1);
}

/* Feature emblem - synced with lines */
.feature-divider .logo-icon {
  opacity: 0;
  transform: scale(0.5) rotate(-180deg);
  transition: opacity 0.6s ease 0.6s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.revealed .feature-divider .logo-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Intro accent line animation */
.intro-accent {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}

.intro-text.revealed .intro-accent {
  transform: scaleX(1);
}

/* Slower intro section reveals */
.intro-text.reveal-left {
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.intro-symbol {
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

/* Process section entrance reveals — uses same style as rest of site */

/* Process step labels and icons - always visible, activated by scroll */

.step-overlay-icon {
  opacity: 0;
  transition: opacity 0.5s ease 0.4s;
}

.revealed .step-overlay-icon {
  opacity: 1;
}

/* Process path always visible */

/* White progress path overlay - behind icons */
.process-path-white {
  z-index: 0;
}

.step-icon-wrap {
  z-index: 2;
}

.step-label {
  z-index: 2;
}

.process-path-progress {
  stroke-dasharray: 4 5;
  transition: none;
}

/* Step polygon SVGs */
.step-polygon-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.step-icon-wrap .step-icon-inner {
  position: absolute;
  inset: 22%;
  z-index: 1;
}

.step-icon-wrap .step-icon-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Step activation styles */
.step-poly-path {
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.step-icon-path {
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.step-icon-wrap.step-active .step-poly-path {
  fill: #ffffff;
  stroke: #ffffff;
}

.step-icon-wrap.step-active .step-icon-path {
  fill: #111111;
  stroke: #111111;
}

.step-icon-wrap.step-active .step-icon-inner img {
  filter: brightness(0);
}

.step-label {
  overflow: hidden;
  padding-bottom: 4px;
}

.step-label-text {
  display: block;
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.step-label.step-active .step-label-text {
  transform: translateY(0);
}

.step-label.step-active {
  color: #ffffff;
}

/* Nav link hover effect */
.nav a {
  transition: color 0.3s ease;
}

/* Footer nav hover */
.footer-nav a {
  transition: color 0.3s ease;
}

/* Smooth image hover on value cards */
.value-card-img img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.value-card:hover .value-card-img img {
  transform: scale(1.08);
}

/* CTA banner parallax-ready */
.cta-banner-bg img {
  transition: transform 0.1s linear;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  h3 { font-size: 26px; }

  .hero { height: 100vh; min-height: 550px; }

  .nav { display: none; }
  .nav-burger {
    position: static;
    transform: none;
    pointer-events: auto;
  }
  .nav-burger span { width: 100%; }
  .nav-burger span:nth-child(2) { width: 65%; }
  .logo-wordmark { display: none; }
  .logo-symbol { height: 48px !important; }
  .slide-menu { width: 280px; padding: 80px 32px; }

  .service-card { min-width: 300px; max-width: 300px; }
  .work-with-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { flex-direction: column; }
  .team-grid { grid-template-columns: 1fr; }

  .expect-image-bg { width: 100%; top: 0; bottom: 0; }
  .expect-fade-right { width: 60%; }
  .expect-content-layer .expect-list { max-width: 100%; margin-left: 0; }

  .contact-layout { flex-direction: column; }
  .contact-form-wrapper { width: 100%; }
  .contact-details-2col { grid-template-columns: 1fr 1fr; }

  .filter-bar { flex-direction: column; gap: 24px; }
  .vacancy-header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .vacancy-group-layout { grid-template-columns: 1fr; gap: 32px; }

  .cta-banner-content {
    flex-direction: column;
    gap: 32px;
    padding: 80px 32px;
  }
  .cta-banner-content h3 { width: 100%; }

  .footer-top { flex-direction: column; gap: 32px; align-items: flex-start; }
  .footer-nav { flex-wrap: wrap; justify-content: flex-start; }

  .refined-process-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(3, 1fr); }

  .sector-card { flex-direction: column; height: auto; }
  .sector-card-img { width: 100%; height: 200px; }
  .sector-card-text { padding: 24px 32px; }
}

@media (max-width: 768px) {
  h1 { font-size: 28px; line-height: 1.2; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
  p { font-size: 15px; }

  .container { padding: 0 28px; }

  .header .container { padding: 0 28px; }

  /* Mobile logo — show wordmark at top, collapse on scroll (same as desktop) */
  .logo-wordmark { display: flex; }
  .logo-word { font-size: 17px; }
  .logo-symbol { height: 48px !important; }
  .header-logo { gap: 3px; margin-left: -5px; }
  /* Stronger nav gradient on mobile */
  .header::before { height: 130px; background: linear-gradient(to bottom, rgba(17,17,17,1) 0%, rgba(17,17,17,0.65) 55%, transparent 100%); }

  .hero { height: 100vh; min-height: 480px; }
  .hero-content { padding: 0 36px; }
  .hero-content h1 { font-size: clamp(26px, 7.2vw, 38px); }
  .subpage-hero .hero-content h1 { font-size: clamp(32px, 8.5vw, 46px); }
  .hero-heading-desktop { display: none !important; }
  .hero-heading-mobile { display: block !important; }
  .hero-video { opacity: 0; transition: opacity 0.8s ease; }
  .hero-heading-mobile .hero-line-wrap:nth-child(1) .hero-line { animation-delay: 3.4s; animation-play-state: running; }
  .hero-heading-mobile .hero-line-wrap:nth-child(2) .hero-line { animation-delay: 3.5s; animation-play-state: running; }
  .hero-heading-mobile .hero-line-wrap:nth-child(3) .hero-line { animation-delay: 3.6s; animation-play-state: running; }
  .hero-heading-mobile .hero-line-wrap:nth-child(4) .hero-line { animation-delay: 3.7s; animation-play-state: running; }
  .hero-heading-mobile .hero-line-wrap:nth-child(5) .hero-line { animation-delay: 3.8s; animation-play-state: running; }
  .hero-content .subtitle { font-size: clamp(16px, 4.5vw, 22px); }
  .hero-subtitle-lines { font-size: clamp(14px, 3.8vw, 17px); line-height: 1.65; }
  .hero:not(.subpage-hero) .hero-subtitle-lines { max-width: 300px; }
  .hero-buttons { flex-direction: column; align-items: center; gap: 10px; }
  .hero-buttons .btn { text-align: center; justify-content: center; padding: 11px 18px 7px; font-size: 16px; min-width: 0; width: auto; }
  .hero-arrow { width: 28px; margin-top: 50px; }
  .subpage-hero .hero-content { padding: 0 40px; }
  .vacancies-hero { padding-bottom: 200px; }

  .section { padding: 60px 0; }

  /* Intro section mobile */
  .intro-section { overflow: hidden; padding-top: 10px; text-align: center; }
  .intro-section h2 { font-size: 26px; max-width: 100%; }
  .intro-text { max-width: 100%; }
  /* On mobile, disable parent intro reveal; h2 and p animate independently */
  .intro-text.reveal-left { opacity: 1 !important; transform: none !important; transition: none !important; }
  .intro-child { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  .intro-child.revealed { opacity: 1; transform: translateY(0); }
  .intro-section p { max-width: 100%; margin-left: auto; margin-right: auto; }
  .intro-accent { margin-left: auto; margin-right: auto; transform-origin: center; }
  .intro-section { overflow: visible; }
  .intro-symbol {
    display: block;
    position: absolute;
    left: auto;
    right: -400px;
    top: 50%;
    transform: translateY(-50%) !important;
    width: 900px;
    height: 900px;
    opacity: 0;
    transition: opacity 0.8s ease !important;
    z-index: 0;
  }
  .intro-symbol.revealed {
    opacity: 0.55;
    transform: translateY(-50%) !important;
  }

  /* Process timeline mobile - hide the oversized path, show vertical */
  .process-scroll-wrapper { height: auto; }
  .process-section.process-sticky {
    position: relative;
    height: auto;
    min-height: auto;
  }
  .process-timeline { display: none; }
  .process-mobile-timeline { display: block; }
  .process-header { padding-top: 48px; padding-bottom: 8px; }
  .process-header p { max-width: 100%; }
  /* Move "More About Us" button below the mobile timeline */
  .process-header .btn { display: none; }
  .process-mobile-inner { padding-bottom: 16px; }
  .process-mobile-cta { display: flex; justify-content: center; padding: 0 0 64px; }
  .process-mobile-cta .btn { width: auto; min-width: 0; }

  /* Fix process bg pattern — hide img, use repeating background on mobile */
  .process-section-bg {
    background: url('../images/texture-dark.jpg') repeat top left;
    background-size: 1200px auto;
    background-position: -100px top;
    opacity: 0.012;
    filter: sepia(1) hue-rotate(-15deg) saturate(1.5);
  }
  .process-section-bg img { display: none; }

  /* Services scroll mobile — restore horizontal pin effect */
  .services-scroll-wrap { display: block; }
  /* Push sticky pin below nav; reduce header padding to bring content up */
  .services-scroll-pin { position: sticky; top: 60px; height: calc(100vh - 60px); overflow: hidden; justify-content: flex-start; }
  .services-scroll-header { position: relative; padding: 20px 36px 12px; }
  .services-scroll-header h2 { font-size: 24px; }
  .services-scroll-header p { font-size: 15px; }
  .service-cards { flex-direction: row; padding: 0 36px; gap: 16px; }
  #refined-process .container { padding: 0 40px; }
  .service-card { min-width: 80vw; max-width: 80vw; flex-shrink: 0; }
  .service-card-img { height: 260px; }

  /* Work with grid */
  .work-with-grid { grid-template-columns: 1fr; }
  .work-with-card { height: auto; min-height: 160px; padding: 40px 24px; }

  /* Who We Work With */
  /* Reduce gap between hero arrow and first section on about page */
  #who-we-work-with { padding-top: 20px !important; }
  #who-we-work-with .container { padding: 0 40px; }

  /* Values grid */
  #core-values .container { padding: 0 40px; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card-img { height: 180px; }

  /* Industries grid */
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  /* Pair the two unavoidable 3-line role cards (Regulatory… + Clinical
     Research…) on the same row, keeping Software, Data & AI next to
     Marketing & Product. Mobile order only — desktop DOM order is untouched. */
  .industries-grid .industry-item:nth-child(6) { order: 7; }
  .industries-grid .industry-item:nth-child(7) { order: 6; }
  .industries-grid .industry-item:nth-child(8) { order: 8; }
  .industries-grid .industry-item:nth-child(9) { order: 9; }
  .industries-grid .industry-item:nth-child(10) { order: 10; }
  /* Software, Data & AI: use the mobile span ("Software," / "Data & AI") */
  .industry-item .role-desk { display: none; }
  .industry-item .role-mob { display: inline; }

  /* What You Can Expect: on mobile the image fills the whole section, so darken
     it across the full width so the white text and icons stay readable. */
  .expect-fade-right { width: 100%; background: linear-gradient(to left, #111 0%, #111 35%, rgba(17, 17, 17, 0.74) 100%); }
  /* Shift the cover crop rightward so the bright X-rays (right of the figure)
     show, rather than just the silhouette in the centre. */
  .expect-image-bg img { object-position: 70% center; }

  /* Refined process */
  .refined-process-card { flex-direction: column; }
  .refined-process-card-img { width: 100%; height: 180px; }
  .refined-process-card-content h4 { font-size: 20px; }

  /* CTA banner */
  .cta-buttons { flex-direction: column; }
  .cta-buttons .btn { text-align: center; justify-content: center; }
  .cta-banner { height: auto; }
  .cta-banner-content { padding: 48px 40px; gap: 24px; }
  .cta-banner-content h3 { font-size: 22px; }

  /* Feature section (How We Work / What We Do) */
  .feature-section { padding: 40px 0 80px; }
  .feature-title { font-size: 28px; }
  .feature-subtitle { font-size: 16px; }
  .feature-desc { font-size: 15px; padding: 0 8px; }
  .feature-divider { margin: 24px 0; gap: 16px; }

  /* Contact page */
  .contact-details { flex-direction: column; gap: 40px; }
  .contact-details-2col { grid-template-columns: 1fr; }
  .contact-form-wrapper { padding: 40px 28px; }
  .contact-info { padding: 0; }
  /* Prevent mobile browsers auto-linking email/phone (causes unwanted underlines) */
  .contact-detail a { text-decoration: none; color: inherit; }
  /* Stack email/phone fields on mobile — side-by-side is desktop only */
  .form-row { flex-direction: column; gap: 0; }
  .form-row .form-group { margin-bottom: 16px; }
  /* Last item in form-row has no bottom margin — the row's own margin handles the gap */
  .form-row .form-group:last-child { margin-bottom: 0; }

  /* Filter bar */
  .filter-tabs { gap: 8px; }
  .filter-tab { padding: 8px 16px; font-size: 14px; }
  .filter-bar { gap: 16px; }

  /* Vacancy cards mobile */
  .vacancy-card-top { flex-direction: column; gap: 8px; }
  .vacancy-card-title-row { flex-wrap: wrap; }
  .vacancy-card-title-row h4 { white-space: normal; font-size: 16px; }
  .vacancy-card-meta { flex-wrap: wrap; gap: 12px; }
  .vacancy-card-desc { font-size: 14px; }
  .vacancy-header-filters { flex-direction: column; gap: 8px; }
  .org-badge { flex-shrink: 1; white-space: normal; }
  .vacancy-card-top .location-tag { flex-shrink: 1; }
  .vacancy-group-info h3 { font-size: 20px; }

  /* Sector cards — restore sticky stacking effect on mobile */
  .sector-item { flex-direction: column; }
  .sector-item-img { width: 100%; height: 200px; }
  .sector-stack { gap: 24px; }
  /* Equal min-height so a shorter card (e.g. Clinical Research & CROs) still
     fully covers the taller card behind it as the stack scrolls. The text is
     vertically centred, so the extra space reads as deliberate padding. */
  .sector-card { flex-direction: column; min-height: 560px; position: sticky; top: 120px; }
  .sector-card-img { width: 100%; height: 200px; }
  .sector-card-text { padding: 20px 24px; }
  .sector-card-text p { font-size: 15px; line-height: 1.6; }
  .sector-card-title { white-space: normal; width: 100%; font-size: 20px; padding: 0 24px; box-sizing: border-box; }
  .sector-card-desc { font-size: 14px; }

  /* Roles We Support section */
  #roles-we-support .container { padding: 0 40px; }
  #roles-we-support .container p { font-size: 18px; }
  .role-tags { gap: 10px; }
  .role-tag { font-size: 14px; padding: 8px 16px; }

  /* Expect section */
  .expect-content-layer.container { padding: 0 40px; }
  .expect-content-layer .expect-list { max-width: 100%; margin-left: 0; padding-left: 0; }
  .expect-item { align-items: center; text-align: center; }
  .expect-item img { width: 54px; height: 54px; }
  .expect-item:last-child img { width: 48px; height: 48px; }
  .expect-item h4 { font-size: 18px; }

  /* Footer — left-aligned logo + two-column nav grid */
  .footer { padding: 40px 0 28px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer-logo img { height: 68px; margin-left: -6px; }
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 40px;
    justify-items: start;
    flex-wrap: unset;
    justify-content: unset;
  }
  .footer-nav a { font-size: 16px; }
  .footer-bottom { padding-top: 24px; margin-top: 8px; flex-direction: column; align-items: flex-start; gap: 22px; }

  /* Filter dropdown — use subtle dark-tinted bg on open state so text stays
     white and avoids the gray-on-gray transition glitch on touch */
  .industry-filter.open .industry-filter-btn,
  .location-filter.open .location-filter-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #f5f5f5;
  }

  /* Reveal animations — smaller travel + longer fade for smoother mobile scroll */
  .reveal-up { transform: translateY(22px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-left { transform: translateX(-22px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal-right { transform: translateX(22px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .stagger { transform: translateY(16px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

  /* Team section */
  #meet-the-team .container { padding: 0 40px; }
  #meet-the-team h2 { margin-bottom: 36px !important; }
  .team-member-name { font-size: 20px; }
  .team-member-role { font-size: 14px; }
  /* Team photos — reduce height on mobile, equal crop */
  .team-member-photo { background: #1a1a1a; height: 320px; }
  .team-member-photo img { transform: translateZ(0); backface-visibility: hidden; object-position: center 50%; }
  /* Joe James (2nd): big gap at top — shift focus slightly lower */
  .team-member:nth-child(2) .team-member-photo img { object-position: center 35%; }
  /* "What You Can Expect" — break before Expect on mobile */
  .expect-br { display: block; }

  /* About page button group */
  .about-buttons-row { flex-direction: column; align-items: center; }

  /* Buttons */
  .btn { font-size: 16px; min-width: 200px; padding: 16px 24px 12px; }

  /* Stacked button groups: container shrinks to widest button, all stretch to match */
  .hero-buttons,
  .about-buttons-row {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
  }
  .cta-buttons {
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
    align-items: stretch;
  }

  .hero-buttons .btn,
  .cta-buttons .btn,
  .about-buttons-row .btn {
    text-align: center;
    justify-content: center;
  }

  /* Vacancy CTA section */
  .vacancy-cta-section { padding-top: 40px; }
  .vacancy-cta-section .container { padding: 0 28px; }
  .vacancy-cta-inner { padding: 32px 0 24px; }
  .vacancies-cta-buttons { flex-direction: column !important; align-items: center !important; }
  .vacancies-cta-buttons .btn { width: 100% !important; max-width: 280px !important; text-align: center !important; }

  /* Apply modal — align to top so form is fully visible without cropping */
  .apply-modal-overlay {
    align-items: flex-start;
    padding: 5vh 0 5vh;
    overflow-y: auto;
  }
  .apply-modal {
    max-height: none;
    width: 92%;
    padding: 24px 20px 20px;
  }
}

/* ============================================
   Vacancy Detail Pages
   ============================================ */
.vacancy-detail-hero {
  padding: 160px 0 80px;
  border-bottom: 1px solid #2a2a2a;
}

.vacancy-detail-hero .meta-row {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.vacancy-detail-hero .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #979797;
  font-size: 16px;
}

.vacancy-detail-hero .meta-item strong {
  color: #f5f5f5;
}

.vacancy-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  padding: 64px 0;
}

.vacancy-body h3 {
  font-size: 24px;
  margin-bottom: 16px;
  margin-top: 40px;
}

.vacancy-body h3:first-child {
  margin-top: 0;
}

.vacancy-body ul {
  padding-left: 20px;
}

.vacancy-body ul li {
  list-style: disc;
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 16px;
}

.vacancy-body p {
  font-size: 16px;
  margin-bottom: 16px;
}

.vacancy-sidebar {
  position: sticky;
  top: 140px;
}

.vacancy-sidebar-box {
  background: #141413;
  padding: 32px;
  margin-bottom: 24px;
}

.vacancy-sidebar-box h4 {
  margin-bottom: 24px;
}

.sidebar-detail {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #2a2a2a;
  font-size: 16px;
}

.sidebar-detail span:first-child {
  color: #979797;
}

.vacancy-hero-buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

.related-vacancies {
  padding: 80px 0;
  border-top: 1px solid #2a2a2a;
}

@media (max-width: 1024px) {
  .vacancy-body {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .vacancy-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .vacancy-detail-hero {
    padding: 100px 0 40px;
  }

  .vacancy-detail-hero h1 {
    font-size: 28px !important;
  }

  .vacancy-detail-hero .meta-row {
    flex-direction: column;
    gap: 8px;
  }

  .vacancy-detail-hero .meta-item {
    font-size: 14px;
  }

  .vacancy-hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .vacancy-body {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 0;
  }

  .vacancy-sidebar {
    position: static;
  }

  .vacancy-sidebar-box {
    padding: 24px;
  }

  .related-vacancies {
    padding: 48px 0;
  }
}

/* ============================================
   Application Modal
   ============================================ */
.apply-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.apply-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.apply-modal {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 92%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 44px 20px;
  position: relative;
  transform: translateY(30px) scale(0.97);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.apply-modal-overlay.open .apply-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.apply-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #979797;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.3s ease;
}

.apply-modal-close:hover {
  color: #df7837;
}

.apply-modal h3 {
  margin-bottom: 4px;
}

.apply-modal .modal-subtitle {
  color: #979797;
  font-size: 15px;
  margin-bottom: 12px;
}

.apply-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.apply-form-message {
  grid-column: 1 / -1;
}

.apply-modal .form-group {
  margin-bottom: 0;
}

.apply-modal .form-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #979797;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.apply-modal .form-label .optional {
  color: #5a5a5a;
  font-size: 13px;
}

.apply-modal .form-input {
  width: 100%;
  background: #161514;
  border: none;
  border-bottom: 1px solid #3f3f3f;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 15px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.3s ease;
}

.apply-modal .form-input:focus {
  border-bottom-color: #df7837;
}

.apply-modal .form-input::placeholder {
  color: #787878;
}

.apply-modal textarea.form-input {
  height: 90px;
  resize: vertical;
}

.apply-modal .file-upload-group {
  position: relative;
}

.apply-modal .file-upload-label {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #161514;
  border: 1px dashed #3f3f3f;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 15px;
  color: #979797;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.apply-modal .file-upload-label:hover {
  border-color: #df7837;
  color: #f5f5f5;
}

.apply-modal .file-upload-label .upload-icon {
  font-size: 20px;
  color: #df7837;
}

.apply-modal .file-upload-label .file-name {
  color: #f5f5f5;
  font-size: 14px;
}

.apply-modal .file-upload-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.apply-modal .file-hint {
  font-size: 12px;
  color: #5a5a5a;
  margin-top: 2px;
}

.apply-modal .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid #df7837;
  background-color: #df7837;
  color: #111;
  background-image: linear-gradient(to left, #df7837 0%, #df7837 50%, #f5f5f5 50%, #f5f5f5 100%);
  background-size: 201% 100%;
  background-position: right center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 12px;
}

.apply-modal .btn-submit:hover {
  background-position: left center;
  color: #111;
}

/* Scrollbar styling for modal */
.apply-modal::-webkit-scrollbar {
  width: 6px;
}

.apply-modal::-webkit-scrollbar-track {
  background: #111;
}

.apply-modal::-webkit-scrollbar-thumb {
  background: #3f3f3f;
  border-radius: 3px;
}

/* ============================================
   Touch Device — Disable All Hover Effects
   Prevents sticky/glitchy hover states on mobile & tablet
   ============================================ */
@media (hover: none) {
  a:hover { color: inherit; }

  /* Buttons — remove gradient fill animation on touch (eliminates white line artifact) */
  .btn-primary { background-image: none; background-color: #df7837; }
  .btn-primary:hover {
    background-position: right center;
    color: #111;
    border-color: #df7837;
  }
  .btn-primary:hover img { filter: none; }
  .btn-outline:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
  }
  /* Remove gradient entirely on touch — eliminates white line artifact */
  .btn-outline-orange {
    background-image: none;
    transition: none;
  }
  .btn-outline-orange:hover {
    background-image: none;
    background-position: right center;
    color: #f5f5f5;
    border-color: #df7837;
  }
  .btn-white:hover { background-color: #f5f5f5; color: #111; }

  /* Nav links */
  .nav a:hover .nav-text { transform: translateY(0); }
  .nav a:hover .nav-text-dup { transform: translateY(100%); }
  .nav-burger:hover span { background: #f5f5f5; }
  .nav-burger:hover span:nth-child(2) { width: 65%; }

  /* Slide menu */
  .slide-menu-links a:hover .nav-text { transform: translateY(0); }
  .slide-menu-links a:hover .nav-text-dup { transform: translateY(100%); }

  /* Cards — freeze border-left at rest colour so touch doesn't flash it */
  .card:hover::after { animation: none !important; opacity: 0; }
  .card:hover { transform: none; border-left-color: rgba(223,120,55,0.3); }
  .service-card:hover { transform: none; border-left-color: rgba(223,120,55,0.3); }
  .work-with-card:hover { transform: none; border-left-color: rgba(223,120,55,0.3); }
  .work-with-card:hover::after { animation: none !important; opacity: 0; }
  .value-card:hover { transform: none; border-left-color: rgba(223,120,55,0.3); }
  .value-card:hover::after { animation: none !important; opacity: 0; }
  .value-card:hover .value-card-img img { transform: none; }

  /* Team social */
  .team-social-link:hover { color: #f5f5f5; }

  /* Sectors page — prevent icon/bg changes on touch */
  .role-tag:hover { background: transparent; color: #f5f5f5; }
  .role-tag:hover::after { background: transparent; }
  .industry-item { transition: none; }
  .industry-hex path { transition: none; }
  .industry-item:hover { transform: none; }
  .industry-item:hover .industry-hex path { fill: #111111; stroke: #df7837; }
  .industry-item:hover .industry-icon-svg { stroke: #df7837 !important; }
  .industry-item:hover p { color: #f5f5f5; }

  /* Vacancies page */
  .filter-tab:hover { background: transparent; color: #f5f5f5; }
  .vacancy-card-link:hover { transform: none; }
  .vacancy-card-link:hover .vacancy-card { border-left-color: rgba(223,120,55,0.3); border-color: #2a2a2a; }
  /* Remove transition on filter buttons so open/close is instant — prevents
     gray-on-gray flash where text and background both mid-transition */
  /* Filter buttons — on touch, hover can stick after tap. Reset colour + bg so
     closed state never shows dark text on the dark page background. */
  .industry-filter-btn,
  .location-filter-btn { transition: none; }
  .industry-filter-btn:hover,
  .location-filter-btn:hover { background: transparent !important; color: #f5f5f5 !important; }
  .location-option:hover { background: transparent; }

  /* Contact page */
  .contact-linkedin:hover { color: #f5f5f5; }
  .submit-btn:hover { transform: none; }

  /* Footer */
  .footer-nav a:hover .nav-text { transform: translateY(0); }
  .footer-nav a:hover .nav-text-dup { transform: translateY(100%); }

  /* Apply modal */
  .apply-modal-close:hover { color: #f5f5f5; }
  .apply-modal .file-upload-label:hover { border-color: #3f3f3f; }
  .apply-modal .btn-submit:hover {
    background-position: right center;
    color: #111;
  }
}

@media (max-width: 600px) {
  .apply-modal {
    padding: 32px 24px 28px;
    width: 95%;
  }

  .apply-form-grid {
    grid-template-columns: 1fr;
  }

  .apply-modal h3 {
    font-size: 24px;
  }
}

/* Desktop-only tweaks */
@media (min-width: 769px) {
  .header-logo { margin-left: -10px; }
}