/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  /* Surfaces, darkest first. */
  --bg-primary: #0A0A0B;
  --bg-secondary: #121215;
  --bg-tertiary: #1A1A1F;
  --bg-raised: #24242B;

  /* Warm off-white type, never pure #FFF, which glares on black. */
  --text-primary: #F5F0E4;
  --text-secondary: #BAB2A2;
  --text-muted: #9C9484;

  /* The accent variables keep their original names so existing rules carry
     over untouched; only the values move from blue to gold. */
  --accent-gold: #D4AF37;
  --accent-gold-hover: #EBC969;
  --accent-purple: #1A1A1F;
  --accent-blue: #D4AF37;
  --accent-yellow: #F2D06B;

  /* Triplets, so alpha tints compose from one source of truth. */
  --gold-rgb: 212, 175, 55;
  --line-rgb: 245, 240, 228;
  --shadow-rgb: 0, 0, 0;
  
  --font-space: 'Space Grotesk', sans-serif;
  --font-outfit: 'Outfit', sans-serif;
  --font-inter: 'Inter', sans-serif;
  
  --glass-bg: rgba(18, 18, 21, 0.82);
  --glass-border: rgba(var(--line-rgb), 0.10);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s ease;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-gold) var(--bg-tertiary);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-inter);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar for Chrome/Safari/Edge */
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::selection {
  background: rgba(var(--gold-rgb), 0.28);
  color: var(--text-primary);
}
body::-webkit-scrollbar-thumb {
  background: var(--accent-gold);
  border-radius: 4px;
}
body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold-hover);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: none;
}

/* ==========================================================================
   BACKGROUND GLOW ORBS
   ========================================================================== */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: screen;
}
.orb-1 {
  width: 500px;
  height: 500px;
  background: var(--accent-purple);
  top: -100px;
  left: -100px;
}
.orb-2 {
  width: 450px;
  height: 450px;
  background: var(--accent-gold);
  top: 10%;
  right: -50px;
  opacity: 0.08;
}
.orb-3 {
  width: 600px;
  height: 600px;
  background: var(--accent-purple);
  bottom: 10%;
  left: 20%;
  opacity: 0.1;
}

/* ==========================================================================
   LAYOUT CONTAINERS & GRIDS
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.grid {
  display: grid;
  gap: 32px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 500;
  border-radius: 40px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  z-index: 1;
  gap: 8px;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: var(--accent-gold);
  color: var(--bg-tertiary);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-gold-hover);
  color: var(--bg-tertiary);
  box-shadow: 0 0 25px rgba(var(--gold-rgb), 0.4);
  transform: translateY(-2px);
}
.btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-outline {
  border: 1px solid rgba(var(--line-rgb), 0.3);
  color: var(--text-primary);
  background: rgba(var(--line-rgb), 0.036);
  backdrop-filter: blur(10px);
}
.btn-outline:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  background: rgba(var(--gold-rgb), 0.05);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn-arrow {
  transition: var(--transition-smooth);
}

/* ==========================================================================
   MAIN HEADER
   ========================================================================== */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 12px 40px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}

@media (max-width: 768px) {
  .main-header {
    padding: 10px 20px;
  }
  /* Collapse the inline nav on small screens; logo + CTA remain */
  .main-header .floating-nav-bar {
    display: none;
  }
}

/* Status Indicator */
.status-indicator {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-space);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent-gold);
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--accent-gold);
  animation: dot-pulse 1.8s infinite ease-in-out;
}

@keyframes dot-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* Animated Logo */
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-text {
  font-family: var(--font-outfit);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}

.logo-main {
  color: var(--text-primary);
}

.logo-sub {
  color: var(--accent-gold);
}

/* 3D Starburst Logo (WebGL canvas) */
.logo-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#logo-canvas {
  width: 52px;
  height: 52px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(var(--gold-rgb), 0.25));
  transition: var(--transition-smooth);
}
.logo-container:hover #logo-canvas {
  transform: scale(1.08);
  filter: drop-shadow(0 3px 14px rgba(var(--gold-rgb), 0.5));
}

.orbit-ring-1 {
  transform-origin: 50px 50px;
  animation: rotate-clockwise 16s linear infinite;
}
.orbit-ring-2 {
  transform-origin: 50px 50px;
  animation: rotate-counter-clockwise 12s linear infinite;
}

/* Satellites pulsing */
.sat {
  transform-origin: 50px 50px;
  animation: float-sat 4s ease-in-out infinite alternate;
}
.sat-1 { animation-delay: 0s; }
.sat-2 { animation-delay: -0.6s; }
.sat-3 { animation-delay: -1.2s; }
.sat-4 { animation-delay: -1.8s; }
.sat-5 { animation-delay: -2.4s; }
.sat-6 { animation-delay: -3s; }

@keyframes rotate-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes rotate-counter-clockwise {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes float-sat {
  0% { transform: scale(0.9) translate(0px, 0px); opacity: 0.7; }
  100% { transform: scale(1.1) translate(0.5px, -0.5px); opacity: 1; }
}

/* ==========================================================================
   HERO SECTION & GLOBAL SELECOR
   ========================================================================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 140px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-tagline {
  font-family: var(--font-space);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 40px;
  word-spacing: 2px;
}

/* Hero 3D Logo Stage (replaces the country carousel) */
.hero-logo-stage {
  width: 100%;
  max-width: 600px;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hero-logo-canvas {
  width: min(440px, 80vw);
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 44px rgba(var(--gold-rgb), 0.22));
}

/* Global Selector Box */
.global-selector-box {
  width: 100%;
  max-width: 600px;
  margin-bottom: 60px;
}

.selector-overline {
  font-family: var(--font-space);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 15px;
}

.selector-display-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.country-showcase {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 135px; /* Prevent layout shifts */
  justify-content: center;
}

.country-name {
  font-family: var(--font-outfit);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-primary);
  margin-bottom: 8px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.country-stats {
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-gold);
  letter-spacing: 1px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.country-stats .divider {
  color: var(--text-muted);
  margin: 0 4px;
}

.country-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.5;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

/* Transition classes added via Javascript */
.slide-exit-left {
  transform: translateX(-20px);
  opacity: 0;
}
.slide-exit-right {
  transform: translateX(20px);
  opacity: 0;
}
.slide-enter-left {
  transform: translateX(20px);
  opacity: 0;
}
.slide-enter-right {
  transform: translateX(-20px);
  opacity: 0;
}

/* Navigation Arrow Buttons */
.arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--line-rgb), 0.144);
  background: rgba(var(--line-rgb), 0.036);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.arrow-btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
  background: rgba(var(--gold-rgb), 0.08);
  box-shadow: 0 0 15px rgba(var(--gold-rgb), 0.15);
  transform: scale(1.05);
}
.arrow-btn:active {
  transform: scale(0.95);
}

/* Country Visual Dots Indicator Grid */
.country-dots-grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.country-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--line-rgb), 0.27);
  transition: var(--transition-smooth);
  cursor: pointer;
  border: 1px solid transparent;
}
.country-dot:hover {
  background: rgba(var(--gold-rgb), 0.5);
}
.country-dot.active {
  background: var(--accent-gold);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
}

@media (max-width: 576px) {
  .country-name {
    font-size: 44px;
  }
  .arrow-btn {
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   SHOWREEL CARD
   ========================================================================== */
.showreel-card {
  width: 100%;
  max-width: 680px;
  background: rgba(26, 26, 31, 0.92);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  cursor: pointer;
}

.showreel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.05) 0%, rgba(var(--shadow-rgb), 0.11) 100%);
  opacity: 0;
  transition: var(--transition-smooth);
  z-index: 0;
}

.showreel-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--gold-rgb), 0.25);
  box-shadow: 0 25px 60px rgba(var(--shadow-rgb), 0.8), 0 0 30px rgba(var(--gold-rgb), 0.05);
}
.showreel-card:hover::before {
  opacity: 1;
}

.showreel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
  font-family: var(--font-space);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.showreel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 30px;
  position: relative;
  z-index: 1;
}

/* Play Button Elements */
.play-button-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}

.play-btn-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(var(--gold-rgb), 0.3);
  transition: var(--transition-smooth);
  position: relative;
  z-index: 2;
}

.play-btn-circle svg {
  margin-left: 4px; /* Center-align the play triangle */
  transition: var(--transition-smooth);
}

.showreel-card:hover .play-btn-circle {
  background: var(--accent-gold-hover);
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(var(--line-rgb), 0.3);
}

.play-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent-gold);
  opacity: 0.25;
  z-index: 1;
  animation: radial-pulse 2s infinite ease-out;
}

@keyframes radial-pulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.8); opacity: 0; }
}

.play-callout {
  font-family: var(--font-space);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.play-subtext {
  font-size: 13px;
  color: var(--text-secondary);
}

.showreel-footer-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-yellow));
  opacity: 0.3;
}
.showreel-card:hover .showreel-footer-strip {
  opacity: 0.9;
}

/* ==========================================================================
   CONTENT SECTIONS & GLOBAL ELEMENTS
   ========================================================================== */
.content-section {
  padding: 120px 0;
  position: relative;
  z-index: 1;
}

.bg-darker {
  background-color: var(--bg-secondary);
}

.section-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 64px;
}

.section-num {
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-gold);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.section-heading {
  font-family: var(--font-outfit);
  font-size: 40px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Who We Are Elements */
.about-lead {
  padding-right: 40px;
}

.lead-text {
  font-size: 22px;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 300;
}

.about-details p {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 40px;
}

.stats-row {
  display: flex;
  gap: 48px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-outfit);
  font-size: 38px;
  font-weight: 700;
  color: var(--accent-gold);
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat-label {
  font-family: var(--font-space);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

@media (max-width: 576px) {
  .stats-row {
    flex-wrap: wrap;
    gap: 32px;
  }
}

/* What We Think - Cards */
.think-card {
  background: var(--bg-tertiary);
  border: 1px solid rgba(var(--line-rgb), 0.072);
  border-radius: 12px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.card-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--shadow-rgb), 0.264) 0%, transparent 70%);
  transition: var(--transition-smooth);
  pointer-events: none;
}

.think-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--line-rgb), 0.144);
  box-shadow: 0 15px 35px rgba(var(--shadow-rgb), 0.8);
}
.think-card:hover .card-glow {
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.08) 0%, transparent 70%);
  width: 250px;
  height: 250px;
}

.card-tag {
  font-family: var(--font-space);
  font-size: 11px;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}

.card-title {
  font-family: var(--font-outfit);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
}

.card-excerpt {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 32px;
  flex: 1;
}

.card-link {
  font-family: var(--font-space);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}
.think-card:hover .card-link {
  color: var(--accent-gold);
  transform: translateX(4px);
}

/* What We Do - Service Boxes */
.service-box {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 40px;
  transition: var(--transition-smooth);
}
.service-box:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--gold-rgb), 0.2);
  box-shadow: 0 20px 40px rgba(var(--shadow-rgb), 0.66);
}

.service-icon {
  color: var(--accent-gold);
  width: 64px;
  height: 64px;
  background: rgba(var(--gold-rgb), 0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  border: 1px solid rgba(var(--gold-rgb), 0.1);
  transition: var(--transition-smooth);
}
.service-box:hover .service-icon {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  transform: scale(1.05);
}
.service-box:hover .service-icon svg {
  stroke: #0A0A0B;
}

.service-box h3 {
  font-family: var(--font-outfit);
  font-size: 22px;
  margin-bottom: 16px;
}

.service-box p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

/* Careers Section Elements */
.careers-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
}

@media (max-width: 992px) {
  .careers-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.careers-intro h3 {
  font-family: var(--font-outfit);
  font-size: 32px;
  margin-bottom: 20px;
  line-height: 1.25;
}
.careers-intro p {
  color: var(--text-secondary);
  margin-bottom: 32px;
}

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

.career-item {
  background: var(--bg-tertiary);
  border: 1px solid rgba(var(--line-rgb), 0.072);
  border-radius: 10px;
  overflow: hidden;
  transition: var(--transition-smooth);
}
.career-item:hover {
  border-color: rgba(var(--line-rgb), 0.144);
}
.career-item.expanded {
  border-color: rgba(var(--gold-rgb), 0.2);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.66);
}

.career-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  cursor: pointer;
}

.career-title {
  font-family: var(--font-outfit);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}

.career-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-space);
}

.plus-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transition: var(--transition-smooth);
}
.plus-icon::before, .plus-icon::after {
  content: '';
  position: absolute;
  background-color: var(--text-secondary);
  transition: var(--transition-smooth);
}
/* Horizontal line */
.plus-icon::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
}
/* Vertical line */
.plus-icon::after {
  top: 0;
  left: 9px;
  width: 2px;
  height: 20px;
}

.career-item.expanded .plus-icon {
  transform: rotate(45deg);
}
.career-item.expanded .plus-icon::before,
.career-item.expanded .plus-icon::after {
  background-color: var(--accent-gold);
}

.career-detail {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-secondary);
  font-size: 14px;
  border-top: 1px solid transparent;
}
.career-item.expanded .career-detail {
  max-height: 240px;
  padding: 20px 24px 24px;
  border-color: rgba(var(--line-rgb), 0.072);
}

.career-detail p {
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Industries - Grid Cards */
.industries-grid {
  gap: 24px;
}

.industry-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(var(--line-rgb), 0.054);
  border-radius: 12px;
  padding: 32px;
  transition: var(--transition-smooth);
}
.industry-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--gold-rgb), 0.15);
  background: rgba(var(--gold-rgb), 0.05);
}

.ind-tag {
  font-family: var(--font-space);
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 24px;
}

.industry-card h4 {
  font-family: var(--font-outfit);
  font-size: 20px;
  margin-bottom: 12px;
}

.industry-card p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* Services Detail Rows */
.services-list-detail {
  display: flex;
  flex-direction: column;
}

.service-row {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr 3fr;
  /* Long titles ran straight into the body column without this. */
  column-gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.072);
  align-items: center;
  transition: var(--transition-smooth);
}
.service-row:first-child {
  border-top: 1px solid rgba(var(--line-rgb), 0.072);
}
.service-row:hover {
  background: rgba(var(--line-rgb), 0.018);
  padding-left: 16px;
  padding-right: 16px;
}

.row-num {
  font-family: var(--font-space);
  font-size: 13px;
  color: var(--accent-gold);
}

.row-title {
  font-family: var(--font-outfit);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
}

.row-text {
  color: var(--text-secondary);
  font-size: 15px;
}

@media (max-width: 768px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }
  .service-row:hover {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   INFINITE COUNTRIES MARQUEE (FOOTER)
   ========================================================================== */
.marquee-wrapper {
  background: var(--bg-secondary);
  border-top: 1px solid rgba(var(--line-rgb), 0.072);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.072);
  padding: 32px 0;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* Hero variant: duplicate marquee between the logo and the showreel card */
.marquee-hero {
  margin: 0 0 56px;       /* override the footer's 120px bottom margin */
  border-radius: 14px;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-marquee 40s linear infinite;
  gap: 48px;
}

.marquee-track span {
  font-family: var(--font-space);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 2px;
  white-space: nowrap;
}

@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   FLOATING BOTTOM NAVIGATION
   ========================================================================== */
.floating-nav-bar {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 4px;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 30px;
  font-family: var(--font-space);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  gap: 6px;
  white-space: nowrap;
}

.nav-link-num {
  font-size: 9px;
  color: var(--text-muted);
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(var(--line-rgb), 0.072);
}

.nav-link.active {
  color: var(--bg-tertiary);
  background: var(--accent-gold);
}
.nav-link.active .nav-link-num {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .floating-nav-bar {
    border-radius: 12px;
    padding: 6px;
  }
  .nav-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  .nav-link {
    padding: 8px 12px;
    font-size: 11px;
    justify-content: center;
  }
}

/* ==========================================================================
   MODAL OVERLAYS (COMMON STYLES)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--shadow-rgb), 0.8);
  backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-container {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb), 0.8);
  position: relative;
  overflow: hidden;
  max-width: 90%;
  width: 100%;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--line-rgb), 0.054);
  border: 1px solid rgba(var(--line-rgb), 0.09);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  z-index: 1100;
}
.modal-close-btn:hover {
  background: var(--text-primary);
  color: var(--bg-tertiary);
  transform: rotate(90deg);
}

/* ==========================================================================
   SHOWREEL VIDEO PLAYER MODAL
   ========================================================================== */
.showreel-modal-container {
  max-width: 1000px;
  aspect-ratio: 16/9;
  border-radius: 12px;
}

.canvas-player-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #0A0A0B;
}

/* Remotion Showreel Video */
.showreel-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #080808;
}

#particle-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.canvas-controls-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 32px 24px;
  background: linear-gradient(to top, rgba(var(--shadow-rgb), 0.8) 0%, rgba(var(--shadow-rgb), 0.8) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  pointer-events: none; /* Let clicks pass to canvas when hovering other areas */
  z-index: 10;
  transition: opacity 0.3s ease;
}

/* Hide controls overlay when active is off (during custom interactions if desired, or fade out after 3s) */
.canvas-player-container:hover .canvas-controls-overlay {
  opacity: 1;
}

.canvas-controls-overlay * {
  pointer-events: auto; /* Enable controls clicks */
}

.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-space);
}
.overlay-header h3 {
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #FFFFFF;
}

.interaction-hint {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.overlay-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.control-btn {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--line-rgb), 0.144);
  border: 1px solid rgba(var(--line-rgb), 0.09);
  transition: var(--transition-fast);
}
.control-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-tertiary);
  transform: scale(1.05);
}

.timeline-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-space);
  font-size: 12px;
  color: var(--text-secondary);
}

.timeline-slider-bg {
  flex: 1;
  height: 6px;
  background: rgba(var(--line-rgb), 0.27);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}

.timeline-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--accent-gold);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.controls-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Sound Wave Sim */
.sound-wave-icon {
  display: flex;
  align-items: flex-end;
  height: 20px;
  gap: 3px;
  cursor: pointer;
  padding: 0 4px;
}

.wave-bar {
  width: 3px;
  background: var(--text-secondary);
  border-radius: 2px;
  height: 4px;
  transition: height 0.25s ease;
}

.sound-wave-icon.playing .wave-bar {
  background: var(--accent-gold);
  animation: sound-pulse 1.2s ease-in-out infinite alternate;
}
.sound-wave-icon.playing .bar-1 { animation-delay: 0.1s; height: 16px; }
.sound-wave-icon.playing .bar-2 { animation-delay: 0.3s; height: 10px; }
.sound-wave-icon.playing .bar-3 { animation-delay: 0.5s; height: 18px; }
.sound-wave-icon.playing .bar-4 { animation-delay: 0.2s; height: 8px; }

@keyframes sound-pulse {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

@media (max-width: 768px) {
  .showreel-modal-container {
    aspect-ratio: auto;
    height: 70vh;
  }
  .canvas-controls-overlay {
    padding: 16px;
  }
  .overlay-controls {
    gap: 10px;
  }
  .timeline-container {
    display: none; /* Simplify mobile view */
  }
}

/* ==========================================================================
   CONTACT MODAL
   ========================================================================== */
.contact-modal-container {
  max-width: 900px;
}

.contact-box-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 520px;
}

@media (max-width: 768px) {
  .contact-box-grid {
    grid-template-columns: 1fr;
  }
  .contact-info-panel {
    display: none; /* Hide on mobile to save space */
  }
}

.contact-info-panel {
  background: var(--bg-tertiary);
  padding: 64px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(var(--line-rgb), 0.054);
}

.contact-info-panel h3 {
  font-family: var(--font-outfit);
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 24px;
}
.contact-info-panel p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 40px;
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.detail-item {
  display: flex;
  gap: 16px;
}

.detail-icon {
  width: 44px;
  height: 44px;
  background: rgba(var(--line-rgb), 0.036);
  border: 1px solid rgba(var(--line-rgb), 0.09);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  font-size: 18px;
}

.detail-item h5 {
  font-family: var(--font-space);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.detail-item p {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 0;
}

/* Contact Form Panel */
.contact-form-panel {
  padding: 64px 48px;
  position: relative;
}

@media (max-width: 576px) {
  .contact-form-panel {
    padding: 40px 24px;
  }
}

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

.form-group label {
  display: block;
  font-family: var(--font-space);
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(var(--line-rgb), 0.036);
  border: 1px solid rgba(var(--line-rgb), 0.144);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-inter);
  font-size: 14px;
  outline: none;
  transition: var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(var(--line-rgb), 0.3);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent-gold);
  background: rgba(var(--gold-rgb), 0.02);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.1);
}

/* Select wrapper styling for custom arrow */
.select-wrapper {
  position: relative;
}
.select-wrapper select {
  appearance: none;
  cursor: pointer;
}
.select-wrapper::after {
  content: '▼';
  font-size: 10px;
  color: var(--text-muted);
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Success View Message */
.form-success-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-secondary);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.form-success-message.active {
  opacity: 1;
  pointer-events: all;
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.05);
  border: 1px solid rgba(var(--gold-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.form-success-message h4 {
  font-family: var(--font-outfit);
  font-size: 24px;
  margin-bottom: 12px;
}
.form-success-message p {
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 280px;
  margin-bottom: 32px;
}

/* ==========================================================================
   HERO SUBLINE
   ========================================================================== */
.hero-subline {
  font-family: var(--font-space);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: -20px 0 40px;
  max-width: 720px;
  line-height: 2;
}

@media (max-width: 576px) {
  .hero-subline {
    font-size: 10px;
    letter-spacing: 1.5px;
  }
}

/* ==========================================================================
   SUB-HEADERS (secondary blocks inside a section)
   ========================================================================== */
.sub-header {
  margin: 96px 0 40px;
  max-width: 820px;
}

.sub-header-tag {
  font-family: var(--font-space);
  font-size: 11px;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 14px;
}

.sub-header-title {
  font-family: var(--font-outfit);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .sub-header {
    margin: 64px 0 32px;
  }
  .sub-header-title {
    font-size: 20px;
  }
}

/* ==========================================================================
   OUR PURPOSE LIST
   ========================================================================== */
.purpose-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 40px;
}

.purpose-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--line-rgb), 0.144);
}

.purpose-num {
  font-family: var(--font-space);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-gold);
  padding-top: 2px;
  flex-shrink: 0;
}

.purpose-list p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .purpose-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   OUR STORY & WELCOME MESSAGE
   ========================================================================== */
.story-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 992px) {
  .story-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.welcome-card {
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-tertiary));
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-radius: 16px;
  padding: 44px 40px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.welcome-card .card-tag {
  color: var(--accent-yellow);
  display: block;
}

.welcome-quote p {
  font-family: var(--font-outfit);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  color: #FFFFFF;
  margin-bottom: 22px;
}
.welcome-quote p:first-child::before {
  content: "\201C";
  color: var(--accent-yellow);
  font-size: 32px;
  line-height: 0;
  vertical-align: -4px;
  margin-right: 4px;
}
.welcome-quote p:last-child {
  margin-bottom: 0;
}
.welcome-quote p:last-child::after {
  content: "\201D";
  color: var(--accent-yellow);
  font-size: 32px;
  line-height: 0;
  vertical-align: -8px;
  margin-left: 2px;
}

.welcome-author {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 18px;
}

.author-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Founder portrait. The source is a low-light photo, so it is graded warm and
   vignetted into the card rather than dropped in as a bright rectangle. */
.author-portrait {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb), 0.55),
    0 0 0 5px rgba(var(--gold-rgb), 0.10),
    0 10px 24px rgba(var(--shadow-rgb), 0.6);
  transition: var(--transition-smooth);
}
.welcome-card:hover .author-portrait {
  box-shadow:
    0 0 0 1px rgba(var(--gold-rgb), 0.85),
    0 0 0 6px rgba(var(--gold-rgb), 0.16),
    0 12px 28px rgba(var(--shadow-rgb), 0.7);
}

.welcome-author .author-name {
  font-family: var(--font-outfit);
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
}

.welcome-author .author-role {
  font-family: var(--font-space);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-yellow);
}

.story-body p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 22px;
}

.story-highlight {
  font-family: var(--font-outfit);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  border-left: 3px solid var(--accent-gold);
  padding-left: 20px;
  margin-top: 32px;
}

/* ==========================================================================
   MISSION LIST
   ========================================================================== */
.mission-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.mission-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
.mission-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent-gold);
  opacity: 0.7;
}

/* ==========================================================================
   USP STATEMENT
   ========================================================================== */
.usp-statement {
  font-family: var(--font-outfit);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-primary);
  border-left: 3px solid var(--accent-gold);
  padding-left: 20px;
  margin-bottom: 40px;
  max-width: 820px;
}

/* ==========================================================================
   BULLET LISTS INSIDE CARDS
   ========================================================================== */
.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 4px;
}

.card-list li {
  position: relative;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-gold);
  opacity: 0.6;
}

/* ==========================================================================
   PRODUCTS & SERVICES ACCORDION
   ========================================================================== */
.services-layout {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 992px) {
  .services-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.services-layout .careers-intro {
  position: sticky;
  top: 110px;
}

@media (max-width: 992px) {
  .services-layout .careers-intro {
    position: static;
  }
}

/* Long service catalogues need far more room than a job listing */
.services-accordion .career-item.expanded .career-detail {
  max-height: 3200px;
}

.svc-group + .svc-group {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--line-rgb), 0.144);
}

.svc-group-title {
  font-family: var(--font-outfit);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}

.svc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.svc-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  opacity: 0.55;
}
.svc-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ==========================================================================
   PORTFOLIO / CLIENT TILES
   ========================================================================== */
.client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 992px) {
  .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.client-tile {
  background: var(--bg-secondary);
  border: 1px solid rgba(var(--line-rgb), 0.108);
  border-radius: 12px;
  padding: 24px 22px;
  min-height: 162px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transition: var(--transition-smooth);
}
.client-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), 0.2);
  background: rgba(var(--gold-rgb), 0.05);
  box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.176);
}

.client-name {
  font-family: var(--font-outfit);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

/* Client logos. The supplied artwork is opaque white-background PNG, so
   multiply blends the white away against the tile instead of stamping a
   white rectangle on it. Each file is pre-trimmed to its ink, so a shared
   box height makes the marks read at a consistent optical size. */
.client-logo {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #F5F0E4;
  transition: var(--transition-smooth);
}
.client-tile:hover .client-logo {
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.35);
}

/* --logo-h is set per logo in the markup: a height derived from that mark's
   aspect ratio so every logo occupies roughly the same optical area. Capping
   them all at one height instead would let wide wordmarks tower over the
   near-square emblems. */
.client-logo img {
  max-width: 100%;
  max-height: var(--logo-h, 56px);
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: var(--transition-smooth);
}

.client-tile:hover .client-logo img {
  transform: scale(1.04);
}

.client-meta {
  overflow-wrap: anywhere;
  font-family: var(--font-space);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

.testimonial-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--gold-rgb), 0.2);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.22);
}
.testimonial-card:hover .card-glow {
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.1) 0%, transparent 70%);
  width: 250px;
  height: 250px;
}

.quote-mark {
  font-family: var(--font-outfit);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--accent-gold);
  opacity: 0.25;
  margin-bottom: 18px;
}

.testimonial-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 28px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--line-rgb), 0.144);
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-space);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.testimonial-author .author-name {
  font-family: var(--font-outfit);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  line-height: 1.3;
}

.testimonial-author .author-role {
  font-family: var(--font-space);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-top: 3px;
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--glass-border);
  padding: 72px 0 32px;
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

@media (max-width: 992px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-tagline {
  font-family: var(--font-space);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}

.footer-col h5 {
  font-family: var(--font-space);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 16px;
  font-weight: 500;
}

.footer-col p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

.footer-col a:hover {
  color: var(--accent-gold);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--line-rgb), 0.18);
  font-family: var(--font-space);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==========================================================================
   HEADER — KEEP THE PRIMARY CTA ON ONE LINE ON SMALL SCREENS
   ========================================================================== */
@media (max-width: 768px) {
  .main-header .btn-primary {
    padding: 10px 20px;
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (max-width: 576px) {
  .main-header {
    padding: 10px 16px;
    gap: 12px;
  }
  .main-header .logo-text {
    font-size: 22px;
  }
  .main-header .btn-primary {
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 0.3px;
  }
  .main-header .btn-primary .btn-arrow {
    display: none;
  }
}

/* ==========================================================================
   ICON SYSTEM
   Symbols live in the sprite at the top of index.html and are pulled in with
   <svg class="icon"><use href="#i-name"></use></svg>. Geometry comes from the
   symbol; colour and weight are inherited from here, so any icon takes on the
   colour of whatever it sits inside.
   ========================================================================== */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   HERO BACKDROP
   Decorative abstract wash behind the hero. The overlay keeps the middle of
   the stage white so the emblem and copy never lose contrast.
   ========================================================================== */
.hero-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-backdrop img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: 128%;
  min-width: 1150px;
  height: auto;
  opacity: 0.40;
  /* Dissolve the image's own edges so it reads as atmosphere rather than a
     pasted rectangle. Masking the element beats overlaying a scrim, which
     would paint its own visible box. */
  -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 50%,
    #000 0%, rgba(0, 0, 0, 0.85) 42%, transparent 76%);
  mask-image: radial-gradient(ellipse 52% 54% at 50% 50%,
    #000 0%, rgba(0, 0, 0, 0.85) 42%, transparent 76%);
}

/* Blend the bottom of the hero into the section that follows. */
.hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0) 32%,
    rgba(10, 10, 11, 0.80) 58%,
    var(--bg-primary) 84%);
}

/* Keep the hero content stacked above the wash. */
.hero-container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .hero-backdrop img {
    width: 210%;
    min-width: 0;
    opacity: 0.4;
  }
}

/* ==========================================================================
   CARD ICON HEADER (core values, USP, business model)
   ========================================================================== */
.ind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.ind-head .ind-tag {
  margin-bottom: 0;
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gold-rgb), 0.07);
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  color: var(--accent-blue);
  transition: var(--transition-smooth);
}
.card-icon .icon {
  width: 21px;
  height: 21px;
}
.industry-card:hover .card-icon {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #0A0A0B;
  transform: scale(1.06);
}

/* ==========================================================================
   STAT + SERVICE ROW ICONS
   ========================================================================== */
.stat-icon {
  align-self: flex-start;
  width: 18px;
  height: 18px;
  color: var(--accent-blue);
  opacity: 0.75;
  margin-bottom: 10px;
}

.row-num {
  display: flex;
  align-items: center;
  gap: 12px;
}
.row-num .icon {
  width: 22px;
  height: 22px;
  color: var(--accent-blue);
  transition: var(--transition-smooth);
}
.service-row:hover .row-num .icon {
  color: var(--accent-gold-hover);
  transform: translateX(2px);
}

/* ==========================================================================
   OUR STORY — DECORATIVE BAND
   ========================================================================== */
.story-banner {
  margin: 0 0 56px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg-primary);
}
.story-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

@media (max-width: 768px) {
  .story-banner {
    height: 160px;
    margin-bottom: 36px;
  }
}

/* ==========================================================================
   CLOSING CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: #071430;
  padding: 104px 0;
  z-index: 1;
}

.cta-band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.cta-band-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  text-align: center;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-space);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-yellow);
  margin-bottom: 22px;
}
.cta-eyebrow .pulse-dot,
.cta-eyebrow .pulse-dot::after {
  background-color: var(--accent-yellow);
}

.cta-title {
  font-family: var(--font-outfit);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.cta-sub {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 36px;
  max-width: 620px;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.cta-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-space);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 3px;
}
.cta-mail:hover {
  color: #FFFFFF;
  border-bottom-color: var(--accent-yellow);
}
.cta-mail .icon {
  width: 17px;
  height: 17px;
}

@media (max-width: 768px) {
  .cta-band { padding: 72px 0; }
  .cta-title { font-size: 32px; }
  .cta-sub { font-size: 15px; }
  .cta-actions { gap: 20px; }
}

/* ==========================================================================
   FOOTER CONTACT LINES
   ========================================================================== */
.footer-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}
.footer-line .icon {
  width: 17px;
  height: 17px;
  color: var(--accent-blue);
  margin-top: 5px;
}

/* ==========================================================================
   MOTION LAYER
   Reveal targets are tagged by app.js at runtime, so nothing here depends on
   extra markup. Each block degrades to "just show it" under reduced motion.
   ========================================================================== */

/* Ambient gold particle field, behind everything. */
.ambient-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* Scroll-triggered staggered reveals. */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 65ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Parallax layers read --py, written by app.js on scroll. Each keeps its own
   base transform; the offset is composed in rather than replacing it. */
.hero-backdrop img {
  transform: translate(-50%, calc(-48% + var(--py, 0px)));
}
.story-banner img,
.cta-band-bg {
  /* Slightly oversized so the travel never exposes an edge. */
  transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
}

/* Tactile click ripple. */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--gold-rgb), 0.45) 0%,
    rgba(var(--gold-rgb), 0.16) 45%,
    rgba(var(--gold-rgb), 0) 70%);
  transform: scale(0);
  opacity: 0.9;
  pointer-events: none;
  animation: ripple-out 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}
@keyframes ripple-out {
  to { transform: scale(1); opacity: 0; }
}
/* The ripple must not escape its rounded button. */
.btn,
.play-btn-circle,
.client-tile,
.career-summary {
  overflow: hidden;
}

/* ==========================================================================
   HOVER STATES
   Gold lift and glow, so every interactive surface answers the pointer.
   ========================================================================== */
.btn {
  position: relative;
  transform: translateZ(0);
}
.btn-primary:hover {
  box-shadow:
    0 10px 30px rgba(var(--gold-rgb), 0.30),
    0 0 0 1px rgba(var(--gold-rgb), 0.45);
}
.btn-outline:hover {
  box-shadow: 0 8px 24px rgba(var(--gold-rgb), 0.16);
}

.industry-card:hover,
.service-box:hover,
.think-card:hover {
  box-shadow:
    0 18px 44px rgba(var(--shadow-rgb), 0.6),
    0 0 0 1px rgba(var(--gold-rgb), 0.22);
}

.client-tile:hover {
  box-shadow:
    0 16px 36px rgba(var(--shadow-rgb), 0.55),
    0 0 0 1px rgba(var(--gold-rgb), 0.28);
}

.showreel-card:hover {
  box-shadow:
    0 26px 60px rgba(var(--shadow-rgb), 0.65),
    0 0 0 1px rgba(var(--gold-rgb), 0.3);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link { position: relative; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active::after { transform: scaleX(0); }

/* Section numerals get a faint gold rule that grows in with the heading. */
.section-num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section-num::after {
  content: '';
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-gold), transparent);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
[data-reveal].is-revealed .section-num::after { width: 132px; }

/* ==========================================================================
   REDUCED MOTION
   One place that switches the whole motion layer off.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .section-num::after { width: 132px; transition: none; }
  .hero-backdrop img { transform: translate(-50%, -48%); }
  .story-banner img,
  .cta-band-bg { transform: none; }
  .ambient-field { display: none; }
  .marquee-track { animation: none; }
  .pulse-dot::after { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   PEOPLE SHOTS
   Illustrative stock figures, pre-masked to an organic blob with a soft edge
   and graded to the page's warm curve so they read as part of the graphic
   system rather than photographs pasted on top. Decorative only: none of
   these depict identified staff, clients or locations.
   ========================================================================== */
.people-shot {
  margin: 40px 0 0;
  max-width: 510px;
  position: relative;
}

.people-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Unmasked, so the frame does the seating: the same corner radius the
     cards use, plus a warm hairline where the photo meets the black page. */
  border-radius: 14px;
  box-shadow:
    0 24px 54px rgba(var(--shadow-rgb), 0.72),
    0 0 0 1px rgba(var(--gold-rgb), 0.22);
  transform: translate3d(0, var(--py, 0px), 0) scale(1);
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

/* A soft gold bloom behind the shape gives it somewhere to sit. */
.people-shot::before {
  content: '';
  position: absolute;
  inset: 6% -12% -10% -12%;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(var(--gold-rgb), 0.16) 0%,
    rgba(var(--gold-rgb), 0.05) 45%,
    transparent 72%);
  z-index: -1;
}

.people-shot:hover img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.018);
  box-shadow:
    0 28px 62px rgba(var(--shadow-rgb), 0.8),
    0 0 0 1px rgba(var(--gold-rgb), 0.45);
}

@media (max-width: 768px) {
  .people-shot {
    /* 510px would overrun the container's inner width on a phone. */
    max-width: 100%;
    margin: 28px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-shot img { transform: none; transition: none; }
  .people-shot:hover img { transform: none; }
}

/* The value-proposition figure sits centred between the statement and the
   USP cards, rather than in a text column like the others. */
.people-shot-wide {
  max-width: 450px;
  margin: 8px auto 48px;
}