/* ========================================
   CSS VARIABLES
======================================== */
:root {
  /* Font Family Variables */
  --font-heading: "DM Sans", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;

  /* Akuna Aqua - Full Scale */
  --akuna-aqua-25: #d2fbff;
  --akuna-aqua-50: #a8f7ff;
  --akuna-aqua-100: #81f4ff;
  --akuna-aqua-200: #5bf1ff;
  --akuna-aqua-300: #34eeff;
  --akuna-aqua-400: #0eebff;
  --akuna-aqua-500: #00d4e5;
  --akuna-aqua-600: #00b1c0;
  --akuna-aqua-700: #008a99;
  --akuna-aqua-800: #006473;
  --akuna-aqua-900: #00414c;
  --akuna-aqua-950: #001f26;

  /* Akuna Charcoal - Full Scale */
  --akuna-charcoal-25: #eeeff5;
  --akuna-charcoal-50: #dcdde4;
  --akuna-charcoal-100: #c4c6d1;
  --akuna-charcoal-200: #adafbe;
  --akuna-charcoal-300: #9598ac;
  --akuna-charcoal-400: #7e8198;
  --akuna-charcoal-500: #696c83;
  --akuna-charcoal-600: #56596b;
  --akuna-charcoal-700: #464854;
  --akuna-charcoal-800: #38373e;
  --akuna-charcoal-900: #252528;
  --akuna-charcoal-950: #131314;

  /* Utility Colors */
  --footer-bg: #011318;
  --bg-dark: #002832;

  /* Akuna Extended Palette */
  --akuna-verdanite: #59968f;  /* Verdant, balanced teal */
  --akuna-nordpine:  #2f635d;  /* Deep pine green */
  --akuna-verdark:   #394a39;  /* Forest charcoal */
  --akuna-stonefield:#6d6d54;  /* Muted olive gray */
  --akuna-sundrift:  #ad9356;  /* Warm gold accent */
}

/* ========================================
   LOCAL FONT LOADING
======================================== */
@font-face {
  font-family: "DM Sans";
  src: url("resources/fonts/akuna/DM_Sans/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("resources/fonts/akuna/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("resources/fonts/akuna/DM_Mono/DMMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("resources/fonts/akuna/DM_Mono/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("resources/fonts/akuna/DM_Mono/DMMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kumbh Sans";
  src: url("resources/fonts/akuna/Kumbh_Sans/KumbhSans-VariableFont_YOPQ,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Base text color for typography classes */
.h1,
.hero-heading-home,
.sub,
.h2,
.body-xl,
.body-l,
.body-m,
.body-s,
.body-xs,
.caption {
  color: var(--akuna-charcoal-25);
}

/* ========= FLUID TYPE CORE ========= */
/* Simple clamp() approach - works cross-browser */

.h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 100;
}

@media (min-width: 768px) {
  .h1 {
    font-size: 38px;
    font-weight: 100;
  }
}

@media (min-width: 1024px) {
  .h1 {
    font-size: 44px;
    font-weight: 100;
  }
}

@media (min-width: 1280px) {
  .h1 {
    font-size: 50px;
    font-weight: 100;
  }
}

@media (min-width: 1440px) {
  .h1 {
    font-size: 54px;
    font-weight: 100;
  }
}

/* Home hero override - Kumbh Sans + larger size */
.hero-heading-home {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 200;
  line-height: 1.13;
  text-transform: uppercase; 
  margin-bottom: 8px;
  font-size: 50px;

  @media (max-width: 428px) { 
    font-size: 42px;
    margin-bottom: 8px;
  }

  @media (min-width: 540px) { 
    font-size: 54px;
    margin-bottom: 12px;
  }

  @media (min-width: 768px) { 
    font-size: 68px;
    margin-bottom: 12px;
  }

  @media (min-width: 960px) { 
    font-size: 68px;
    margin-bottom: 16px;
  }
  
  @media (min-width: 1024px) { 
    font-size: 78px;
    margin-bottom: 16px;
  }

  @media (min-width: 1140px) { 
    font-size: 77px;
  }
  
  @media (min-width: 1440px) { 
    font-size: 90px;
  }
}

/* Bold spans inside home hero only */
.hero-heading-home .hero-bold {
  font-weight: 700;
}

.sub-hero {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 18px;
  max-width: 480px;

  @media (min-width: 622px) { 
    font-size: 20px;
    max-width: 600px;
  } 
  @media (min-width: 768px) {
    font-size: 21px;
    max-width: 684px;
    font-weight: 100;
  }

  @media (min-width: 800px) {
    font-size: 21px;
    max-width: 684px;
    font-weight: 100;
  }

  @media (min-width: 960px) { 
    max-width: 690px;
    font-weight: 100;
  }
  
  @media (min-width: 1024px) {
    font-size: 24px;
    max-width: 780px;
  }
  @media (min-width: 1140px) { 
    font-size: 24px;
    max-width: 780px;
  }

  @media (min-width: 1280px) {
    max-width: 862px;
  }
  @media (min-width: 1440px) { 
    max-width: 928px;
    font-size: 28px;
  }
}

.sub {
  font-family: var(--font-body);
  font-size: clamp(18px, 0.7vw + 1rem, 24px);
  font-weight: 100;
  margin-bottom: 32px;
}

.h2 {
  font-family: var(--font-body);
  font-size: clamp(32px, 3vw + 1rem, 60px);
  line-height: 1.2;
  font-weight: 200;
  letter-spacing: 0.02em;
}

.body-xl {
  font-family: var(--font-body);
  font-size: clamp(30px, 2vw + 1rem, 44px);
  line-height: 1.23em;
  font-weight: 100;
  padding-bottom: 22px;
}
.body-l {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.5vw + 0.5rem, 34px);
  font-weight: 100;
  line-height: 1.25em;
  letter-spacing: 0.025em;
}
.body-m {
  font-family: var(--font-body);
  font-size: clamp(18px, 1vw + 0.5rem, 22px);
  line-height: 1.4em;
  font-weight: 100;
  letter-spacing: 0.015em;
  padding-bottom: 20px;
}
.body-s {
  font-family: var(--font-body);
  font-size: clamp(16px, 0.5vw + 0.5rem, 18px);
  line-height: 1.5;
  font-weight: 200;
  letter-spacing: 0.025em;
}
.body-xs {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.5vw + 0.25rem, 16px);
  line-height: 1.6;
  font-weight: 200;
  letter-spacing: 0.01em;
}

/* Base link styles - scoped to content areas only, exclude buttons */
.content-section a:not(.cta-button),
.content-text a:not(.cta-button),
.body-xl a:not(.cta-button),
.body-l a:not(.cta-button),
.body-m a:not(.cta-button),
.body-s a:not(.cta-button),
.body-xs a:not(.cta-button),
.sub a {
  color: var(--akuna-aqua-300);
  text-decoration: none;
  font-weight: 100;
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
}

.content-section a:not(.cta-button):hover,
.content-text a:not(.cta-button):hover,
.body-xl a:not(.cta-button):hover,
.body-l a:not(.cta-button):hover,
.body-m a:not(.cta-button):hover,
.body-s a:not(.cta-button):hover,
.body-xs a:not(.cta-button):hover,
.sub a:hover {
  color: var(--akuna-aqua-200);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  opacity: 0.8;
}

.caption a {
  color: var(--akuna-aqua-200);
  font-weight: 200;
  z-index: 30;
}

.caption a:hover {
  color: var(--akuna-aqua-400);
  font-weight: 200;
}

/* ========================================
   PRIVACY POLICY CONTENT
======================================== */
.policy-content {
  color: var(--akuna-charcoal-25);
}
.policy-content .policy-section + .policy-section {
  margin-top: 2.5rem;
}
.policy-content h2,
.policy-content h3,
.policy-content h4 {
  font-family: var(--font-heading);
  color: var(--akuna-charcoal-25);
  font-weight: 200;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.policy-content h2 {
  font-size: clamp(26px, 1.8vw + 0.5rem, 44px);
  margin-top: 2rem;
}
.policy-content h3 {
  font-size: clamp(22px, 1.2vw + 0.5rem, 32px);
}
.policy-content h4 {
  font-size: clamp(18px, 0.8vw + 0.5rem, 24px);
  text-transform: none;
  font-weight: 300;
}
.policy-content p {
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.policy-content ul,
.policy-content ol {
  margin: 0 0 1.5rem 1.5rem;
  padding-left: 1rem;
}
.policy-content ul {
  list-style: disc;
}
.policy-content ol {
  list-style: decimal;
}
.policy-content li + li {
  margin-top: 0.5rem;
}
.policy-content strong,
.policy-content b {
  font-weight: 400;
}
.policy-content a {
  color: var(--akuna-aqua-100);
  text-decoration: underline;
  font-weight: 200;
}
.policy-content a:hover,
.policy-content a:focus {
  color: var(--akuna-aqua-300);
}

/* ========================================
   EYEBROW WINKS AND CURSOR:
   works with // Typing animation for eyebrow elements
======================================== */

.still-eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  color: var(--akuna-aqua-600);
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .still-eyebrow {
    font-size: 16px;
    line-height: 19.2px;
    letter-spacing: 0.32px;
  }
}

.eyebrow {
  font-family: var(--font-mono);
  visibility: hidden;
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0.32px;
  margin-bottom: 16px;
  text-transform: uppercase;
  color: var(--akuna-aqua-600);
}

.eyebrow.typing,
.eyebrow.typing-complete {
  visibility: visible;
}

/* Blinking cursor during typing */
.eyebrow.typing::after {
  content: '/';
  animation: blink 0.5s infinite;
}

.eyebrow.typing-done {
  visibility: visible;
}

.eyebrow.typing-done::after {
  content: '/';
  opacity: 0;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


.caption {
  font-family: var(--font-mono);
  font-size: clamp(14px, 0.5vw + 0.25rem, 14px);
  line-height: 1.35;
  opacity: 0.85;
}
.nav-item,
.nav-link {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mobile-parent {
  font-family: var(--font-mono);
  width: 100%;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  justify-content: space-between;
  padding-inline: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

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

/* ========================================
   BODY
======================================== */
body {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
  background: var(--bg-dark);
  color: white;
  overflow-x: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  margin: 0;
}

::selection {
  background: var(--akuna-aqua-700); /* Custom highlight background color */
  color: var(--akuna-charcoal-50); /* Custom text color for selected text */
}

/* For Firefox compatibility */
::-moz-selection {
  background: var(--akuna-aqua-700);
  color: var(--akuna-charcoal-50);
} 

/* ========================================
   GRID FOUNDATION
======================================== */

.container-1440 {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 7;
}

.container-1270 {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-left: 30px;
  padding-right: 30px;
}

/* Between 768px and 1270px: 40px side padding for text content */
@media (max-width: 1270px) and (min-width: 1024px) {
  .container-1270 {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Below 768px: 18px side padding */
@media (max-width: 768px) {
  .container-1270 {
    padding-left: 18px;
    padding-right: 18px;
  }
  /* fix for specificity issue */
  .container-1270.hidden.md\:block {
    display: none;
  }

}

/* Keep nav at 16px padding in the 768-1270 range */
@media (max-width: 1270px) and (min-width: 769px) {
  .nav-container .container-1270 {
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
  }
}

/* Above 1270px: 40px side padding for body content (not nav) */
@media (min-width: 1271px) {
  .container-1270 {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* Keep nav at 16px padding above 1270px */
  .nav-container .container-1270 {
    padding-left: 16px;
    padding-right: 16px;
    position: relative;  /* ADD IT HERE ONLY */
  }
}

/* ========================================
   LAYER SYSTEM (z-0 through z-50)
======================================== */

/* Main content wrapper for gradient */
.main-content-wrapper {
  position: relative;
  overflow-x: hidden;
}

/* Layer z-0: Background Gradient */
.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(180deg, #001f26 0%, #000c0e 100%);
  pointer-events: none;
}
/* Layer z-0: Background Gradient */
.bg-gradient-OG {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(180deg, #001f26 0%, #000c0e 100%);
  pointer-events: none;
  opacity: 0.95;
}

/* Layer z-0: Background Gradient */
.bg-gradient-short {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
 background: linear-gradient(168deg, #002D33 4.1%, #022A34 23.04%);
  pointer-events: none;
}

/* Layer z-0: Background Gradient */
.bg-gradient-D {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(
    176deg,
    #022d37 0%,
    #051e23 40.08%,
    #04232a 70.24%,
    #022d37 91.78%
  );
  pointer-events: none;
}
/* Layer z-0: Background Gradient */
.bg-gradient-X {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(
    176deg,
    #022d32 0%,
    #05171c 41.3%,
    #05171c 50.48%,
    #01272c 91.12%
  );
}

/* Layer z-0: Background Gradient */
.bg-gradient-C {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(176deg, #022D37 0%, #051E23 40%, #04232A 70%, #022D37 92%);
  pointer-events: none;
} 

/* Must begin at top of 1st section after Hero for proper blending */
.bg-gradient-home {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #022D37 0%, #051E23 40%, #04232A 70%, #022D37 92%);
}

/* Layer z-5: Background Pattern/Texture */
.bg-pattern {
  z-index: 5;
  opacity: 0.3;
  pointer-events: none;
}

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

/* Background Pattern Variations */
.bg-pattern.bg-fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  animation: breathe 8s ease-in-out infinite;
}

/* Layer z-7: Video Background */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}

/* Linear gradient overlay (bottom fade) */
.bg-video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(2, 45, 55, 0.00) 62.98%, #022D37 100%);  opacity: 1;
  z-index: 1;
  pointer-events: none;
}

/* Radial gradient overlay (left side glow) */
.bg-video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  background: radial-gradient(94.28% 60.31% at 0% 39.69%, rgba(1, 140, 153, 0.90) 0%, #022D37 100%);
  z-index: 2;
  pointer-events: none;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  z-index: 0;
}

@media (max-width: 768px) {
  .hero-video {
    object-position: 40% center; /* Shows more of the right side */
  }
}

.hero-video::-webkit-media-controls {
  display: none !important;
}

.hero-video::-webkit-media-controls-enclosure {
  display: none !important;
}

/* Parallax scrolling background */
.bg-pattern.bg-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 5;
}

.bg-pattern.bg-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Animated/floating background */
.bg-pattern.bg-animated {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  animation: breathe 8s ease-in-out infinite, float 20s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-20px);
  }
}

/* Layer z-10: Graphic Elements */
.graphic-elements {
  position: absolute;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}

/* Layer z-15: Grid Overlays */
.grid-overlays {
  position: absolute;
  width: 100%;
  z-index: 15;
  pointer-events: none;
}

.grid-overlay {
  position: absolute;
  opacity: 0.15;
  background-size: cover;
  background-position: center;
}

/* Layer z-20: Body Images - Left/Right Aligned */
.body-images-aligned {
  position: absolute;
  width: 100%;
  height: 0;
  z-index: 20;
  pointer-events: none;
}

.image-left,
.image-right {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0);
  pointer-events: auto;
}

/* Layer z-25: Body Images - Full Width */
.body-images-full {
  position: relative;
  z-index: 25;
  pointer-events: none;
}

/* Layer z-30: Text Content */
.content-layer {
  position: relative;
  z-index: 30;
}

/* Layer z-40: CTA Sections */
.cta-layer {
  position: relative;
  z-index: 40;
}

.nav-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  isolation: isolate; /* BLUR FIX: Isolate nav stacking context */
}

.footer-layer {
  position: relative;
  z-index: 50;
}

.bg-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: 0;
}

/* ========================================
   NAVIGATION
======================================== */

.nav-container {
  padding-top: 16px;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1270px) and (min-width: 1025px) {
  .nav-container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1024px) {
  .nav-container {
    padding-top: 0;
    max-width: 100%;
  }

  .nav-container .container-1270 {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
}

.navbar {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 4px;
  padding: 16px 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.template-career-single .navbar {
  background: rgba(10, 40, 45, 1);
}

.logo {
  height: 54px;
  width: auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--akuna-aqua-600);
  letter-spacing: 2px;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-link {
  color: var(--akuna-charcoal-100);
  font-family: "DM Mono", monospace;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.3s;
}

/* === Primary nav spacing and neutral wrappers (consistent on all pages) === */
@media (min-width: 768px) {
  .nav-links {
    gap: 2.5rem; /* matches gap-10 */
    position: relative; /* anchor for absolute submenu shell */
  }
  .nav-links > .menu-trigger {
    display: flex; /* wrappers don't add spacing */
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }
}

.explore-btn-mobile {
    padding: 13px 20px;
    background: linear-gradient(34deg, #a8f7ff 0%, #d2fbff 100%);
    border: none;
    border-radius: 4px;
    color: var(--akuna-aqua-900);
    font-family: "DM Mono", monospace;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.explore-btn {
  padding: 6px 20px;
  background: linear-gradient(34deg, #a8f7ff 0%, #d2fbff 100%);
  border: none;
  border-radius: 4px;
  color: var(--akuna-aqua-900);
  font-family: "DM Mono", monospace;
  font-size: 15px;
  font-weight: regular;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.2s;
}

.explore-btn:hover {
  transform: translateY(-2px);
  background: var(--akuna-aqua-100);
}

.explore-btn:active {
  transform: translateY(-2px);
  background: var(--akuna-aqua-200);
}

@media (max-width: 960px) {
  .explore-btn-desktop {
    display: none;
  }
}

@media (max-width: 1024px) {
  .navbar {
    border-radius: 0px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}

/* ========================================
   HERO SECTION
======================================== */

.hero-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0;
}

.hero-content-wrapper {
  /*  max-width: 864px; */
}

.hero-with-grid,
.hero-section {
  height: 100vh;
}

/* ========================================
   CONTENT SECTIONS
======================================== */

.content-section {
  padding: 120px 0;
  position: relative;
}

.content-section-top {
  padding: 160px 0 80px;
  position: relative;
}

.large-text {
  color: var(--akuna-charcoal-50);
  font-size: 32px;
  font-weight: 200;
  line-height: 1.4;
  max-width: 800px;
}

/* ========================================
   CTA SECTION
======================================== */

.cta-section {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 180px 0 160px;
}

@media (max-width: 768px) {
  .cta-section {
    padding: 100px 0;
  }
}
.cta-heading {
  font-size: 42px;
  font-weight: 200;
  line-height: 1.3;
  color: var(--akuna-charcoal-25);
  margin-bottom: 24px;
}

.cta-text {
  color: var(--akuna-charcoal-50);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 40px;
}

.cta-button {
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--akuna-aqua-50);
  border-radius: 4px;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#applyNowBtn,
#backBtn {
  background: var(--akuna-aqua-700);
}

.cta-button:hover {
  background: rgba(168, 247, 255, 0.1);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--akuna-charcoal-25);
}

/* ========================================
   FOOTER
======================================== */

.footer-wrapper {
  background: var(--akuna-aqua-950);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.footer {
  padding: 64px 0 40px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 80px;
}

.footer-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--akuna-aqua-600);
  letter-spacing: 2px;
}

.footer-columns {
  display: flex;
  gap: 80px;
}

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

.footer-heading {
  color: var(--akuna-charcoal-25);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.footer-heading:hover {
  color: var(--akuna-aqua-100);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}

.footer-link {
  color: var(--akuna-charcoal-100);
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-link:hover {
  color: var(--akuna-aqua-200);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-copyright {
  color: var(--akuna-charcoal-400);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 300;
}

.footer-copyright a:hover {
  color: var(--akuna-aqua-200);
}

.social-links {
  display: flex;
  gap: 20px;
}

.social-icon {
  width: 22px;
  height: 22px;
  color: var(--akuna-charcoal-50);
  transition: color 0.3s;
  cursor: pointer;
}

.social-icon:hover {
  color: var(--akuna-aqua-200);
}

@media (max-width: 768px) {
  .footer {
    padding: 80px 0 40px;
  }

  .footer-content {
    flex-direction: column;
    gap: 40px;
  }

  .footer-columns {
    flex-direction: column;
    gap: 40px;
  }
}

/* ========================================
   ANIMATIONS & PARALLAX
======================================== */

.parallax-layer {
  will-change: transform;
}

.animate-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s, /* delay 0.2s */
    transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s;
}

.animate-fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s,
    transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s;
}

.animate-slide-in-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s,
    transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s;
}

.animate-slide-in-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   MAP DOTS
======================================== */

@media (max-width: 768px) {
  .container-1440 section {
    grid-template-columns: 1fr !important;
  }

  .team-photo-section {
    order: 1;
  }

  .grid-numbers-section {
    order: 2;
  }
}

#chicago-dot::after {
  content: "Chicago";
}
#london-dot::after {
  content: "London";
}
#shanghai-dot::after {
  content: "Shanghai";
}
#singapore-dot::after {
  content: "Singapore";
}
#sydney-dot::after {
  content: "Sydney";
}

[id$="-dot"]::after {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 177, 192, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

[id$="-dot"]:hover::after {
  opacity: 1;
}

.pulse-dot {
  width: 12px;
  height: 12px;
  background: var(--akuna-aqua-200);
  border-radius: 50%;
  position: relative;
  animation: pulse 2s ease-in-out infinite;
}

.pulse-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: var(--akuna-aqua-200);
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse-ring 2s ease-in-out infinite;
}

@media (max-width: 768px) {
  .pulse-dot {
    width: 8px;
    height: 8px;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.pulse-dot {
  position: relative;
  cursor: pointer;
}


/* ========================================
   LOTTIE ANIMATIONS
======================================== */

.lottie-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lottie-screen {
  mix-blend-mode: screen;
}

.lottie-multiply {
  mix-blend-mode: multiply;
}

.lottie-overlay {
  mix-blend-mode: overlay;
}

.grid-numbers-section {
  position: relative;
  width: 100%;
  height: auto;
}

.grid-numbers-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-photo-section img {
  width: 100%;
  height: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0);
}

.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .content-split {
    grid-template-columns: 1fr;
  }
}

.grid-base {
  opacity: 0.9;
}

.lottie-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
}

.grid-height-matched {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.grid-height-matched .grid-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top right;
}

.grid-height-matched .lottie-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Remove side fades on mobile for Lottie bg dots */
@media (max-width: 768px) {
  .lottie-bg-dots {
    -webkit-mask-image: linear-gradient(to right, black 0%, black 100%) !important;
    mask-image: linear-gradient(to right, black 0%, black 100%) !important;
  }
}

/* ========================================
   CSS GRID PATTERNS
======================================== */

/* === Adjacent grid: mobile stack fixes (≤768px) === */
@media (max-width: 768px) {
  /* give stacked grids their own box */
  .adj-grid {
    height: auto; /* stop relying on sibling height */
    aspect-ratio: var(--stack-ratio, 4/3);
    min-height: 220px; /* safety floor; tweak if needed */
  }
  .adj-grid::before {
    inset: 0;
  } /* ensure paint fills the box */

  /* when a numbers overlay exists, let it fill the grid box */
  .adj-grid .lottie-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* if any instance still uses this class, don’t force 100% height */
  .grid-height-matched {
    height: auto;
  }
}

/* ==== Adjacent Grid modules (left/right), height matches sibling image ==== */
:root {
  --grid-cell: 56px;
  --grid-line: 1px;
  --grid-color: rgba(255, 255, 255, 0.18);
  --grid-opacity: 0.9;
  --fade-start: 60%; /* where the fade begins from the seam */
  --grid-fade: 1; /* 1 = fade on, 0 = no fade */
}

.content-split {
  align-items: stretch;
} /* equal-height columns */ /*  */

.adj-grid {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* grid paint (behind numbers) */
.adj-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grid-opacity);

  background-image:
    /* horizontal → keeps a line at the top */ repeating-linear-gradient(
      to bottom,
      var(--grid-color) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell)
    ),
    /* vertical → edge line comes from seam side via --v-dir */
      repeating-linear-gradient(
        var(--v-dir, to right),
        var(--grid-color) 0 var(--grid-line),
        transparent var(--grid-line) var(--grid-cell)
      );
  background-size: var(--grid-cell) var(--grid-cell),
    var(--grid-cell) var(--grid-cell);
  background-repeat: repeat, repeat;
  background-position: var(--bg-pos, left top);

  /* smoother, adjustable fade away from the seam */
  -webkit-mask-image: linear-gradient(
    var(--fade-axis, to right),
    rgba(0, 0, 0, 1) calc(var(--fade-start) * var(--grid-fade)),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    var(--fade-axis, to right),
    rgba(0, 0, 0, 1) calc(var(--fade-start) * var(--grid-fade)),
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* LEFT module (grid on LEFT, image on RIGHT) */
.adj-grid--left::before {
  --v-dir: to left; /* edge line at right */
  --bg-pos: right top;
  --fade-axis: to left; /* fade inward from right seam */
}

/* RIGHT module (grid on RIGHT, image on LEFT) */
.adj-grid--right::before {
  --v-dir: to right; /* edge line at left */
  --bg-pos: left top;
  --fade-axis: to right; /* fade inward from left seam */
}

/* Numbers overlay sits above grid */
.adj-grid .lottie-container {
  z-index: 2;
  opacity: 0.4;
}

/* Simple appearance variants */
.adj-grid--naked {
  /* grid only (no numbers div in HTML) */
}
.adj-grid--soft {
  --grid-opacity: 0.75;
  --fade-start: 70%;
}
.adj-grid--hard {
  --grid-opacity: 0.95;
  --fade-start: 45%;
}
.adj-grid--nofade {
  --grid-fade: 0;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  :root {
    --grid-cell: 30px;
  }
}

/* ==== Adjacent Grid modules (left/right), height matches sibling image ==== */
:root {
  --grid-cell: 56px; /* inherits to both sides; mobile override below */
  --grid-line: 1px;
  --grid-color: rgba(255, 255, 255, 0.18);
  --grid-opacity: 0.9; /* grid layer strength */
  --grid-fade: 1; /* 1 = fade from seam, 0 = no fade */
}

/* Parent split: ensure equal-height columns */
.content-split {
  align-items: stretch;
}

/* Base container that will mirror the image height */
.adj-grid {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Grid paint (behind numbers) */
.adj-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grid-opacity);

  /* two-layer grid: horizontal (top line), vertical (edge line) */
  background-image: repeating-linear-gradient(
      to bottom,
      var(--grid-color) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell)
    ),
    repeating-linear-gradient(
      var(--v-dir, to right),
      /* swapped per side below */ var(--grid-color) 0 var(--grid-line),
      transparent var(--grid-line) var(--grid-cell)
    );
  background-size: var(--grid-cell) var(--grid-cell),
    var(--grid-cell) var(--grid-cell);
  background-repeat: repeat, repeat;

  /* soft fade away from the image seam (toggle with --grid-fade) */
  -webkit-mask-image: linear-gradient(
    var(--fade-axis, to left),
    rgba(0, 0, 0, 1) calc(60% * var(--grid-fade)),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    var(--fade-axis, to left),
    rgba(0, 0, 0, 1) calc(60% * var(--grid-fade)),
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* LEFT column version (image on the RIGHT) — edge line at the RIGHT */
.adj-grid--left::before {
  /* put vertical line on the right edge & anchor fade from that seam */
  --v-dir: to left;
  background-position: right top, right top;
  --fade-axis: to left; /* fade inward from right seam */
}

/* RIGHT column version (image on the LEFT) — edge line at the LEFT */
.adj-grid--right::before {
  /* put vertical line on the left edge & anchor fade from that seam */
  --v-dir: to right;
  background-position: left top, -1px top;
  --fade-axis: to right; /* fade inward from left seam */
}

/* Numbers layer sits above the grid paint */
.adj-grid .lottie-container {
  z-index: 2;
  opacity: 0.2;
}

/* Optional: grid-only variant just omits the Lottie div in HTML */

/* Mobile: stack order helpers (apply to the two split children) */
@media (max-width: 768px) {
  :root {
    --grid-cell: 30px;
  }
  .stack-grid-first {
    order: 1;
  }
  .stack-grid-last {
    order: 2;
  }
  .stack-image-first {
    order: 1;
  }
  .stack-image-last {
    order: 2;
  }

  /* If you want a stronger fade on mobile: */
  .adj-grid {
    --grid-fade: 1;
  }
}

/* Hero grid - desktop */
.hero-with-grid {
  position: relative;
}

.hero-with-grid > * {
  position: relative;
  z-index: 1;
}

.hero-with-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.14);

  background: repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--cell) - var(--line)),
      var(--line-color) calc(var(--cell) - var(--line)),
      var(--line-color) var(--cell)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--cell) - var(--line)),
      var(--line-color) calc(var(--cell) - var(--line)),
      var(--line-color) var(--cell)
    );
  background-size: var(--cell) var(--cell);
  background-repeat: repeat;
  background-position: right top;

  right: calc((100% - 100vw) / 2);
  left: auto;
  width: 708px;

  -webkit-mask-image: radial-gradient(
    ellipse 100% 50% at 100% 50%,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 100% 50% at 100% 50%,
    black 0%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

@media (min-width: 1440px) {
  .hero-with-grid::after {
    width: 50vw;
  }
}

/* Hero grid - mobile */
@media (max-width: 768px) {
  .hero-with-grid {
    position: relative;
    height: 80vh;
  }

  /* Hero mobile: full visible viewport height — stable production placement 2025-10-19 */
  @media (max-width: 1024px) {
    .hero-section,
    .hero-with-grid {
      height: 100vh; /* fallback */
    }
    .hero-section,
    .hero-with-grid h1 {
      margin-bottom: 0px;
    }
  }

  .hero-with-grid > * {
    position: relative;
    z-index: 2;
  }

  .hero-with-grid::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    height: 70vh;

    --cell: 30px;
    --line: 1px;
    --line-color: rgba(255, 255, 255, 0.12);

    background: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--cell) - var(--line)),
        var(--line-color) calc(var(--cell) - var(--line)),
        var(--line-color) var(--cell)
      ),
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--cell) - var(--line)),
        var(--line-color) calc(var(--cell) - var(--line)),
        var(--line-color) var(--cell)
      );
    background-size: 30px 30px;
    background-position: center bottom;

    -webkit-mask-image: radial-gradient(
      ellipse 50% 60% at 50% 100%,
      black 50%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 50% 60% at 50% 100%,
      black 50%,
      transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

/* Section grid - right aligned */
.section-with-grid {
  position: relative;
}
.section-with-grid > * {
  position: relative;
  z-index: 1;
}
.section-with-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.14);
  background: 
    repeating-linear-gradient(to right, transparent 0, transparent calc(var(--cell) - var(--line)), var(--line-color) calc(var(--cell) - var(--line)), var(--line-color) var(--cell)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cell) - var(--line)), var(--line-color) calc(var(--cell) - var(--line)), var(--line-color) var(--cell));
  background-size: var(--cell) var(--cell);
  background-position: right top;
  right: calc((100% - 100vw) / 2);
  left: auto;
  width: 708px;
  mask-image: radial-gradient(ellipse 100% 50% at 100% 50%, black 0%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}

@media (min-width: 1440px) {
  .section-with-grid::after {
    width: 50vw;
  }
}

@media (max-width: 768px) {
  .section-with-grid::after {
    left: auto;
    right: calc((100% - 100vw) / 2);
    width: 100vw;
    --cell: 30px;
    --line-color: rgba(255, 255, 255, 0.12);
    background-size: 30px 30px;
    background-position: right;
    mask-image: radial-gradient(ellipse 50% 60% at 100% 50%, black 50%, transparent 100%);
  }
}

/* Section grid - left aligned */
.section-with-grid-left {
  position: relative;
}
.section-with-grid-left > * {
  position: relative;
  z-index: 1;
}
.section-with-grid-left::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.14);
  background: 
    repeating-linear-gradient(to right, transparent 0, transparent calc(var(--cell) - var(--line)), var(--line-color) calc(var(--cell) - var(--line)), var(--line-color) var(--cell)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--cell) - var(--line)), var(--line-color) calc(var(--cell) - var(--line)), var(--line-color) var(--cell));
  background-size: var(--cell) var(--cell);
  background-position: left top;
  left: calc((100% - 100vw) / 2);
  right: auto;
  width: 708px;
  mask-image: radial-gradient(ellipse 100% 50% at 0% 50%, black 0%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: cover;
}

@media (min-width: 1440px) {
  .section-with-grid-left::after {
    width: 50vw;
  }
}

@media (max-width: 768px) {
  .section-with-grid-left::after {
    right: auto;
    left: calc((100% - 100vw) / 2);
    width: 100vw;
    --cell: 30px;
    --line-color: rgba(255, 255, 255, 0.12);
    background-size: 30px 30px;
    background-position: left;
    mask-image: radial-gradient(ellipse 50% 60% at 0% 50%, black 50%, transparent 100%);
  }
}
/* Careers Hero - Desktop & Mobile overrides */
.hero-careers {
  min-height: 500px;
  height: auto;
  padding: 120px 0 0px;
}

@media (max-width: 768px) {
  .hero-careers {
      height: auto;
      padding: 120px 0 0px;
  }
}

/* Top-down pattern grid - fades from top */
.grid-pattern-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;

  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.14);

  background: repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--cell) - var(--line)),
      var(--line-color) calc(var(--cell) - var(--line)),
      var(--line-color) var(--cell)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--cell) - var(--line)),
      var(--line-color) calc(var(--cell) - var(--line)),
      var(--line-color) var(--cell)
    );
  background-size: var(--cell) var(--cell);
  background-repeat: repeat;
  background-position: center top;

  /* Ellipse fade from top center down */
  -webkit-mask-image: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 100% at 50% 0%,
    black 0%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


.quote-lines {
  position: relative;
  border: none; /* hide the real borders */
}

.quote-lines::before,
.quote-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.5px;
  background: linear-gradient(
    to right,
    rgba(238,239,245,0),
    rgba(238,239,245,0.25),
    rgba(238,239,245,0.25),
    rgba(238,239,245,0)
  );
  pointer-events: none;
}

.quote-lines::before {
  top: 0;
}

.quote-lines::after {
  bottom: 0;
}

.block-edge-line {
  position: relative;
  border-top-left-radius: 4px;
  border-left: 0.5px solid rgba(238,239,245,0.25);
  border-top: 0.5px solid rgba(238,239,245,0.25);
  overflow: hidden;
}
/* Patchwork Fade */
.fade-image-edge {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #006473 35%,
    #006473 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #006473 35%,
    #006473 100%
  );
}

@media (max-width: 768px) {
  .quote-lines {
    border-top-width: 1px !important;
    border-bottom-width: 1px !important;
  }
}
/* === Section Grid TL - Desktop/Tablet ≥1025px === */
.content-section.grid-tl {
  position: relative;
  padding: 160px 0 80px;
  display: flex;
  align-items: center; /* Vertical center */
}

.content-section.grid-tl .container-1270 {
  display: grid;
  max-width: 1270px;
}

.content-section.grid-tl > * {
  position: relative;
  z-index: 1;
}

/* CSS PATTERN — TOP LEFT (ALL WIDTHS, FLUID HEIGHT) */
.content-section.grid-tl::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.18);
  background-image: repeating-linear-gradient(
      to bottom,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    ),
    repeating-linear-gradient(
      to right,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    );
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(
    100% 100% at 0% 0%,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(100% 100% at 0% 0%, black 0%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.content-section.grid-tl .content-text {
  max-width: 100%;
  margin-bottom: 40px;
}

.content-section.grid-tl .cta-button {
  margin-top: 0;
}

/* === Section Grid TR - Desktop/Tablet ≥1025px (mirror of TL) === */
.content-section.grid-tr {
  position: relative;
  padding: 160px 0 80px;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .content-section.grid-tr {
    padding: 100px 0 40px;
  }
}

.content-section.grid-tr > * {
  position: relative;
  z-index: 1;
}

/* ✅ CSS PATTERN — TOP RIGHT (true mirror of TL) */
.content-section.grid-tr::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.18);
  background-image: repeating-linear-gradient(
      to bottom,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    ),
    repeating-linear-gradient(
      to left,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    );
  background-size: var(--cell) var(--cell);
  background-position: right top, right top;
  -webkit-mask-image: radial-gradient(
    100% 100% at 100% 0%,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(100% 100% at 100% 0%, black 0%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ≤768px */
@media (max-width: 768px) {
  .content-section.grid-tl {
    padding: 100px 0 40px;
  }
  .content-section.grid-tl::after {
    --cell: 30px;
    background-size: var(--cell) var(--cell);
    aspect-ratio: auto; /* ← ADD THIS - removes the 1/1 square constraint */
    width: 80%; /* ← ADD THIS - controls horizontal spread */
    height: 100%; /* ← ADD THIS - fills section height */
    max-width: 100vw;
    right: 0;
  }

  .content-section.grid-tr::after {
    --cell: 30px;
    background-size: var(--cell) var(--cell);
    aspect-ratio: auto;
    width: 80%;
    height: 100%;
    max-width: 100vw;
    right: 0;
  }

  .grid-pattern-top::after {
    --cell: 30px;
    background-size: var(--cell) var(--cell), var(--cell) var(--cell);
    max-width: 100vw;
    top: 0;
  }
}

/* New modifier class for equal padding */
@media (min-width: 960px) {
  .content-section.grid-tl.equal-padding {
    padding: 160px 0;
  }
}

@media (max-width: 959px) {
  .content-section.grid-tl.equal-padding {
    padding: 120px 0;
  }
}

/* New modifier class for equal padding */
@media (min-width: 960px) {
  .content-section.grid-tr.equal-padding {
    padding: 200px 0;
  }
}

@media (max-width: 959px) {
  .content-section.grid-tr.equal-padding {
    padding: 120px 0;
  }
}

/* CLEAN ARC FADE — Top-left corner to arc edge */
.content-section.content-split
  .adj-grid.adj-grid--right.adj-grid--naked.adj-grid--curvefade::before {
  -webkit-mask-image: radial-gradient(
    ellipse 95% 105% at 0% 0%,
    /* ← reduced from 140% to 120% */ #000 0%,
    #000 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 95% 105% at 0% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* CLEAN ARC FADE — Top-right corner to arc edge */
.content-section.content-split
  .adj-grid.adj-grid--left.adj-grid--naked.adj-grid--curvefade::before {
  -webkit-mask-image: radial-gradient(
    ellipse 95% 105% at 100% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 95% 105% at 100% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* CLEAN ARC FADE — Top-right corner (for grids WITH numbers) */
.content-section.content-split
  .adj-grid.adj-grid--left.adj-grid--curvefade::before {
  -webkit-mask-image: radial-gradient(
    ellipse 95% 105% at 100% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 95% 105% at 100% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* CLEAN ARC FADE — Top-left corner (for grids WITH numbers) */
.content-section.content-split
  .adj-grid.adj-grid--right.adj-grid--curvefade::before {
  -webkit-mask-image: radial-gradient(
    ellipse 95% 105% at 0% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 95% 105% at 0% 0%,
    #000 0%,
    #000 45%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}


/* === BOTTOM LEFT GRID === */
.grid-bl {
  position: relative;
}

.grid-bl > * {
  position: relative;
  z-index: 1;
}

.grid-bl::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.18);
  background-image: repeating-linear-gradient(
      to bottom,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    ),
    repeating-linear-gradient(
      to right,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    );
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(
    100% 100% at 0% 100%,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(100% 100% at 0% 100%, black 0%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
background-position: left calc(100% - 1px), left calc(100% - 1px);
}

/* === BOTTOM RIGHT GRID === */
.grid-br {
  position: relative;
}

.grid-br > * {
  position: relative;
  z-index: 1;
}

.grid-br::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  --cell: 56px;
  --line: 1px;
  --line-color: rgba(255, 255, 255, 0.18);
  background-image: repeating-linear-gradient(
      to bottom,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    ),
    repeating-linear-gradient(
      to left,
      var(--line-color) 0 var(--line),
      transparent var(--line) var(--cell)
    );
  background-size: var(--cell) var(--cell);
  background-position: right top, right top;
  -webkit-mask-image: radial-gradient(
    100% 100% at 100% 100%,
    black 0%,
    transparent 100%
  );
  mask-image: radial-gradient(100% 100% at 100% 100%, black 0%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-position: right calc(100% - 1px), right calc(100% - 1px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .grid-bl::after {
    --cell: 30px;
    background-size: var(--cell) var(--cell);
    aspect-ratio: auto;
    width: 80%;
    height: 100%;
    max-width: 100vw;
  }

  .grid-br::after {
    --cell: 30px;
    background-size: var(--cell) var(--cell);
    aspect-ratio: auto;
    width: 80%;
    height: 100%;
    max-width: 100vw;
  }
}
.grid-br-responsive {
  @media (min-width: 768px) {
    position: relative;
  }
}
.grid-br-responsive > * {
  @media (min-width: 768px) {
    position: relative;
    z-index: 1;
  }
}
.grid-br-responsive::after {
  @media (min-width: 768px) {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    aspect-ratio: 1 / 1;
    z-index: 0;
    pointer-events: none;
    --cell: 56px;
    --line: 1px;
    --line-color: rgba(255, 255, 255, 0.18);
    background-image: repeating-linear-gradient(
        to bottom,
        var(--line-color) 0 var(--line),
        transparent var(--line) var(--cell)
      ),
      repeating-linear-gradient(
        to left,
        var(--line-color) 0 var(--line),
        transparent var(--line) var(--cell)
      );
    background-size: var(--cell) var(--cell);
    -webkit-mask-image: radial-gradient(
      100% 100% at 100% 100%,
      black 0%,
      transparent 100%
    );
    mask-image: radial-gradient(100% 100% at 100% 100%, black 0%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: right calc(100% - 1px), right calc(100% - 1px);
  }
}

/* ========================================
   CAREERS PAGE - FILTERING & JOB CARDS
======================================== */

/* Filter Bar Wrapper - Sticky on mobile */
.filter-bar-wrapper {
  position: sticky;
  top: 64px;
  backdrop-filter: blur(30px);
  z-index: 100;
  width: 100%;
  left: 0;
  right: 0;
  margin-bottom: 50px;
  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.15);
  background: var(--akuna-aqua-800: #006473); 
}

/* Remove gap from filter-bar-wrapper's container on mobile */
.filter-bar-wrapper .container-1270 {
  gap: 0;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  margin-bottom: 0; /* Remove margin so content flows underneath */
  gap: 0;
  background: var(--akuna-aqua-800: #006473); 

}

.filter-bar-actions {
  display: none; /* Hidden by default */
  justify-content: space-between;
  padding: 8px 2px 14px 6px;
}

.filter-bar-actions.active {
  display: flex; /* Show when active */
}

.filter-bar-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--akuna-aqua-600);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}

.filter-bar-action-btn:hover {
  color: var(--akuna-aqua-200);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .filter-bar-actions {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .filter-bar-wrapper {
    display: none; /* Hide entire filter bar on desktop */
  }
  .filter-bar-actions {
    display: none !important;
  }
}

.filter-trigger {
  display: flex;
  align-items: center;
  color: var(--akuna-aqua-25);
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  width: 100%;
  height: 44px;
  padding: 0 16px 0 23px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid rgba(149, 152, 172, 0.35);
  background: rgba(0, 31, 38, 0.35);
  backdrop-filter: blur(30px);
}

.filter-count {
  font-family: var(--font-mono);
  color: var(--akuna-charcoal-50);
  font-weight: 200;
  letter-spacing: 0.06em;
  margin-right: auto;
  margin-left: 8px;
  font-size: 12px;
}

.filter-icon,
.action-icon {
  width: 20px;
  height: 20px;
  color: var(--akuna-aqua-100);
}

.filter-actions {
  display: flex;
  gap: 24px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--akuna-aqua-600);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}

.action-btn:hover {
  color: var(--akuna-aqua-200);
}

/* Jobs Grid */
.jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 80px;
/*  padding-top: 90px;  DON"T TOUCH THIS */
}

.jobs-grid.hidden {
  display: none !important;
}

/* Job Card */
.job-card {
  background: rgba(0, 177, 192, 0.08);
  border: none;
  border-radius: 4px;
  padding: 20px 24px;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

.job-card.job-card--enter {
  opacity: 0;
  transform: translateY(18px);
}

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

.job-card:hover {
  background: rgba(0, 177, 192, 0.12);
  border-right: 4px solid var(--akuna-aqua-200);
}

.job-title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 200;
  color: var(--akuna-aqua-200);
  margin: 0 0 8px 0;
  line-height: 1.3;
  flex-grow: 1; /* Pushes location to bottom */
}

@media (prefers-reduced-motion: reduce) {
  .job-card {
    transition: background 0.2s ease, border-color 0.2s ease;
    transform: none !important;
    opacity: 1 !important;
  }
}

.job-location {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 300;
  color: var(--akuna-charcoal-100);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-top: auto; /* Stays at bottom */
}

/* Tablet/Desktop Grid - 2 columns */
@media (min-width: 768px) {
  .jobs-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
  }
}

/* Sidebar Actions - Hidden on mobile, shown on desktop */
.sidebar-actions {
  display: none;
}

/* Desktop - hide filter actions on mobile initially */
@media (max-width: 767px) {
  .filter-actions {
    display: none;
  }
}

/* === FILTER OVERLAY === */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-dark);
  z-index: 10000; /* Above nav (9999) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.filter-overlay.active {
  opacity: 1;
  visibility: visible;
}

.filter-overlay-content {
  max-width: 1270px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 62px 18px 120px;
}

/* Filter Header - Compact */
.filter-header {
  position: fixed;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--bg-dark);
  left: 0;
  padding: 19px 17px 16px;
  top: 0;
}

.filter-title {
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: white;
  margin: 0;
  font-weight: 300;
}

.filter-close {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-close:hover {
  color: var(--akuna-aqua-200);
}

/* Filter Sections */
.filter-sections {
  flex: 1;
}

/* Accordion */
.filter-accordion {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0; /* Reduced from 20 */
  background: transparent;
  border: none;
  color: var(--akuna-charcoal-200);
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: left;
}

.accordion-trigger.selected {
  color: var(--akuna-aqua-300); /* Aqua when selection made */
}

.accordion-trigger:hover {
  color: var(--akuna-aqua-200);
}

.accordion-icon {
  transition: transform 0.3s ease;
  color: var(--akuna-aqua-100);
}

.filter-accordion.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.filter-accordion.open .accordion-content {
  max-height: 500px;
}

.accordion-options {
  padding: 0 0 14px 0; /* Reduced from 20 */
  display: flex;
  flex-direction: column;
  gap: 4px; /* Reduced from 12 */
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px; /* Reduced from 12 */
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px; /* Slightly smaller */
  color: white;
  font-weight: 300;
}

.filter-checkbox input[type="checkbox"] {
  width: 18px; /* Slightly smaller */
  height: 18px;
  cursor: pointer;
}
.filter-option {
  padding: 8px 0 8px 16px; /* Added left padding */
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  color: white;
  font-weight: 300;
}

.filter-option:hover {
  color: var(--akuna-aqua-200);
}

/* Keyword Search - Compact */
.filter-search {
  position: relative;
  padding: 16px 0; /* Reduced from 24 */
}

.keyword-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 10px 36px 10px 14px; /* Reduced padding */
  color: white;
  font-family: var(--font-body);
  font-size: 15px; /* Slightly smaller */
  font-weight: 300;
}

.keyword-input::placeholder {
  color: var(--akuna-charcoal-300);
}

.keyword-input:focus {
  outline: none;
  border-color: var(--akuna-aqua-600);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--akuna-charcoal-300);
  pointer-events: none;
}

/* Tech Tags - Compact */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Reduced from 12 */
  padding: 16px 0 24px; /* Reduced from 24/40 */
}

.tech-tag {
  background: transparent;
  border: 1px solid var(--akuna-aqua-600);
  color: var(--akuna-aqua-600);
  font-family: var(--font-mono);
  font-size: 11px; /* Slightly smaller */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 14px; /* Reduced from 8/16 */
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent; /* nicer on mobile */
}

/* Selected (always) */
.tech-tag.active {
  background: var(--akuna-aqua-600);
  color: var(--bg-dark);
}

/* Hover only on hover-capable pointers (desktops/trackpads) */
@media (hover: hover) and (pointer: fine) {
  .tech-tag:hover {
    background: var(--akuna-aqua-600);
    color: var(--bg-dark);
  }
}

/* Filter Footer - Compact */
.filter-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 16px; /* Reduced from 24 */
  margin-top: auto;
  position: fixed;
  background: var(--bg-dark);
  bottom: 0;
  padding-bottom: 20px;
  left: 0;
  width: 100%;
}

.apply-filters-btn {
  width: 80%;
  display: block;
  margin: auto;
  background: rgba(91, 241, 255, 0.15);
  border: 1px solid var(--akuna-aqua-200);
  color: var(--akuna-aqua-200);
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px; /* Reduced from 16 */
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px; /* Reduced from 24 */
}

.apply-filters-btn:hover {
  background: rgba(91, 241, 255, 0.25);
}

.filter-footer-actions {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.footer-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--akuna-aqua-600);
  font-family: var(--font-mono);
  font-size: 11px; /* Reduced from 12 */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}

.footer-action-btn:hover {
  color: var(--akuna-aqua-200);
}

/* === DESKTOP RESPONSIVE LAYOUT (≥768px) === */
@media (min-width: 768px) {
  /* Hide mobile filter trigger on desktop */
  .filter-trigger {
    display: none;
  }

  /* Desktop Sidebar Action Buttons (Share/Reset) */
  .sidebar-actions {
    justify-content: space-between;
    align-items: center;
    margin-top: 24px; /* Space below filter panel */
    padding: 0;
  }

  .sidebar-actions.active {
    display: flex; /* Only show when filters are active */
  }

  .sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--akuna-aqua-600);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: 0;
  }

  .sidebar-action-btn:hover {
    color: var(--akuna-aqua-200);
  }

  .sidebar-action-btn .action-icon {
    width: 16px;
    height: 16px;
  }

  /* Jobs + Filter Layout Container */
  .jobs-filter-container {
    display: grid;
    grid-template-columns: 5fr 7fr; /* 5 cols UI, 7 cols jobs (768-960) */
    gap: 40px;
    align-items: start;
    margin-top: 90px; /* DON'T TOUCH THIS  */
    margin-bottom: 200px;
    min-height: 500px;
  }

  /* Filter Sidebar Column - Sticky */
  .filter-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    align-self: start;
    display: flex;
    flex-direction: column;
  }

  /* Ensure overlay comes first, then buttons */
  .filter-sidebar .filter-overlay {
    order: 1;
  }

  .sidebar-actions {
    order: 2;
  }

  /* Transform overlay into sidebar on desktop */
  .filter-overlay {
    position: relative !important; /* Override fixed positioning */
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    background: transparent !important;
    z-index: 1 !important;
    overflow-y: visible !important;
  }

  .filter-overlay-content {
    padding: 0 !important;
    min-height: auto !important;
    display: block !important;
  }

  /* Hide filter header (close button) on desktop */
  .filter-header {
    display: none !important;
  }

  /* Filter sections styling for desktop sidebar */
  .filter-sections {
    background: rgba(0, 177, 192, 0.03);
    border: 1px solid rgba(0, 177, 192, 0.15);
    border-radius: 4px;
    padding: 24px;
    padding-bottom: 20px; /* Extra space for 'no results' state */
  }

  /* Hide mobile-style bottom footer on desktop */
  .filter-footer {
    display: none !important;
  }

  /* Jobs grid - 2 columns on tablet

  .jobs-grid {
    grid-template-columns: 1fr; 
    padding-top: 0;
  } */

}

/* Large Desktop - 3 column job grid */
@media (min-width: 1440px) {
  .jobs-grid {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Keep 2 cols even on large screens due to sidebar */
  }

  .jobs-filter-container {
    grid-template-columns: 380px 1fr; /* Slightly wider sidebar on large screens */
  }
}

/* Desktop 1200px+ */
@media (min-width: 1200px) {
  .jobs-filter-container {
    grid-template-columns: 4fr 8fr; /* 4 cols UI, 8 cols jobs */
  }

  .jobs-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns (4 cols each) */
  }
}

#jobsEmpty {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--akuna-aqua-900);
  max-height: 330px;
  border-radius: 4px;
}

.job-description p {
  margin: 1rem 0;
}
.job-description h2 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.job-description h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.job-description ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 1rem 0;
}
.job-description ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 1rem 0;
}
.job-description li + li {
  margin-top: 0.25rem;
}
.job-description a {
  text-decoration: underline;
}

/* ==== 960px breakpoint for nav ==== */
@media (max-width: 959.98px) {
  /* Desktop nav hidden, burger shown */
  .nav-links {
    display: none !important;
  }
  #mobileNavOpen {
    display: inline-flex !important;
  }
  .navbar { 
    padding: 16px 24px 16px 16px;
  }
}

@media (min-width: 960px) {
  /* Desktop: show nav, hide burger, keep CTA inline as before */
  .nav-links {
    display: flex !important;
  }
  #mobileNavOpen {
    display: none !important;
  }

  .nav-layer .explore-btn {
    display: inline-flex !important; /* desktop inline */
    position: static;
    transform: none;
    box-shadow: none;
  }
}

/* --- Mobile Nav: global font --- */
#mobileNav {
  font-family: var(--font-mono);
}

/* --- Glass layer (matches desktop blur) --- */
.mobile-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-dark) 78%, transparent) 0%,
    color-mix(in srgb, var(--bg-dark) 56%, transparent) 35%,
    color-mix(in srgb, var(--bg-dark) 78%, transparent) 100%
  );
  -webkit-backdrop-filter: saturate(135%) blur(12px);
  backdrop-filter: saturate(135%) blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  z-index: 0;
  will-change: backdrop-filter;
}
/* content above glass */
#mobileNav .z-10,
#mobileNav [class*="z-10"] {
  position: relative;
  z-index: 1;
}
/* stronger vignette on tall screens */
@media (min-height: 900px) {
  .mobile-glass {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-dark) 82%, transparent) 0%,
      color-mix(in srgb, var(--bg-dark) 58%, transparent) 38%,
      color-mix(in srgb, var(--bg-dark) 82%, transparent) 100%
    );
  }
}
/* fallback for no backdrop-filter */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .mobile-glass {
    background: linear-gradient(
      to bottom,
      rgba(0, 40, 50, 0.8) 0%,
      rgba(0, 40, 50, 0.6) 35%,
      rgba(0, 40, 50, 0.8) 100%
    );
  }
}

/* --- Parent items (accordion headers + leaf) --- */
#mobileNav .mobile-item,
#mobileNav .mobile-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0; /* py-3 */
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 20px;
  line-height: 1.4; /* parent = 20px */
  color: var(--akuna-charcoal-25);
  text-decoration: none;
  transition: color 0.2s ease;
}
#mobileNav .mobile-item:hover,
#mobileNav .mobile-parent:hover {
  color: var(--akuna-aqua-50);
}

/* Active (open) state toggled by JS: .is-active */
#mobileNav .mobile-parent.is-active {
  color: var(--akuna-aqua-200);
}

/* Chevron default + active */
#mobileNav .mobile-parent .chev {
  color: var(--akuna-charcoal-100);
  transition: transform 0.2s ease, color 0.2s ease;
}
#mobileNav .mobile-parent.is-active .chev {
  color: var(--akuna-aqua-200);
  transform: rotate(90deg); /* right → down */
}

/* Leaf variant aligns with chevron width */
#mobileNav .mobile-item--leaf .mobile-item__spacer {
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* --- Submenu (children) --- */
#mobileNav .mobile-subnav {
  display: grid;
  row-gap: 1rem; /* more vertical spacing */
  padding: 0.25rem 0 1rem 1.5rem; /* left indent */
  margin-left: 0.25rem; /* subtle offset */
  border-left: none; /* no border */
}
#mobileNav .mobile-subnav-link {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.5; /* child = 16px */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--akuna-charcoal-25);
  text-decoration: none;
  transition: color 0.2s ease;
}
#mobileNav .mobile-subnav-link:hover {
  color: var(--akuna-aqua-50);
}

/* --- Mobile nav open/close animation --- */
#mobileNav {
  /* state machine via data-state */
  transition: none; /* container itself doesn't animate layout */
}
#mobileNavBackdrop {
  opacity: 0;
  transition: opacity 0.24s ease;
}

/* sheet animation */
.mobile-sheet {
  opacity: 0;
}

/* OPEN state */
#mobileNav[data-state="open"] #mobileNavBackdrop {
  opacity: 1;
}
#mobileNav[data-state="open"] .mobile-sheet {
  opacity: 1;
}

/* CLOSING state (optional: same as closed but keeps transitions) */
#mobileNav[data-state="closing"] #mobileNavBackdrop {
  opacity: 0;
}
#mobileNav[data-state="closing"] .mobile-sheet {
  opacity: 0;
}

.burger {
  height: 3em;
  width: 3em;
  position: relative;
  font-size: 10px;
  cursor: pointer;
  -webkit-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all;
  -webkit-tap-highlight-color: transparent;
}
.burger .burger-lines:after {
  left: 0;
  top: -1em;
}
.burger .burger-lines:before {
  left: 1em;
  top: 1em;
}
.burger:after {
  content: "";
  display: block;
  position: absolute;
  height: 150%;
  width: 150%;
  top: -25%;
  left: -25%;
}
.burger .burger-lines {
  top: 50%;
  margin-top: -0.125em;
}
.burger .burger-lines,
.burger .burger-lines:after,
.burger .burger-lines:before {
  pointer-events: none;
  display: block;
  content: "";
  width: 100%;
  border-radius: 0.25em;
  background-color: var(--akuna-aqua-50);
  height: 0.1em;
  position: absolute;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.burger .burger-lines:after {
  left: 0;
  top: -1em;
}
.burger .burger-lines:before {
  left: 1em;
  top: 1em;
}
.burger.burger-squeeze .burger-lines,
.burger.burger-squeeze .burger-lines:after,
.burger.burger-squeeze .burger-lines:before {
  -webkit-transition: 0.2s top 0.2s, 0.1s left, 0.2s transform,
    0.4s background-color 0.2s;
  -o-transition: 0.2s top 0.2s, 0.1s left, 0.2s transform,
    0.4s background-color 0.2s;
  transition: 0.2s top 0.2s, 0.1s left, 0.2s transform,
    0.4s background-color 0.2s;
}

.burger.burger-squeeze .burger-lines:after,
.burger.burger-squeeze .burger-lines:before {
  width: 2em;
}

.burger.burger-squeeze.open .burger-lines,
.burger.burger-squeeze.open .burger-lines:after,
.burger.burger-squeeze.open .burger-lines:before {
  background-color: var(--akuna-charcoal-50);
  -webkit-transition: 0.2s background-color, 0.2s top, 0.2s left,
    0.2s transform 0.15s;
  -o-transition: 0.2s background-color, 0.2s top, 0.2s left,
    0.2s transform 0.15s;
  transition: 0.2s background-color, 0.2s top, 0.2s left, 0.2s transform 0.15s;
}

.burger.burger-squeeze.open .burger-lines {
  background-color: transparent;
}

.burger.burger-squeeze.open .burger-lines:before,
.burger.burger-squeeze.open .burger-lines:after {
  left: 0.5em;
  top: 0px;
}

.burger.burger-squeeze.open .burger-lines:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.burger.burger-squeeze.open .burger-lines:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Larger clickable area for both burger states, no outline */
.burger {
  position: relative; /* anchor the halo */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.burger::before {
  content: "";
  position: absolute;
  inset: -19px -19px -19px -50px; /* expand hitbox ~24px all around */
  border-radius: 14px; /* optional, match your design curve */
  /* fully transparent; no visual change */
}

/* Keep the same hitbox when open (if you toggle .is-active or aria-expanded) */
.burger.is-active::before,
.burger[aria-expanded="true"]::before {
  inset: -19px -19px -19px -50px;
}

/* Optional: ensure the halo isn't blocked by neighbors */
.burger {
  z-index: 60;
}

/* --- Desktop Nav shared --- */
.nav-link {
  letter-spacing: 0.04em;
  color: var(--akuna-charcoal-25);
  font-size: 16px;
  line-height: 1.75rem;
  text-transform: uppercase;
  transition: color 0.2s ease;
}



/* Stretch + center the nav group so submenu truly centers under the bar */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }
}

/* === Nav link underline reveal === */
.text-link-line {
  position: relative;
  display: inline-block; /* ensure the pseudo-element sizes correctly */
  text-decoration: none;
  border-bottom: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 1s, color 0.5s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.text-link-line:hover {
  transform: translate3d(0, 0, 0);
}

.text-link-line:hover::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .text-link-line {
    transition: none !important;
  }
}

/* === Active state bar (fixed, centered) === */
.text-link-line {
  position: relative; /* ensure the ::after bar positions relative to the link */
}

/* hidden by default */
.text-link-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 32px; /* exact width */
  height: 2px; /* exact height */
  border-radius: 2px; /* rounded ends */
  background: var(
    --akuna-aqua-600
  ); /* “same aqua color” token from your style.css */
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform 200ms ease, opacity 150ms ease;
}

.text-link-line.no-submenu::after {
  bottom: -4px;
}

/* turn it on for active links */
.text-link-line.is-active::after,
.text-link-line[aria-current="page"]::after,
.current-menu-item > .text-link-line::after,
.current_page_item > .text-link-line::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}


/* Also ignore hover on active links */
.text-link-line.is-active:hover::before,
.text-link-line[aria-current="page"]:hover::before,
.current-menu-item > .text-link-line:hover::before,
.current_page_item > .text-link-line:hover::before {
  transform: scale3d(0, 1, 1) !important;
  transition: none !important;
}

/* if your nav wraps links in an element with overflow hidden, let the bar show */
.navbar,
.nav-layer,
.nav-container {
  overflow: visible;
}

/* --- Submenu Shell --- */
.submenu-shell {
  position: fixed;
  top: 80px;
  z-index: 10000;
  left: 50%;
  transform: translateX(-50%) translateY(-12px); /* start slightly above */
  width: 660px;
  max-width: 88vw;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: thin solid rgba(255, 255, 255, 0.1);
  /* transitions */
  opacity: 0;
  pointer-events: none;
  transition: none;

}
.submenu-shell.is-open {
  opacity: 1;
  pointer-events: auto;
 transform: translateX(-50%) translateY(0); /* drop down into place */
}

/* Layout inside submenu */
.submenu-row {
  display: flex;
}
.submenu-left {
  width: 40%;
  padding: 36px 22px 34px 26px;
  background: rgba(255, 255, 255, 0.05); /* Updated from #011318 */
  backdrop-filter: blur(15px); /* BLUR FIX */
  -webkit-backdrop-filter: blur(15px);
  border-radius: 4px 0 0 4px;
}
.submenu-right {
  width: 60%;
  padding: 24px 28px;
/*  border-left: 1px solid rgba(255, 255, 255, 0.1);  */
  background: rgba(255, 255, 255, 0.12); /* Updated from #001F26 */
  backdrop-filter: blur(30px); /* BLUR FIX */
  -webkit-backdrop-filter: blur(30px);
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
}

/* Items */
.submenu-item {
  text-align: left;
  text-transform: uppercase;
  font-family: DM Mono;
  letter-spacing: 0.08em;
  font-size: 16px;
  font-weight: 100;
  color: var(--akuna-charcoal-25, #eeeff5);
  padding: 6px 0;
  transition: color 0.2s ease;
}
.submenu-item:hover {
  color: var(--akuna-aqua-200, #5bf1ff);
}

/* Right copy */
.submenu-desc {
  color: var(--akuna-charcoal-25, #eeeff5);
  font-size: 17px;
  font-weight: 200;
  letter-spacing: 0.04em;
  line-height: 1.5rem;
  transition: opacity 0.15s ease;
}
.submenu-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-family: DM Mono;
  letter-spacing: 0.14em;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 0.06em;
  color: var(--akuna-aqua-200, #5bf1ff);
  text-decoration: none;
}
.submenu-cta:hover .cta-arrow {
  transform: translateX(6px);
}
.cta-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

/* Submenu item: keep existing hover colors, add animated indent */
.submenu-item {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease, transform 0.18s ease; /* keep your current hover color + add motion */
  will-change: transform;
}

/* Hover + keyboard focus get the indent */
.submenu-item:hover,
.submenu-item:focus-visible {
  transform: translateX(6px); /* subtle nudge */
}

/* Active submenu item: always indented, no extra hover jiggle */
.submenu-item.is-active,
.submenu-item[aria-current="page"] {
  transform: translateX(6px);
}

/* Don’t animate further when already active */
.submenu-item.is-active:hover,
.submenu-item[aria-current="page"]:hover {
  transform: translateX(6px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .submenu-item {
    transition: color 0.2s ease;
  }
  .submenu-item,
  .submenu-item:hover,
  .submenu-item:focus-visible,
  .submenu-item.is-active,
  .submenu-item[aria-current="page"] {
    transform: none;
  }
}

/* Make active submenu items use the same color as hover, plus the indent */
.submenu-item {
  /* optional: centralize the hover/active color so you can tweak once */
  --submenu-hover-color: var(--akuna-aqua-100);
}

/* keep your existing hover styles; we add the indent here too */
.submenu-item:hover,
.submenu-item:focus-visible {
  color: var(--submenu-hover-color);
  transform: translateX(6px);
}

/* active = same color as hover + the indent (no extra jiggle) */
.submenu-item.is-active,
.submenu-item[aria-current="page"] {
  color: var(--submenu-hover-color);
  transform: translateX(6px);
}

/* prevent extra movement on hover when already active */
.submenu-item.is-active:hover,
.submenu-item[aria-current="page"]:hover {
  transform: translateX(6px);
}

/* reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .submenu-item:hover,
  .submenu-item:focus-visible,
  .submenu-item.is-active,
  .submenu-item[aria-current="page"] {
    transform: none;
  }
}

/* Social row */
.social-row {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.social-link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease, background 0.2s ease;
}
.social-link:hover {
  color: var(--akuna-aqua-200, #5bf1ff);
}

.page-template-page-careers-v1 .main-content-wrapper {
  overflow-x: visible !important;
}

.page-template-page-who-we-are .main-content-wrapper {
  overflow-x: visible !important;
}

/* ========================================
   TICKER ANIMATION — SINGLE FLEX STRIP
======================================== */
.ticker-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
  white-space: nowrap;
}

.ticker-content {
  display: flex;
  width: max-content;
  animation: ticker 8s linear infinite;
  will-change: transform;
}

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

/* ========================================
   UNIFIED SECTION SPACING SYSTEM
   Works with: .section-space, .content-section, .cta-section
======================================== */

/* Base class for simple text sections */
.section-space {
  padding: 60px 0;
  position: relative;
}

/* Universal padding modifiers - work on ANY section */
.content-section.pad-top,
.section-space.pad-top,
.cta-section.pad-top {
  padding-bottom: 0 !important;
}

.content-section.pad-bottom,
.section-space.pad-bottom,
.cta-section.pad-bottom {
  padding-top: 0 !important;
}

.content-section.pad-none,
.section-space.pad-none,
.cta-section.pad-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .section-space {
    padding: 80px 0;
  }
}

@media (min-width: 1024px) {
  .section-space {
    padding: 200px 0 60px;
  }
}
.cta-bg-full {
  position: relative;
  background-size: cover;
  background-position: center;
  width: 100%;
  overflow: hidden;
}

.cta-bg-full::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
/* background: linear-gradient(90deg, transparent, rgba(0,200,220,0.075), transparent); */ 
/* animation: shimmer 7s infinite; */
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Feature Block Styles */
.feature-item {
  color: var(--akuna-charcoal-50);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 22px;
}

 .feature-item h3 {
    font-size: 32px;
  }

.feature-item:hover {
  padding-left: 9px;
}

.feature-item:hover,
.feature-item:hover h3,
.feature-item.active,
.feature-item.active h3 {
  color: var(--akuna-aqua-300);
}

.feature-item h3::after {
  content: "→";
  opacity: 0;
  margin-left: 8px;
  transition: opacity 0.3s ease;
}

.feature-item:hover h3::after {
  opacity: 1;
}

.feature-item.active {
  padding-left: 12px;
}

.feature-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: -48px;
  height: 0.5px;
  background: rgba(238,239,245,0.25);
  transform-origin: right;
  animation: slideInLeft 0.4s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.feature-content-wrapper {
  position: relative;
}

.feature-content {
  display: none;
}

.feature-content.active {
  display: block;
  animation: fadeIn 1.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1240px) {

 .feature-item h3 {
    font-size: 28px;
  }
}

@media (max-width: 1080px) {
  .col-span-12.grid {
    display: block !important;
  }
  .col-span-7.bg-cover {
    display: none !important;
  }

  .feature-list {
    min-height: auto !important;
    padding: 0 !important;
  }
  .feature-item h3 {
    font-size: 24px;
  }

  .feature-item {
    padding: 10px 0px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .feature-item:hover {
    padding-left: 18px !important;
  }

  .feature-item.active {
    padding-left: 22px !important;
  }

  .feature-item.active::after {
    display: none;
  }

  .feature-item::before {
    content: "+";
    position: absolute;
    right: 24px;
    color: var(--akuna-aqua-100);
    font-size: 24px;
    font-weight: 100;
    transition: transform 0.3s ease;
  }

  .feature-item.active::before {
    content: "−";
  }

  .feature-content {
    transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .feature-content.active {
    max-height: 800px;
    padding: 24px 18px 12px 24px;
  }

  .feature-item h3::after {
  display: none;
  }
}

/* Layer z-6: Particles.js Background - Top Left Corner */
.particles-scoped {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1; /* Behind content */
}

.particles-full {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

#particles-trading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.particles-trading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* Fix particles width on mobile - applies to all pages */
@media (max-width: 768px) {
  #particles-hero,
  .particles-scoped {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* === Explore Careers glow button (clean) === */
.explore-btn.glow-on-hover {
  position: relative;
  z-index: 0;
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* inherit all sizing/typography from .explore-btn declared earlier */
  color: var(--akuna-aqua-900); /* keep dark text, no white flash */
}

.explore-btn.glow-on-hover,
.explore-btn.glow-on-hover:hover,
.explore-btn.glow-on-hover:focus,
.explore-btn.glow-on-hover:active {
  color: var(--akuna-aqua-900) !important;
}

/* glow layer */
.explore-btn.glow-on-hover::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    45deg,
    #57948d,
    #314732,
    #203f3a,
    #154b4a,
    #2f635d,
    #ac9255,
    #6d6d54,
    #535f49
  );
  background-size: 400%;
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 4px;
  z-index: -1;
  animation: nav-glow 20s linear infinite;
}

/* solid button layer (matches your existing explore-btn bg) */
.explore-btn.glow-on-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(34deg, #a8f7ff 0%, #d2fbff 100%);
  border-radius: 4px;
  z-index: -1;
}

/* show glow on hover */
.explore-btn.glow-on-hover:hover::before {
  opacity: 1;
}

/* press feedback WITHOUT changing text color */
.explore-btn.glow-on-hover:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* keyframes for moving gradient */
@keyframes nav-glow {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* keep: hide on mobile */
@media (max-width: 960px) {
  .explore-btn-desktop {
    display: none !important;
  }
}


/* === Perimeter glow for outline CTA buttons === */
.cta-button.btn-primary {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(185, 248, 254, 0.7);
  color: var(--akuna-charcoal-50);
  border-radius: 4px;
  overflow: visible;
}

.cta-button.btn-primary,
.cta-button.btn-primary:hover,
.cta-button.btn-primary:focus,
.cta-button.btn-primary:active {
  color: var(--akuna-charcoal-50) !important;
}

/* 1) GLOW (under everything) */
.cta-button.btn-primary::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(
    45deg,
    #57948d,
    #314732,
    #203f3a,
    #154b4a,
    #2f635d,
    #ac9255,
    #6d6d54,
    #535f49
  );
  background-size: 400%;
  filter: blur(12px);
  opacity: 0;
  border-radius: 6px;
  z-index: -2; /* deepest */
  transition: opacity 0.3s ease-in-out;
  animation: outline-glow 20s linear infinite;
}

/* 2) HOVER SURFACE (above glow, below text) */
.cta-button.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 31, 38, 1) 0%,
    rgba(0, 31, 38, 0.98) 100%
  );
  border-radius: 4px;
  opacity: 0;           /* only on hover */
  z-index: -1;          /* above glow, below text */
  transition: opacity 0.3s ease-in-out;
}

/* hover: show glow + surface */
.cta-button.btn-primary:hover::before {
  opacity: 1;
}
.cta-button.btn-primary:hover::after {
  opacity: 1;
}

/* active, keep your tint */
.cta-button.btn-primary:active {
  color: var(--akuna-aqua-200);
}

@keyframes outline-glow {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}



.explore-btn.glow-on-hover:active {
  color: inherit;                /* keep same text color */
  transform: scale(0.98);        /* small press feedback, optional */
  transition: transform 0.1s ease;
}

.explore-btn.glow-on-hover:focus-visible {
  outline: none;
}

/* OPERATIONS HERO GRID BG */
@media (min-width: 768px) {
    #dotGridCanvas {
        left: 70% !important;
    }
}