/* ===== CUSTOM FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cinzel:wght@700&family=Playfair+Display:ital,wght@0,700;1,700&family=Syncopate:wght@700&display=swap');

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  src: url(https://fonts.gstatic.com/s/geist/v4/gyByhwUxId8gMEwYGFWfOw.woff2) format('woff2');
}

/* ===== RESET & VARIABLES ===== */
:root {
  --bg-dark: #0d0d0d;
  --text-white: #ffffff;
  --text-muted: #a3a3a3;
  --text-dark: #0d0d0d;
  --border-color: rgba(255, 255, 255, 0.1);
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Geist', sans-serif;
  --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  /* --- ARCHITECTURE: Global Layout System --- */
  --max-width: 1400px;
  --gutter: clamp(80px, 14vw, 200px);
  --layout-pad: max(var(--gutter), calc((100vw - var(--max-width)) / 2));
  --grid-buffer: clamp(40px, 4vw, 80px);
  --grid-edge: max(40px, calc(var(--layout-pad) - var(--grid-buffer)));
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FIX: Strictly prevents horizontal scrolling on all devices */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

/* ===== UNIVERSAL GLOBAL GRID OVERLAY (Restored for Perfect Continuity) ===== */
.global-grid {
  position: fixed;
  /* Reverted to fixed to follow scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* Sits behind sections; sections provide their own overlapping frame lines */
  display: block;
}

.grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
}

.grid-line.left {
  left: var(--grid-edge);
  background-color: rgba(128, 128, 128, 0.2);
}

.grid-line.right {
  display: none;
  /* Removed to avoid double-line effect with section frames */
  left: calc(100% - var(--grid-edge));
  background-color: rgba(128, 128, 128, 0.2);
}


/* ===== GEOMETRIC BUTTONS ===== */
.btn-group {
  display: inline-flex;
  align-items: stretch;
  cursor: pointer;
}

.btn-group:hover .btn-main {
  background-color: #e5e5e5;
}

.btn-group:hover .btn-icon {
  background-color: var(--text-white);
  color: var(--text-dark);
}

.btn-main {
  padding: 14px 28px;
  background: var(--text-white);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  transition: var(--transition);
  border-radius: 0;
}

.btn-icon {
  display: grid;
  place-items: center;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--text-white);
  color: var(--text-white);
  transition: var(--transition);
}

.btn-icon i {
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

.btn-group:hover .btn-icon i {
  transform: rotate(0deg);
}

/* ===== NAVIGATION ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--layout-pad);
  height: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9999;
  background-color: transparent;
  color: #fff;
  transition: background-color 0.3s, backdrop-filter 0.3s;
}

/* Glass effect when scrolling down on dark pages */
.navbar.scrolled {
  background-color: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar .logo {
  color: #fff;
}

.navbar .logo svg circle,
.navbar .logo svg path {
  stroke: #fff;
}

.navbar .logo circle[fill="white"] {
  fill: #fff;
}

.menu-btn {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
}

.logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.fm-footer-logo {
  display: block;
  height: 76px;
  width: auto;
  margin-bottom: 24px;
}

.brand-col .fm-footer-logo {
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  margin-bottom: 28px;
}

@media (min-width: 769px) {
  .brand-col .fm-footer-logo {
    height: 84px;
    max-width: 360px;
  }
}

.navbar .logo-img {
  height: 60px;
}

.navbar .logo-img[src*="white sections"] {
  height: 100px;
}

.founder-logo-overlay .logo-img {
  height: 32px;
}

@media (max-width: 768px) {
  .navbar .logo-img {
    height: 55px;
  }

  .navbar .logo-img[src*="white sections"] {
    height: 84px;
  }
}

.nav-right {
  display: flex;
  align-items: stretch;
  height: 36px;
}

.nav-avatar {
  display: none;
}

.nav-cta {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #fff;
  background: #fff;
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  transition: var(--transition);
}

.nav-cta-icon {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid #fff;
  border-left: none;
  background: #fff;
  color: #000;
  transition: var(--transition);
}

.nav-right:hover .nav-cta,
.nav-right:hover .nav-cta-icon {
  background: rgba(255, 255, 255, 0.85);
  color: #000;
}

.nav-right:hover .nav-cta-icon i {
  transform: rotate(-45deg);
}

/* --- LIGHT THEME NAVBAR OVERRIDES --- */
.light-theme .navbar {
  background-color: #fff;
  color: #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.light-theme .navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
}

.light-theme .navbar .logo {
  color: #000;
}

.light-theme .navbar .logo svg circle,
.light-theme .navbar .logo svg path {
  stroke: #000;
}

.light-theme .navbar .logo circle[fill="white"] {
  fill: #000;
}

.light-theme .menu-btn {
  background: #fff;
  color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}

.light-theme .menu-btn:hover {
  background: #000;
  color: #fff;
}

/* Force readable styling whenever the menu is open, on any theme */
.menu-btn.is-open,
.light-theme .menu-btn.is-open,
.menu-btn.is-open:hover,
.light-theme .menu-btn.is-open:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.menu-btn.is-open i,
.light-theme .menu-btn.is-open i {
  color: #fff !important;
}

.light-theme .nav-cta,
.light-theme .nav-cta-icon {
  border-color: rgba(0, 0, 0, 0.2);
}

.light-theme .nav-right:hover .nav-cta,
.light-theme .nav-right:hover .nav-cta-icon {
  background: #000;
  color: #fff;
}

/* ==================================================== */
/* ===== FULL SCREEN MENU OVERLAY STYLES =====          */
/* ==================================================== */

.menu-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--bg-dark);
  color: var(--text-white);
  z-index: 5000;
  /* Above all section dividers (1000) and diamonds (1100) */
  display: flex;
  align-items: stretch;
  transform: translateY(-100%);
  /* Hidden state */
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden;
}

.menu-overlay.active {
  transform: translateY(0);
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  width: 100%;
  height: 100%;
  padding-top: 80px;
}

/* Left Column */
.menu-col-left {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  /* Reduced top padding to push it near the edge, keeping left padding intact */
  padding: 20px var(--layout-pad) 40px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* PULLS THE MENU ITEMS TO THE TOP EDGE */
}

.menu-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* Adds space between clean text links */
  width: 100%;
}

.menu-nav-item {
  border: none !important;
  /* Strips out the previous horizontal box borders */
  width: auto;
}

.menu-nav-item a {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.5vw, 85px);
  /* Scales down text to fit "CONTACT US" */
  font-weight: 700;
  line-height: 1.1;
  color: #666;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transition: all 0.4s ease;
  display: inline-flex;
  /* Hugs the text instead of stretching full width */
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  white-space: nowrap;
  /* Prevents wrapping to a second line */
}

.menu-nav-item a i {
  font-size: clamp(2rem, 4vw, 55px);
  opacity: 0;
  color: inherit;
  transform: translate(-15px, 15px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 12px;
  /* Places the arrow immediately next to the word */
}

.menu-nav-item a:hover {
  color: var(--text-white);
  padding-left: 20px;
  /* Smooth slide effect on hover */
}

.menu-nav-item a:hover i {
  opacity: 1;
  transform: translate(0, 0) !important;
  /* Arrow shoots up-right */
}

/* Meta Labels (Vertical Line matching reference) */
.menu-contact-grid .meta-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  text-transform: uppercase;
  border-left: 1px solid #888;
  /* The vertical line */
  padding-left: 12px;
  line-height: 1;
}

/* Right Column */
.menu-col-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(30px, 5vh, 80px) var(--layout-pad) 40px 60px;
  /* Matched the dynamic top padding */
}

.menu-info-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 60px;
}

.menu-vision-text {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  max-width: 400px;
}

.menu-globe-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  color: #888;
}

.menu-globe-widget i {
  font-size: 2rem;
  color: var(--text-white);
}

.menu-globe-widget .coords {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.menu-info-bottom {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.menu-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.menu-contact-grid .location-block {
  padding-right: 40px;
}

.menu-contact-grid .contact-block {
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-contact-grid .meta-label {
  display: block;
  font-size: 0.7rem;
  color: #666;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.location-block p {
  font-size: 1rem;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 40px;
  max-width: 300px;
}

.menu-time {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  /* Locks digit widths to prevent layout shifts */
}

.contact-block p {
  font-size: 1.1rem;
  color: #ccc;
  margin-bottom: 8px;
}

.menu-email {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.menu-social-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
}

.menu-social-row a {
  font-size: 0.85rem;
  color: #aaa;
  font-weight: 500;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-social-row a:last-child {
  border-right: none;
}

.menu-social-row a:hover {
  color: var(--text-white);
}

@media (max-width: 1024px) {
  .menu-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .menu-col-left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px var(--layout-pad);
  }

  .menu-col-right {
    padding: 40px var(--layout-pad);
  }

  .menu-social-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .menu-social-row a {
    border-right: none;
    justify-content: flex-start;
  }
}


/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  /* Changed from 100vw to ensure grid alignment */
  overflow: hidden;
  background: radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.03) 0%, var(--bg-dark) 60%);
}

.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(600px circle at var(--spotlight-x, 50%) var(--spotlight-y, 30%),
      rgba(255, 255, 255, 0.06),
      transparent 60%);
  transition: opacity 0.6s ease;
}

.hero-spotlight.active {
  opacity: 1;
}

.hero-container {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.hero-container a,
.hero-container button,
.hero-content-left,
.hero-social-float,
.hero-bottom-bar {
  pointer-events: auto;
}

.hero-robot-3d {
  position: absolute;
  bottom: 0;
  left: 72%;
  /* Increased to push the robot to the right */
  transform: translateX(-50%);
  width: 65vw;
  max-width: 1100px;
  height: 95vh;
  z-index: 1;
  pointer-events: auto;
}

/* Fix for 16:10 laptops (like 1920x1200) */
@media (min-width: 1400px) {
  .hero-robot-3d {
    left: 68%;
    /* Increased for wider screens */
  }
}

@media (min-width: 2000px) {
  .hero-robot-3d {
    left: 64%;
    /* Increased for ultra-wide screens */
  }
}

.hero-text-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
  margin-top: -10vh;
}

.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: var(--layout-pad);
  padding-right: var(--layout-pad);
  white-space: nowrap;
}

.hero-title-row.indent {
  padding-left: calc(var(--layout-pad) + clamp(80px, 8vw, 150px));
  padding-right: var(--layout-pad);
  justify-content: flex-start;
  gap: 30px;
  font-size: clamp(4rem, 11vw, 200px);
  margin-top: -0.1em;
  /* FIX: Reduced negative margin to prevent lines from overlapping vertically */
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 11vw, 200px);
  font-weight: 700;
  line-height: 0.95;
  /* FIX: Increased line height to give letters more vertical breathing room */
  letter-spacing: -0.01em;
  /* FIX: Loosened kerning so letters don't crush together horizontally */
  text-transform: uppercase;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.hero-lock-icon {
  font-size: clamp(3rem, 8vw, 150px);
  margin: 0 16px;
  transform: translateY(-8px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-text {
  font-size: clamp(4rem, 11vw, 200px);
  margin-right: 0;
}

.since-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 16px;
}

.hero-content-left {
  position: absolute;
  bottom: 100px;
  left: var(--layout-pad);
  max-width: 380px;
  z-index: 3;
}

.client-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.avatar-stack {
  display: flex;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
  margin-left: -12px;
}

.avatar:first-child {
  margin-left: 0;
}

.avatar.count {
  background: #222;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: bold;
}

.review-stars {
  font-size: 0.8rem;
  color: var(--text-white);
  font-weight: 600;
}

.review-stars i {
  color: #ffb800;
  font-size: 0.7rem;
}

.review-stars span {
  display: block;
  color: #ccc;
  font-weight: 500;
}

.hero-desc {
  font-size: 1.2rem;
  color: var(--text-white);
  line-height: 1.5;
  margin-bottom: 32px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-desc strong {
  color: var(--text-white);
  font-weight: 500;
}

.hero-social-float {
  position: absolute;
  bottom: 100px;
  right: var(--layout-pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}

.hero-social-float a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: var(--transition);
}

.hero-social-float a:hover {
  background: var(--text-white);
  color: var(--text-dark);
}

.hero-bottom-bar {
  position: absolute;
  bottom: 30px;
  left: var(--layout-pad);
  right: var(--layout-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  z-index: 3;
}

.hero-bottom-bar .crosshair {
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-dark);
}

.hero-bottom-bar .crosshair:first-child {
  left: -4px;
}

.hero-bottom-bar .crosshair:last-child {
  right: -4px;
}

.hero-bottom-bar .time {
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
}


/* ===== ABOUT / TRANSFORMING SECTION ===== */
.about-section {
  padding: 140px var(--layout-pad);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-dark);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(auto, 360px));
  justify-content: center;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding: 0;
}

.about-content-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-content-left .section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-white);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.about-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 100%;
  margin-bottom: 0;
}

.about-card-wrapper {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  position: relative;
  z-index: 9999 !important;
  display: flex;
}

.profile-card {
  background: transparent;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  z-index: 20;
}

.profile-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  flex-grow: 1;
}

.profile-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
}

.profile-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 60px 24px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 13, 13, 0.95) 100%);
  text-align: center;
  z-index: 2;
}

.profile-info h4 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text-white);
  font-weight: 600;
  margin-bottom: 4px;
}

.profile-info span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.profile-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 24px;
  background: var(--text-white);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
}

.profile-btn-icon {
  background: var(--bg-dark);
  color: var(--text-white);
  padding: 16px 20px;
  border-left: 1px solid var(--text-white);
}

.profile-btn-icon i {
  transform: rotate(-45deg);
  transition: var(--transition);
}

.profile-btn:hover .profile-btn-icon i {
  transform: rotate(0);
}

.about-content-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.small-heading {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  display: inline-block;
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  align-self: flex-start;
}

/* ==================================================== */
/* ===== IMPROVISED ABOUT SECTION (ADVANTAGES)    ===== */
/* ==================================================== */
.floating-card {
  animation: floatSmooth 6s ease-in-out infinite;
}

@keyframes floatSmooth {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.advantage-list {
  list-style: none;
  margin-top: 24px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adv-item {
  font-size: 1.05rem;
  color: var(--text-white);
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.3;
}

.adv-item i {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.4s ease, transform 0.4s ease;
}

.adv-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.adv-item:hover i {
  color: #fff;
  transform: scale(1.1);
}

/* ==================================================== */
/* ===== IMPROVISED FANNING CARDS SECTION         ===== */
/* ==================================================== */
#fanning-cards-sec {
  position: relative;
  width: 100%;
  background-color: var(--bg-dark);
  z-index: 5;
  padding: 100px 0 150px;
  border-top: 1px solid var(--border-color);
  overflow: hidden;
}

.scroll-cards-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cards-wrapper {
  position: relative;
  width: 320px;
  height: 420px;
  margin: 0 auto 80px;
  z-index: 5;
  perspective: 1000px;
}

.anim-card {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  will-change: transform;
  transform-origin: bottom center;
  /* Crucial for fanning from the bottom */
}

.card-left-inner {
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=600&auto=format&fit=crop') center/cover;
}

.card-right-inner {
  z-index: 3;
}

.card-left-outer {
  z-index: 2;
}

.card-right-outer {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(135deg, #001b3a 0%, #004d7a 100%);
}

.card-left-outer img,
.card-right-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%);
}

.anim-card h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--text-white);
  margin-bottom: 12px;
  line-height: 1;
}

.anim-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  line-height: 1.4;
}

.quote-wrapper {
  text-align: center;
  max-width: 600px;
  z-index: 10;
  padding: 0 20px;
}

/* Mobile Overrides for New Sections */
@media (max-width: 1024px) {
  .cards-wrapper {
    margin-bottom: 60px;
    height: 350px;
    width: 280px;
  }
}

@media (max-width: 768px) {
  .adv-item {
    padding: 14px;
    font-size: 0.95rem;
  }

  /* Un-stack cards and convert to horizontal native scroll row on mobile */
  .cards-wrapper {
    width: 100%;
    height: auto;
    display: flex !important;
    flex-direction: row;
    gap: 16px;
    padding: 0 20px 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 40px;
  }

  .cards-wrapper::-webkit-scrollbar {
    display: none;
  }

  .anim-card {
    position: relative;
    flex: 0 0 75vw;
    height: 350px;
    scroll-snap-align: center;
    transform: none !important;
    /* Disable GSAP transforms on mobile */
  }
}

/* ===== FLOATING CARDS SECTION (Phase 3) ===== */
#phase3-pin-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-dark);
  z-index: 5;
}

.scroll-cards-section {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 80px var(--layout-pad);
  overflow: hidden;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scroll-cards-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.cards-wrapper {
  position: relative;
  width: 320px;
  height: 400px;
  margin: 0 auto;
  z-index: 5;
  will-change: transform;
}

.anim-card {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
  will-change: transform;
  transform-origin: center center;
  /* Changed from bottom center */
}

.card-left-inner {
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=600&auto=format&fit=crop') center/cover;
}

.card-right-inner {
  z-index: 3;
}

.card-left-outer {
  z-index: 2;
}

.card-right-outer {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(135deg, #001b3a 0%, #004d7a 100%);
}

.card-left-outer img,
.card-right-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%);
}

.card-left-inner h2,
.card-right-outer h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--text-white);
  margin-bottom: 12px;
  line-height: 1;
}

.card-left-inner p,
.card-right-outer p {
  color: var(--text-white);
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  line-height: 1.4;
}

.quote-wrapper {
  position: relative;
  /* Changed from absolute */
  margin-top: 80px;
  /* Pushes it safely below the animating cards */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 600px;
  z-index: 10;
  pointer-events: auto;
}

.quote-text {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--text-white);
  line-height: 1.4;
  margin-bottom: 16px;
}

.quote-author {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.quote-btn {
  display: inline-flex;
  width: auto;
  margin: 0 auto;
  padding-left: 24px;
}


/* ===== SERVICES ACCORDION SECTION (Phase 5) ===== */
.services-accordion-section {
  overflow: visible !important;
  position: relative;
  padding: 180px var(--layout-pad) 100px;
  background-color: var(--text-white);
  display: flex;
  flex-direction: column;
  gap: 80px;
  z-index: 50;
}

.services-accordion-section .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */

.horizontal-divider {
  position: absolute;
  top: 80px;
  /* Extended to full bleed like section frames */
  left: -50vw;
  right: -50vw;
  height: 1px;
  z-index: 1000;
  /* Must be higher than the section-frame masks (490) */
}

.horizontal-divider .line {
  position: absolute;
  top: 0;
  /* Line extends infinitely to create full-bleed horizontal track */
  left: -100vw;
  right: -100vw;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
}

/* Diamond markers sit exactly where the horizontal divider meets each vertical grid line */
.horizontal-divider .diamond {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background-color: rgba(0, 0, 0, 0.35);
  transform: rotate(45deg);
}

.horizontal-divider .diamond.left {
  left: calc(50vw + var(--grid-edge) - 3px);
}

.horizontal-divider .diamond.right {
  right: calc(50vw + var(--grid-edge) - 3px);
}

.horizontal-divider .badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  color: #000000;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  line-height: 26px;
  white-space: nowrap;
  /* FIX: Prevents text from ever stacking vertically */
}

/* For segmented dividers (Partner Grid, FAQ, etc.) */
.horizontal-divider.divider-flex .badge {
  position: relative !important;
  left: auto !important;
  top: 0 !important;
  /* Resets the -14px jump from global .badge */
  transform: none !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
  /* Default dark side lines */
  border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
  padding: 0 16px;
  /* Space between the track segments and the vertical side-lines */
}

/* Specific light-lines override for dark backgrounds */
.horizontal-divider.light-lines.divider-flex .badge {
  border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  z-index: 5;
}

.services-header .section-title.text-center {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.2vw, 55px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-dark);
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -0.02em;
  text-align: center;
}

.accordion-wrapper {
  display: flex;
  width: 100%;
  height: 600px;
  gap: 20px;
  /* Increased for breathing room */
  z-index: 5;
}

.accordion-item {
  flex: 1;
  background-color: var(--text-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  /* Slightly softer corners */
  padding: clamp(30px, 4vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;

  /* NEW ANIMATION BASE */
  transform: translateY(0) scale(1);
  filter: grayscale(40%) brightness(0.9);
  transition: flex 0.8s cubic-bezier(0.25, 1, 0.1, 1),
    transform 0.8s cubic-bezier(0.25, 1, 0.1, 1),
    filter 0.8s ease,
    box-shadow 0.8s ease;
}

/* Subtle lift when hovering over an inactive card */
.accordion-item:hover:not(.active) {
  filter: grayscale(10%) brightness(0.95);
  transform: translateY(-5px);
}

.accordion-item .bg-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.8s ease, transform 1.5s cubic-bezier(0.25, 1, 0.1, 1);
  z-index: -2;
  background-size: cover;
  background-position: center;
}

.accordion-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0.8) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.accordion-item:nth-child(1) .bg-image {
  background-image: url('https://images.unsplash.com/photo-1618331835717-801e976710b2?q=80&w=600&auto=format&fit=crop');
}

.accordion-item:nth-child(2) .bg-image {
  background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=600&auto=format&fit=crop');
}

.accordion-item:nth-child(3) .bg-image {
  background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=600&auto=format&fit=crop');
}

.accordion-item:nth-child(4) .bg-image {
  background-image: url('https://images.unsplash.com/photo-1618331835717-801e976710b2?q=80&w=600&auto=format&fit=crop');
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tab-header h3 {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.3vw, 22px);
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  margin: 0;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.1, 1), writing-mode 0.8s ease, color 0.4s ease;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.tab-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: var(--text-dark);
  font-size: 0.9rem;
  transition: transform 0.4s ease, border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

.accordion-item:hover .tab-icon {
  background-color: var(--text-dark);
  color: var(--text-white);
}

.tab-content {
  margin-top: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  /* Starts further down to slide up */
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 1, 0.1, 1), visibility 0.6s ease;
}

.tab-content p {
  font-size: 1rem;
  color: #e0e0e0;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 90%;
}

.explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text-white);
  font-size: 0.95rem;
}

.explore-btn i {
  font-size: 0.8rem;
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.explore-btn:hover i {
  transform: rotate(0deg);
}

/* --- Active State Styling (Phase 5) --- */
.accordion-item.active {
  flex: 4;
  /* Opens wider for more emphasis */
  border-color: transparent;
  cursor: default;

  /* 3D Lift */
  transform: translateY(-10px) scale(1.02);
  filter: grayscale(0%) brightness(1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

/* Triggers the image zoom */
.accordion-item.active .bg-image {
  opacity: 1;
  transform: scale(1.08);
}

.accordion-item.active::after {
  opacity: 1;
}

.accordion-item.active .tab-header h3 {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
  color: var(--text-white);
}

.accordion-item.active .tab-icon {
  transform: rotate(45deg);
  background-color: transparent;
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.3);
}

.accordion-item.active .tab-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.3s;
  /* Waits for the card to expand before showing text */
}

/* --- Static CTA Card (Phase 5) --- */
.accordion-static-cta {
  flex: 0 0 clamp(200px, 20vw, 280px);
  background-image: url('https://images.unsplash.com/photo-1618331835717-801e976710b2?q=80&w=600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.accordion-static-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 27, 58, 0.7) 0%, rgba(0, 77, 122, 0.9) 100%);
  z-index: -1;
  border-radius: 8px;
}

.accordion-static-cta .logo {
  font-size: 1.1rem;
  color: var(--text-white);
}

.accordion-static-cta h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.8vw, 26px);
  color: var(--text-white);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 30px 0;
}

.cta-btn {
  display: inline-flex;
  width: auto;
  font-size: 0.85rem;
  padding-left: 20px;
}

.cta-btn .profile-btn-icon {
  padding: 12px 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn .profile-btn-icon i {
  transform: rotate(0);
}

/* ===== ACCORDION MOBILE-ONLY ELEMENTS (hidden on desktop) ===== */
/* acc-num, acc-includes, includes-label, acc-tag are hidden by default;
   the @media (max-width: 768px) block at the bottom makes them visible. */
.acc-num {
  display: none;
}

.acc-includes {
  display: none;
}

/* --- Lower Metrics Callout (Phase 5) --- */
.metrics-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 60px;
  margin-top: 20px;
  z-index: 5;
}

.metrics-content-left .hero-desc {
  font-size: 1.3rem;
  color: var(--text-dark);
  line-height: 1.4;
  max-width: 460px;
  margin-bottom: 30px;
}

.metrics-content-left strong {
  color: var(--text-dark);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.metrics-cta .btn-main {
  background: var(--text-dark);
  color: var(--text-white);
}

.metrics-cta .btn-icon {
  background: var(--text-white);
  border: 1px solid var(--text-dark);
  color: var(--text-dark);
}

.metrics-cta:hover .btn-icon {
  background: var(--text-dark);
  color: var(--text-white);
}

.metrics-cta:hover .btn-main {
  background: #333;
}

.metrics-stats-right {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.metrics-stats-right .metric-card {
  text-align: left;
}

.metrics-stats-right .metric-card h2 {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 4.5vw, 70px);
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.04em;
}

.metrics-stats-right .metric-card p {
  font-size: 1.05rem;
  color: #666;
  font-weight: 500;
  max-width: 140px;
  line-height: 1.4;
}



/* ==================================================== */
/* ===== REBUILT: PROCESS SECTION                 ===== */
/* ==================================================== */

.process-section {
  position: relative;
  width: 100%;
  background-color: var(--bg-dark, #0d0d0d) !important;
  color: var(--text-white);
  padding: 120px 0;
  overflow: visible;
  z-index: 10;
}

.process-top-divider {
  position: absolute;
  top: 0;
  left: var(--layout-pad);
  right: var(--layout-pad);
  height: 1px;
}

.process-top-divider .line {
  width: 100%;
  height: 1px;
  background: var(--border-color);
}

.process-top-divider .diamond {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background-color: var(--border-color);
  transform: rotate(45deg);
}

.process-top-divider .diamond.left {
  left: -2px;
}

.process-top-divider .diamond.right {
  right: -2px;
}

.process-header {
  padding: 0 var(--layout-pad);
  margin-bottom: 60px;
}

.process-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-top: 16px;
}

.process-slider-container {
  width: calc(100% - (var(--grid-edge) * 2));
  margin: 0 var(--grid-edge);
  overflow: hidden;
  /* Cards clip at the frame borders, not cross over them */
}

.process-track {
  display: flex;
  gap: 30px;
  width: max-content;
  /* Critical for horizontal scroll */
  padding-left: var(--layout-pad);
  padding-right: var(--layout-pad);
}

.process-card {
  width: 620px;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  background: #111;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.card-image-col {
  border-right: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  background: #000;
}

.card-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(20%);
}

.card-info-col {
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-info-col h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.card-info-col p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

.process-list {
  list-style: none;
  margin-bottom: auto;
}

.process-list li {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.process-list li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--text-white);
  border-radius: 50%;
}

.card-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-footer .time {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.card-footer .number {
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 700;
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.05);
  position: absolute;
  bottom: 20px;
  right: 30px;
}

/* Tablet / Mobile Overrides */
@media (max-width: 1024px) {
  .process-card {
    width: 600px;
    grid-template-columns: 1fr;
  }

  .card-image-col {
    height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: 50px 0;
  }

  .process-header {
    margin-bottom: 24px;
    padding: 0 20px;
  }

  .process-title {
    font-size: 1.7rem;
    margin-top: 8px;
  }

  .process-slider-container {
    padding-left: 0;
  }

  .process-track {
    width: 100% !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 20px;
    padding-right: 20px;
  }

  .process-track::-webkit-scrollbar {
    display: none;
  }

  .process-card {
    flex: 0 0 80vw !important;
    min-height: 0;
    scroll-snap-align: center;
  }

  .card-image-col {
    height: 140px;
  }

  .card-info-col {
    padding: 20px;
  }

  .card-info-col h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .card-info-col p {
    font-size: 0.85rem;
    margin-bottom: 14px;
    line-height: 1.4;
  }

  .process-list li {
    font-size: 0.8rem;
    margin-bottom: 6px;
  }

  .card-footer {
    margin-top: 16px;
    padding-top: 12px;
  }

  .card-footer .number {
    font-size: 3rem;
    bottom: 12px;
    right: 20px;
  }

  .process-header::after {
    display: none;
  }
}

/* ==================================================== */
/* ===== NEW: IMPACT SECTION (PHASE 8) =====            */
/* ==================================================== */

.impact-section {
  position: relative;
  width: 100%;
  /* Removed min-height: 100vh so it stops forcing the section to be artificially tall */
  background-color: var(--bg-dark);
  padding: 100px 0;
  /* Reduced from 150px for a tighter, cleaner fit */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  z-index: 10;
}

/* Hide the 80px black architectural masks so the background image fills the entire section */
.impact-section .section-frame::before,
.impact-section .section-frame::after,
.impact-section .section-frame .sf-line.top,
.impact-section .section-frame .sf-line.bottom,
.impact-section .section-frame .sf-dia {
  display: none !important;
}

.impact-bg {
  position: absolute;
  inset: 0;
  /* Abstract dark fiery/light background */
  background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: screen;
}

.impact-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-dark) 0%, transparent 40%, transparent 60%, var(--bg-dark) 100%);
  z-index: 2;
}

.impact-container {
  position: relative;
  z-index: 5;
  padding: 0 var(--layout-pad);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.impact-typography {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.impact-heading {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 10vw, 160px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  margin: 0;
}

.impact-middle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

.impact-number {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 13vw, 200px);
  font-weight: 700;
  line-height: 0.85;
  color: var(--text-white);
}

.impact-sub-wrap {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: space-between;
}

.impact-subtext {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  color: var(--text-white);
  line-height: 1.4;
  max-width: 260px;
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 1024px) {
  .impact-sub-wrap {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    margin-left: 20px;
  }

  .impact-subtext {
    margin: 0;
  }

  .impact-middle-row {
    justify-content: flex-start;
  }
}

.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition), background-color var(--transition);
  cursor: default;
}

.client-logo-item i {
  font-size: 1.4rem;
}

.client-logo-item.font-heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: -0.05em;
}

.client-logo-item:hover {
  color: var(--text-white);
}

.client-logo-item.join-us {
  background-color: transparent;
  color: var(--text-white);
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.client-logo-item.join-us i {
  font-size: 1rem;
  transition: transform var(--transition);
}

.client-logo-item.join-us:hover {
  background-color: var(--text-white);
  color: var(--bg-dark);
}

.client-logo-item.join-us:hover i {
  transform: translate(2px, -2px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .client-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .client-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================================================== */
/* ===== NEW: BENTO / WHY CHOOSE US (PHASE 9) =====     */
/* ==================================================== */

.bento-section {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  /* Light theme for contrast */
  color: var(--text-dark);
  padding: 150px var(--layout-pad) 150px;
  z-index: 20;
}

.bento-divider-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}

/* Hide top frame line and diamonds to prevent overlap with horizontal dividers in light sections */
.services-accordion-section .section-frame .sf-line.top,
.process-section .section-frame .sf-line.top,
.process-section .section-frame .sf-dia.tl,
.process-section .section-frame .sf-dia.tr,
.bento-section .section-frame .sf-line.top,
.bento-section .section-frame .sf-dia.tl,
.bento-section .section-frame .sf-dia.tr,
.history-section .section-frame .sf-line.top,
.history-section .section-frame .sf-dia.tl,
.history-section .section-frame .sf-dia.tr,
.blog-section .section-frame .sf-dia.br,
.blog-section .section-frame .sf-line.top,
.blog-section .section-frame .sf-dia.tl,
.blog-section .section-frame .sf-dia.tr {
  display: none !important;
}

/* Ensure process section badge has dark background */
.process-section .contact-divider-wrap .horizontal-divider .badge {
  background-color: var(--bg-dark, #0a0a0a) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fixed styling for the bento section badge and line */
.bento-section .horizontal-divider .badge {
  background-color: #ffffff;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.15);
}

.bento-section .horizontal-divider .line,
.bento-section .horizontal-divider .diamond {
  background-color: rgba(0, 0, 0, 0.15);
}

.bento-header {
  margin: 60px 0 80px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.bento-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 70px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  text-align: center;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.bento-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px;
}

.bento-card.dark-card {
  background-color: #111;
  color: var(--text-white);
}

.bento-card.light-card {
  background-color: #ffffff;
  color: var(--text-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* Adds a subtle border to separate it from the white background */
}

.bento-card.img-card {
  background-size: cover;
  background-position: center;
  color: var(--text-white);
}

.bento-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.bento-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.8;
  margin-bottom: 24px;
}

/* Left Column (Spans 2 rows) */
.bento-col-left {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.bento-list {
  list-style: none;
  margin-top: 20px;
}

.bento-list li {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bento-list .arrow-icon {
  color: #e03e2d;
  font-size: 0.9rem;
}

.bento-robot-img {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 75%;
  height: auto;
  object-fit: cover;
  filter: grayscale(20%);
  pointer-events: none;
}

.bento-footer-text {
  margin-top: auto;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

/* Middle Column Top */
.bento-col-mid-top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 380px;
}

.mid-top-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  justify-content: center;
}

.avatar-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sc-av {
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  /* Swapped to match the new white background */
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Randomized scatter positioning */
.sc-av.pos-1 {
  top: 20%;
  left: 15%;
  width: 55px;
  height: 55px;
}

.sc-av.pos-2 {
  top: 15%;
  right: 20%;
}

.sc-av.pos-3 {
  bottom: 25%;
  left: 10%;
}

.sc-av.pos-4 {
  bottom: 20%;
  right: 15%;
  width: 50px;
  height: 50px;
}

.sc-av.pos-5 {
  top: 40%;
  left: 5%;
  width: 35px;
  height: 35px;
}

.sc-av.pos-6 {
  top: 50%;
  right: 8%;
  width: 40px;
  height: 40px;
}

.sc-av.pos-7 {
  bottom: 10%;
  left: 40%;
  width: 30px;
  height: 30px;
}

.team-center-text {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.85);
  /* Swapped from grey to white */
  backdrop-filter: blur(4px);
  padding: 20px;
  border-radius: 12px;
}

.team-center-text .logo-small {
  font-size: 1rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 12px;
}

/* Middle Column Bottom (Split Grid) */
.bento-split-col {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  gap: 20px;
}

.bento-mini {
  flex: 1;
  padding: 30px;
  justify-content: space-between;
}

.bento-mini.center-text {
  text-align: center;
  align-items: center;
}

.bento-stat {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}

.bento-bg-icon {
  position: absolute;
  bottom: -15px;
  right: -15px;
  font-size: 6rem;
  color: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.bento-badge-bottom {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #888;
}

/* Right Column Top (Charts) */
.bento-col-right-top {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.chart-visual {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.bar-fill {
  height: 40px;
  background: linear-gradient(90deg, #2e7d32 0%, #4caf50 100%);
  border-radius: 6px;
}

.bar-label {
  font-weight: 700;
  font-size: 0.9rem;
}

.chart-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Right Column Bottom */
.bento-col-right-bot {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.overlay-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.bento-card.img-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
  z-index: 1;
}

.bento-badge-br {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  z-index: 2;
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bento-col-left {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .bento-col-mid-top {
    grid-column: 1 / 2;
    grid-row: auto;
  }

  .bento-split-col {
    grid-column: 2 / 3;
    grid-row: auto;
    flex-direction: column;
  }

  .bento-col-right-top {
    grid-column: 1 / 2;
    grid-row: auto;
  }

  .bento-col-right-bot {
    grid-column: 2 / 3;
    grid-row: auto;
    min-height: 300px;
  }

  .bento-robot-img {
    width: 50%;
  }
}

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

  .bento-col-left,
  .bento-col-mid-top,
  .bento-split-col,
  .bento-col-right-top,
  .bento-col-right-bot {
    grid-column: 1 / 2;
  }

  .bento-split-col {
    flex-direction: row;
  }

  .bento-robot-img {
    width: 70%;
  }
}

/* ==================================================== */
/* ===== REFINED: HISTORY & TEAM (PHASE 10) =====       */
/* ==================================================== */

.history-section {
  display: block;
  width: 100%;
  background-color: #f2f2f0;
  position: relative;
  z-index: 21;
  padding: 180px var(--grid-edge) 100px;
}

.history-section .history-left-content {
  padding-left: 40px;
}

/* Use horizontal-divider (80px down) as the single visible top border. Hide
   the frame's own top line + top corner diamonds on history, and hide the
   previous (excellence) section's bottom line + bottom corners so there is
   only ONE line at this junction — the one with the WHY CHOOSE US badge. */
.history-section .section-frame .sf-line.top,
.history-section .section-frame .sf-dia.tl,
.history-section .section-frame .sf-dia.tr {
  display: none;
}

.bento-section .section-frame .sf-line.bottom,
.bento-section .section-frame .sf-dia.bl,
.bento-section .section-frame .sf-dia.br {
  display: none;
}

.history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Perfect 50/50 split matching reference */
  width: 100%;
}

@media (max-width: 1024px) {
  .history-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Left Split (Timeline Container) --- */
.history-left {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.history-left-content {
  padding: 40px 80px 40px var(--layout-pad);
  position: relative;
  flex-grow: 1;
}

.history-top-divider {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  width: 100%;
}

.history-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-dark);
  margin: 20px 0 24px;
  letter-spacing: -0.02em;
}

.history-desc {
  font-size: 1.1rem;
  color: #555;
  max-width: 480px;
  line-height: 1.5;
  margin-bottom: 60px;
}

/* --- Timeline Slider --- */
.timeline-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.timeline-window {
  overflow: hidden;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.timeline-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tl-card {
  flex: 0 0 50%;
  /* Exactly 2 cards per view */
  min-width: 50%;
  padding: 60px 40px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
}

.tl-card.light {
  background: #fff;
  color: var(--text-dark);
}

.tl-card.dark {
  background: #111;
  color: #fff;
}

.tl-year {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.tl-content-bottom {
  margin-top: 40px;
}

.tl-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.tl-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.8;
}

.tl-controls {
  display: flex;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tl-btn {
  flex: 1;
  background: #fff;
  border: none;
  padding: 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  transition: background 0.3s;
}

.tl-btn.prev {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.tl-btn:hover {
  background: #f9f9f9;
}

@media (max-width: 600px) {
  .tl-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

/* --- Right Split (Founder Profile) --- */
.history-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: visible;
}

.history-right-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(0px - var(--grid-edge));
  background-image: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(0.45) grayscale(30%);
  z-index: 1;
}

.history-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.4);
  z-index: 2;
}

.founder-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 300px;
}

/* Rebuilt Glass Profile Box */
.founder-photo-box {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.founder-photo {
  width: 100%;
  height: 300px;
  /* Forces stable box size so it doesn't break */
  position: relative;
  overflow: hidden;
}

.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%);
}

.founder-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
  pointer-events: none;
}

.founder-logo-overlay {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: #fff;
}

.founder-info {
  text-align: center;
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.founder-info h3 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.founder-info p {
  color: #a3a3a3;
  font-size: 0.9rem;
}

/* =====================================================================
   HISTORY SECTION FIXES
   ===================================================================== */

/* 1. Stop the divider line exactly at the 50% split so it doesn't cross the dark image */
.history-top-divider::before {
  right: 50% !important;
}

/* 2. Move the right diamond to sit exactly on the split edge */
.history-top-divider .diamond.right {
  right: 50% !important;
  margin-right: -3px;
  /* Centers the 7px diamond perfectly over the edge */
}

.history-top-divider .badge,
.pricing-top-divider .badge,
.blog-top-divider .badge,
.process-top-divider .badge {
  margin-left: var(--grid-buffer) !important;
  white-space: nowrap !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 2px !important;
  line-height: 26px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ==================================================== */
/* ===== REFINED: PRICING SECTION (PHASE 11) =====      */
/* ==================================================== */

.pricing-section {
  /* Removed the forced #ffffff background so .dark-theme works properly */
  padding: 150px 0 100px;
  /* 150px top padding clears the absolute borderline */
  position: relative;
  z-index: 20;
}

.pricing-section .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */

/* Exact same divider styling for consistency */
.pricing-top-divider {
  display: flex;
  align-items: center;
  margin-bottom: 100px;
  position: relative;
  margin-left: calc(var(--layout-pad) * -1);
  padding-left: var(--layout-pad);
}

.pricing-top-divider .line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.pricing-top-divider .diamond {
  position: absolute;
  left: var(--layout-pad);
  width: 5px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.15);
  transform: rotate(45deg);
  z-index: 2;
}

.pricing-top-divider .badge {
  background: #fff;
  padding: 0 16px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #000;
  position: relative;
  z-index: 3;
  margin-left: calc(var(--layout-pad) + 20px);
}

.pricing-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
  padding: 0 var(--layout-pad);
  /* Keeps header text inside grid */
}

.pricing-title-block .section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

.pricing-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}

.industry-nav {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 5px;
  gap: 4px;
}

.industry-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-transform: uppercase;
}

.industry-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.industry-btn.active {
  background: #fff;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pricing-toggle-container {
  margin-bottom: 5px;
}

.pricing-toggle-switch {
  position: relative;
  display: inline-flex;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-toggle-switch .slider-bg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#pricingToggle:checked~.pricing-toggle-switch .slider-bg {
  transform: translateX(100%);
}

.toggle-label {
  position: relative;
  z-index: 2;
  padding: 10px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #888;
  transition: color 0.3s;
  letter-spacing: 0.05em;
}

.toggle-label.active {
  color: #000;
}

@media (max-width: 768px) {
  .pricing-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
}

/* Updated Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 var(--grid-edge);
  /* FIX: Expands grid perfectly to global lines */
}

@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.p-card {
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  /* FIX: Highly visible borders */
  color: #ffffff;
  /* FIX: Forces readable text on dark backgrounds */
}

.p-card:last-child {
  border-right: none;
}

.p-card.light {
  background: transparent;
}

.p-card.dark {
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.p-card.dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=600&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.4);
  z-index: 0;
}

.p-card.dark>* {
  position: relative;
  z-index: 2;
}

.p-plan-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.p-plan-desc {
  font-size: 0.95rem;
  color: #aaa;
  margin-bottom: 40px;
  min-height: 44px;
  line-height: 1.5;
}

.price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 40px;
}

.price-wrap .currency {
  font-size: 1.5rem;
  font-weight: 700;
}

.price-wrap .amount {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.price-wrap .period {
  font-size: 0.9rem;
  color: #888;
  font-weight: 500;
}

.included-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 24px;
}

.p-features {
  list-style: none;
  padding: 0;
  margin: 0 0 50px;
  flex-grow: 1;
}

.p-features li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 0.95rem;
  margin-bottom: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.p-features li i {
  font-size: 0.8rem;
  margin-top: 4px;
  color: #22c55e !important;
  /* FIX: Forces bright green checkmarks */
}

.p-card-bot {
  margin-top: auto;
  padding-top: 20px;
}

.p-btn-text {
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s;
  color: #ffffff !important;
  /* FIX: Forces white links */
}

.p-btn-text:hover {
  color: #aaaaaa !important;
}

/* Custom Plan styling */
.btn-custom-quote {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  /* Contrast button for custom card */
  color: #000000;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 40px;
  transition: background 0.3s;
}

.btn-custom-quote:hover {
  background: #e5e5e5;
}

.btn-custom-quote .text {
  padding: 16px 24px;
  font-weight: 600;
  font-size: 0.9rem;
}

.btn-custom-quote .icon {
  padding: 0 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-custom-quote .icon i {
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

.btn-custom-quote:hover .icon i {
  transform: rotate(0) translate(2px, -2px);
}

.p-testimonial {
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: auto;
}

.p-testi-text {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 24px;
}

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

.p-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.p-author-info {
  display: flex;
  flex-direction: column;
}

.p-author-info strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.p-author-info span {
  font-size: 0.8rem;
  color: #888;
}

/* ==================================================== */
/* ===== SERVICE PRICING TABS                      ===== */
/* ==================================================== */

.svc-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--layout-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.svc-tabs {
  display: flex;
}

.svc-tab {
  background: none;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #666;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 22px 30px;
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
  text-transform: uppercase;
  white-space: nowrap;
}

.svc-tab:first-child {
  border-left: none;
}

.svc-tab:hover {
  color: #fff;
}

.svc-tab.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.svc-tabs-hint {
  font-size: 0.72rem;
  color: #555;
  letter-spacing: 0.05em;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .svc-tabs-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .svc-tabs {
    width: 100%;
  }

  .svc-tab {
    flex: 1;
    text-align: center;
    padding: 16px 12px;
    font-size: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .svc-tabs-hint {
    display: none;
  }
}

@media (max-width: 768px) {
  .svc-tabs-row {
    border-bottom: none;
  }

  .svc-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .svc-tabs::-webkit-scrollbar {
    display: none;
  }

  .svc-tab {
    flex-shrink: 0;
    flex: none;
    padding: 14px 18px;
    font-size: 0.68rem;
    border-bottom: none;
  }
}

/* ==================================================== */
/* ===== NEW: AI EXCELLENCE SECTION (PHASE 13) =====    */
/* ==================================================== */

.excellence-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Restored to keep the section tall */
  display: flex;
  background-color: #ffffff;
  color: var(--text-dark);
  padding: 120px var(--layout-pad);
  z-index: 20;
}

/* Hide the 80px masks so the white background stretches edge-to-edge, removing the black bars */
.excellence-section .section-frame::before,
.excellence-section .section-frame::after,
.excellence-section .section-frame .sf-line.top,
.excellence-section .section-frame .sf-line.bottom {
  display: none !important;
}

.excellence-section.light-theme {
  background-color: #000000;
  color: #ffffff;
}

/* New Video Background Styling */
.exc-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.6;
  /* Adjust this to make the video brighter or darker */
  pointer-events: none;
}

/* Re-purposed overlay to add a subtle dark gradient over the video for readable text */
.exc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.8) 100%);
  pointer-events: none;
  z-index: 1;
}

.exc-content-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Anchors content to the bottom */
}

@media (max-width: 1024px) {
  .exc-content-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
  }
}

.exc-left {
  display: flex;
  flex-direction: column;
  margin-bottom: auto;
  /* Pushes the left text to the top */
}

.exc-massive-num {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 15vw, 220px);
  font-weight: 700;
  line-height: 0.8;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}

.exc-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.exc-right {
  display: flex;
  flex-direction: column;
  max-width: 550px;
}

.exc-quote-block {
  margin-bottom: 40px;
  text-align: right;
}

@media (max-width: 1024px) {
  .exc-quote-block {
    text-align: left;
  }
}

.exc-quote-block .logo-small {
  font-weight: 700;
  font-size: 1.2rem;
  display: inline-block;
  margin-bottom: 20px;
  opacity: 0.9;
}

.exc-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.exc-stats-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px;
  backdrop-filter: blur(5px);
}

.exc-stat h4 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
}

.exc-stat p {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.8;
}

/* ==================================================== */
/* ===== INSIGHTS & UPDATES (PHASE 14) =====            */
/* ==================================================== */

.blog-section {
  background-color: #ffffff;
  color: var(--text-dark);
  padding: 230px var(--layout-pad) 100px;
  position: relative;
  z-index: 20;
}

/* Hide the previous section's (excellence) frame bottom + blog's frame top so
   only the horizontal-divider line (at y=80) with INSIGHTS & UPDATES badge
   shows as the junction line, matching the bento/history pattern. */
/* excellence-section bottom border removed logic - keeping it as standard dividers handle junctions */
.blog-section .section-frame .sf-line.top,
.blog-section .section-frame .sf-dia.tl,
.blog-section .section-frame .sf-dia.tr {
  display: none;
}

/* top constraint removed to let it sit at 80px normally */

.blog-top-divider {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  position: relative;
  margin-left: calc(var(--layout-pad) * -1);
  padding-left: var(--layout-pad);
}

.blog-top-divider .line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 1;
}

.blog-top-divider .diamond {
  position: absolute;
  left: var(--layout-pad);
  width: 5px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.15);
  transform: rotate(45deg);
  z-index: 2;
}

.blog-top-divider .badge {
  background: #fff;
  padding: 0 16px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #000;
  position: relative;
  z-index: 3;
  margin-left: calc(var(--layout-pad) + 20px);
}

.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.blog-header .section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}


@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-img-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.blog-card.large .blog-img-wrap {
  aspect-ratio: 16/9;
}

.blog-card.small .blog-img-wrap {
  aspect-ratio: 16/9;
}

.blog-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-img-wrap img {
  transform: scale(1.05);
}

.blog-meta {
  padding-top: 24px;
}

.blog-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.blog-card:hover .blog-title {
  color: #666;
}

.blog-date {
  color: #888;
  font-size: 0.9rem;
  font-weight: 500;
}

.blog-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ==================================================== */
/* ===== REFINED: CONTACT SECTION (PHASE 15) =====      */
/* ==================================================== */

.contact-hero-sec {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 200px var(--layout-pad) 140px;
  /* Increased padding to clear the 80px masks */
  background-color: #ffffff;
  overflow: hidden;
  z-index: 10;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  /* Pastel aurora blur */
  background: radial-gradient(circle at 70% 60%, rgba(255, 182, 255, 0.15), transparent 40%),
    radial-gradient(circle at 30% 40%, rgba(0, 255, 255, 0.1), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255, 235, 150, 0.15), transparent 40%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
}

.contact-hero-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3.5rem, 11vw, 140px);
  /* Reduced font size to fit perfectly */
  font-weight: 700;
  line-height: 0.85;
  color: #222;
  margin: 0;
  letter-spacing: -0.03em;
}

.contact-hero-title.left {
  text-align: left;
}

.contact-hero-title.right {
  text-align: right;
  margin-top: -10px;
}

/* Contact Split Grid - CONSTRAINED TO BORDERLINES */
.contact-split-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% - (var(--grid-edge) * 2));
  /* Mathematically locks to global grid */
  margin: 0 var(--grid-edge);
  /* Prevents bleeding to the right */
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .contact-split-sec {
    grid-template-columns: 1fr;
  }
}

/* Left Side (Light) */
.contact-split-left {
  background: #ffffff;
  color: #111;
  padding: 60px 40px;
  /* Tighter padding to decrease height */
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 60px;
  box-sizing: border-box;
}

.contact-quote-block h3 {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.2rem, 1.8vw, 24px);
  /* Scaled down for neat wrapping */
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 30px;
  max-width: 480px;
}

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

.contact-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-author-info strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
}

.contact-author-info span {
  font-size: 0.85rem;
  color: #666;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-info-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 8px;
  width: max-content;
}

.contact-info-val {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.5;
  max-width: 350px;
}

.contact-info-massive {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.5rem, 2.5vw, 32px);
  font-weight: 700;
  color: #111;
  text-transform: uppercase;
  margin-top: 8px;
}

.contact-info-time {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.5rem, 4vw, 55px);
  /* Scaled down */
  font-weight: 700;
  color: #111;
  line-height: 1;
  margin-top: 20px;
  font-variant-numeric: tabular-nums;
}

/* Right Side (Dark Form) */
.contact-split-right {
  background: #0a0a0a;
  color: #fff;
  padding: 60px 40px;
  /* Matches left side padding */
  box-sizing: border-box;
  width: 100%;
}

.contact-form-heading {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.3rem, 2vw, 24px);
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.c-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.c-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}

@media (max-width: 600px) {
  .c-form-row {
    grid-template-columns: 1fr;
  }
}

.c-input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.c-input-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ddd;
}

.c-input-group input,
.c-input-group textarea {
  width: 100%;
  box-sizing: border-box;
  /* Forces padding to stay inside width */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  border-radius: 4px;
  transition: border-color 0.3s, background 0.3s;
}

.c-input-group input:focus,
.c-input-group textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.c-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.c-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: #aaa;
  transition: all 0.3s;
  background: transparent;
}

.c-radio-label input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: #fff;
}

.c-radio-label:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.c-radio-label:has(input:checked) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.c-submit-btn {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  border: none;
  padding: 20px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-body, sans-serif);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.3s;
  margin-top: 10px;
}

.c-submit-btn:hover {
  background: #e5e5e5;
}

/* ==================================================== */
/* ===== FOOTER (PHASE 16 - MOBILE OPTIMIZED) =====     */
/* ==================================================== */

.footer-section {
  position: relative;
  width: 100%;
  background-color: var(--bg-dark, #0d0d0d);
  padding: 0 0 350px;
  /* Deep floor for watermark */
  overflow: hidden;
  z-index: 20;
}

.footer-watermark {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3rem, 18vw, 800px);
  /* Responsive scaling to prevent horizontal cutoff */
  font-weight: 700;
  line-height: 0.7;
  /* Tightened line-height to pull text flush to the bottom edge */
  color: rgba(255, 255, 255, 0.035);
  text-align: center;
  pointer-events: none;
  user-select: none;
  position: absolute;
  bottom: 0;
  /* Align perfectly with bottom edge without bleeding out */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  width: 100%;
  /* Ensure it spans the container for centering */
  letter-spacing: -0.05em;
  text-transform: lowercase;
}

/* --- MOBILE STACKING LOGIC (< 768px) --- */
.footer-column-stack {
  position: relative;
  z-index: 2;
  width: calc(100% - (var(--grid-edge) * 2));
  margin: 0 var(--grid-edge);
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  text-align: left;
}

.footer-col {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.brand-col .footer-logo-mobile,
.brand-col p,
.brand-col .footer-cta-mobile,
.links-col .footer-label,
.links-col ul,
.links-col li,
.newsletter-col .footer-label,
.newsletter-col p,
.newsletter-col .newsletter-form,
.newsletter-col .privacy-text,
.main-contact-col .footer-label,
.main-contact-col .contact-details,
.main-contact-col .footer-bot-link,
.address-col .footer-label,
.address-col p,
.social-col .footer-label,
.social-col .footer-socials,
.legal-col .footer-label,
.legal-col p {
  align-self: flex-start;
  text-align: left;
}

.brand-col .footer-logo-mobile {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 24px;
}

.brand-col p {
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
  max-width: 480px;
  margin-bottom: 16px;
}

.brand-col p:last-of-type {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 40px;
}

.footer-cta-mobile {
  display: inline-flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  background: #fff;
  color: #000;
  padding: 18px 24px;
  text-decoration: none;
}

.footer-cta-mobile .btn-text {
  font-weight: 700;
  margin-right: 24px;
  font-size: 0.95rem;
}

.footer-cta-mobile .profile-btn-icon {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 20px;
}

.footer-cta-mobile .profile-btn-icon i {
  transform: rotate(45deg);
  transition: transform 0.3s;
}

.footer-cta-mobile:hover .profile-btn-icon i {
  transform: rotate(0);
}

.links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.links-col li {
  font-size: 0.95rem;
  font-weight: 500;
  color: #ccc;
  transition: color 0.3s;
}

.links-col li:hover {
  color: #fff;
}

.newsletter-col p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ccc;
  margin-bottom: 24px;
  max-width: 480px;
}

.newsletter-form {
  display: flex;
  width: 100%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 16px;
  margin-bottom: 16px;
  transition: border-color var(--transition);
  align-items: center;
  justify-content: space-between;
}

.newsletter-form:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
}

.newsletter-form input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 0.95rem;
  padding: 12px 0;
}

.newsletter-form input:focus {
  outline: none;
}

.newsletter-form button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-form button .circle-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.3s, color 0.3s;
}

.newsletter-form button:hover .circle-icon {
  background: #fff;
  color: #000;
}

.privacy-text {
  font-size: 0.8rem;
  color: #666;
}

.privacy-text a {
  color: #fff;
  text-decoration: underline;
}

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

.footer-bot-link {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.address-col p {
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.5;
  max-width: 380px;
}

.legal-col p {
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.5;
}

.legal-col a {
  color: #fff;
  text-decoration: none;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
  color: #ccc;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-socials a:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.footer-label {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #888;
  margin-bottom: 30px;
  text-transform: uppercase;
  text-align: left;
}

.footer-framed-box {
  display: none;
}

/* =========================================================================
   ===== DESKTOP MEDIA QUERY (RESTORES GRID AND FRAMED BOX AT 769px+) =====
   ========================================================================= */
@media (min-width: 769px) {
  .footer-section {
    padding: 100px 0 0;
    min-height: 800px;
  }

  .footer-column-stack {
    display: none !important;
  }

  .footer-framed-box {
    position: relative;
    z-index: 2;
    width: calc(100% - (var(--grid-edge) * 2));
    margin: 0 var(--grid-edge) 100px var(--grid-edge);
    /* Balanced spacing */
    background: linear-gradient(to bottom, rgba(20, 20, 20, 0.4) 0%, rgba(20, 20, 20, 0.02) 100%);
    /* Extreme transparency */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
  }

  .footer-framed-box .footer-top,
  .footer-framed-box .footer-bottom {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  }

  .footer-framed-box .footer-top {
    padding: 80px 60px;
  }

  .footer-framed-box .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-framed-box .footer-bot-col {
    padding: 60px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-framed-box .footer-bot-col:last-child {
    border-right: none;
  }

  .footer-label {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #888;
    margin-bottom: 30px;
    text-transform: uppercase;
  }

  .footer-btn-modern {
    display: flex !important;
    align-items: stretch !important;
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    border-radius: 2px;
    width: fit-content;
    text-decoration: none;
    transition: transform 0.3s;
  }

  .footer-btn-modern:hover {
    transform: translateY(-2px);
  }

  .footer-btn-modern .btn-text {
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .footer-btn-modern .btn-icon-box {
    background: transparent !important;
    /* Removes the black box */
    color: #000 !important;
    /* Makes the arrow black */
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
  }

  .footer-links li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ccc;
    font-weight: 600;
    transition: color 0.3s;
  }

  .footer-links li a:hover {
    color: #fff;
  }

  .footer-links li a i {
    font-size: 0.75rem;
    opacity: 0.6;
  }

  .newsletter-form-modern {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 16px;
    border-radius: 2px;
    align-items: center;
    margin-bottom: 20px;
  }

  .newsletter-form-modern input {
    background: transparent;
    border: none;
    color: #fff;
    flex-grow: 1;
    padding: 10px 0;
    font-size: 0.9rem;
  }

  .newsletter-form-modern input:focus {
    outline: none;
  }

  .newsletter-form-modern .arrow-link {
    color: #fff;
    font-size: 1.1rem;
    opacity: 0.8;
  }

  display: flex;
  flex-direction: column;
}

.footer-framed-box .footer-bot-col:last-child {
  border-right: none;
}

.footer-framed-box .brand-col p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 40px;
  max-width: 380px;
}

.footer-framed-box .brand-col .logo {
  display: none;
}

.footer-framed-box .social-col .footer-socials {
  justify-content: flex-start;
}

.footer-framed-box .brand-col .cta-btn {
  background: #fff !important;
  color: #000 !important;
  padding: 0 0 0 24px;
  display: inline-flex;
  width: auto;
  border-radius: 0;
}

.footer-framed-box .brand-col .cta-btn span {
  margin-right: 24px;
  color: #000;
  font-weight: 600;
}

.footer-framed-box .brand-col .cta-btn .profile-btn-icon {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.footer-framed-box .brand-col .cta-btn .profile-btn-icon i {
  color: #000;
  transform: rotate(0);
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer-framed-box .footer-top {
    grid-template-columns: 1fr 1fr;
    padding: 40px;
    gap: 40px;
  }

  .footer-framed-box .footer-bottom {
    grid-template-columns: 1fr 1fr;
  }

  .footer-framed-box .footer-bot-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-framed-box .footer-bot-col:nth-child(even) {
    border-right: none;
  }
}

/* =====================================================================
   UNIFIED DIVIDER STYLING (white sections)
   Makes every top-divider variant match .horizontal-divider
   ===================================================================== */
.process-top-divider {
  left: var(--grid-edge) !important;
  right: var(--grid-edge) !important;
  background: transparent !important;
}

.history-top-divider,
.pricing-top-divider,
.blog-top-divider {
  margin-left: 0 !important;
  padding-left: var(--grid-edge) !important;
  padding-right: var(--grid-edge) !important;
  background: transparent !important;
}

.history-top-divider::before,
.pricing-top-divider::before,
.blog-top-divider::before,
.process-top-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--grid-edge) - 100px);
  right: calc(var(--grid-edge) - 100px);
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 1;
  pointer-events: none;
}

.process-top-divider::before {
  left: -100px;
  right: -100px;
}

.history-top-divider .line,
.pricing-top-divider .line,
.blog-top-divider .line,
.process-top-divider .line {
  display: none;
}

.history-top-divider .diamond,
.pricing-top-divider .diamond,
.blog-top-divider .diamond,
.process-top-divider .diamond {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background-color: rgba(0, 0, 0, 0.35);
  transform: rotate(45deg);
  z-index: 2;
  left: auto;
  right: auto;
}

.process-top-divider .diamond.left {
  left: -3px;
}

.process-top-divider .diamond.right {
  right: -3px;
}

.history-top-divider .diamond.left,
.pricing-top-divider .diamond.left,
.blog-top-divider .diamond.left {
  left: calc(var(--grid-edge) - 3px);
}

.history-top-divider .diamond.right,
.pricing-top-divider .diamond.right,
.blog-top-divider .diamond.right {
  right: calc(var(--grid-edge) - 3px);
}

/* ==================================================== */
/* ===== ABOUT PAGE SPECIFIC STYLES =================== */
/* ==================================================== */

.dark-theme {
  background-color: var(--bg-dark);
  color: var(--text-white);
}

.light-theme {
  background-color: #ffffff;
  color: var(--text-dark);
}

/* Common Horizontal Divider Overrides for Dark/Light Context */
.horizontal-divider.dark-lines .line {
  background-color: rgba(0, 0, 0, 0.15);
}

.horizontal-divider.dark-lines .diamond {
  background-color: rgba(0, 0, 0, 0.35);
}

.horizontal-divider.dark-lines .badge {
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  background: #f4f4f0;
}

.horizontal-divider.light-lines .line {
  background-color: rgba(255, 255, 255, 0.15);
}

.horizontal-divider.light-lines .diamond {
  background-color: rgba(255, 255, 255, 0.35);
}

.horizontal-divider.light-lines .badge {
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  background: transparent;
  /* Now fully transparent as requested */
  padding: 0 16px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-radius: 0;
  line-height: 26px;
}

/* Utility: Parallax Overflow Wrapper */
.img-overflow-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.img-overflow-wrapper img.parallax-img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
}

/* ===== LAMP EFFECT (ABOUT HERO) ===== */
.lamp-container {
  position: absolute;
  top: 80px;
  /* Pushes the lamp down to start exactly below the 80px navbar */
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  /* Adjusts the height so it doesn't overflow the section */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.lamp-blur-top {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 12rem;
  background: transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0.1;
  z-index: 50;
}

.lamp-glow-main {
  position: absolute;
  top: 0;
  transform: translateY(-30%);
  height: 9rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(3rem);
  z-index: 50;
  will-change: width, opacity;
}

.lamp-glow-oval {
  position: absolute;
  top: 0;
  transform: translateY(-20%);
  height: 9rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(2rem);
  z-index: 30;
  will-change: width, opacity;
}

.lamp-line {
  position: absolute;
  top: 0;
  transform: translateY(-10%);
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 50;
  will-change: width, opacity;
}

.lamp-cone {
  position: absolute;
  top: 0;
  height: 14rem;
  will-change: width, opacity;
}

.lamp-cone.left {
  right: 50%;
  background: conic-gradient(from 70deg at center top, rgba(255, 255, 255, 0.6), transparent, transparent);
}

.lamp-cone.right {
  left: 50%;
  background: conic-gradient(from 290deg at center top, transparent, transparent, rgba(255, 255, 255, 0.6));
}

.lamp-mask {
  position: absolute;
  background: var(--bg-dark);
  z-index: 20;
}

.lamp-mask.bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  -webkit-mask-image: linear-gradient(to top, white, transparent);
  mask-image: linear-gradient(to top, white, transparent);
}

.lamp-mask.right {
  bottom: 0;
  left: 0;
  width: 10rem;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, white, transparent);
  mask-image: linear-gradient(to right, white, transparent);
}

.lamp-mask.left {
  bottom: 0;
  right: 0;
  width: 10rem;
  height: 100%;
  -webkit-mask-image: linear-gradient(to left, white, transparent);
  mask-image: linear-gradient(to left, white, transparent);
}

/* Ensure the text content sits above the lamp effect */
.gs-lamp-content {
  position: relative;
  z-index: 100;
  will-change: transform, opacity;
}

/* --- 1. About Hero Section --- */
.about-hero-sec {
  position: relative;
  padding: 180px 0 100px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  z-index: 20;
  border-bottom: none;
}

/* New Centered About Hero */
.about-hero-centered {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 40px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ccc;
  margin-bottom: 30px;
}

.about-hero-centered h1 {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw, 100px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.about-hero-centered p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: #aaa;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 40px;
}

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

.rounded-btn {
  border-radius: 50px !important;
}

.hero-actions .btn-icon {
  border-color: rgba(255, 255, 255, 0.2);
}

.hero-actions .btn-icon i {
  transform: none;
  /* Points straight down instead of diagonal */
}

.hero-actions:hover .btn-icon i {
  transform: translateY(4px);
  /* Animates down on hover */
}

/* --- 2. Massive Statement Section (Text Reveal) --- */
.massive-statement {
  position: relative;
  padding: 140px 0 80px;
  z-index: 20;
}

.massive-statement .section-frame .sf-line.top {
  display: none;
}

.massive-statement .statement-container {
  margin: 0 var(--grid-edge);
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  /* FIX: Forces the items to stack vertically */
  align-items: flex-start;
  /* FIX: Keeps the badge aligned to the left */
  margin-bottom: 80px;
}

.massive-statement .small-heading {
  margin-bottom: 60px;
}

.statement-text {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 52px);
  /* Slightly smaller to fit more words per line */
  line-height: 1.1;
  font-weight: 500;
  text-transform: uppercase;
  width: 100%;
  /* Spans full section width */
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.2);
  /* Initial dimmed state */
}

/* --- 3. About Bento Grid Section (4x2 layout) --- */
.about-bento-sec {
  position: relative;
  padding: 80px 0 80px;
  /* Aligned with section-frame insets */
  z-index: 20;
}

.about-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  /* ↓ Controls the height of the boxes - slightly reduced for combined view ↓ */
  grid-auto-rows: 280px;

  margin: 0 var(--grid-edge);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  /* Seals the division between statement and grid */
}

.bento-cell {
  /* Tightened padding to ensure content fits within the 340px height */
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Internal structural lines */
.bento-cell.border-right {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.bento-cell.border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.bento-cell.center-flex {
  align-items: center;
  justify-content: center;
}

.large-icon {
  font-size: 4rem;
  color: #fff;
}

.bento-p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #aaa;
  margin: 0;
}

.mt-30 {
  margin-top: 30px;
}

.mt-auto {
  margin-top: auto;
}

.vision-list {
  list-style: none;
}

.vision-list li {
  padding: 12px 0;
  border-bottom: none;
  /* Removed as requested */
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vision-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vision-list li i {
  font-size: 0.65rem;
  color: #fff;
}

.bento-cell.img-cell {
  padding: 0;
}

.bento-cell.img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%);
}

.bento-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2vw, 30px);
  /* Slightly smaller heading */
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.action-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  /* Add these two lines to push content to the right */
  align-items: flex-end;
  text-align: right;
}

.goal-stats h3 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 3.5vw, 50px);
  font-weight: 700;
  line-height: 1;
}

.goal-stats .stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 10px;
  color: #aaa;
}

/* Responsive Grid Breakdowns for the 4x2 Layout */
@media (max-width: 1024px) {
  .about-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 320px;
  }

  .bento-cell.border-right {
    border-right: none;
  }

  .bento-cell:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .bento-cell.img-cell {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .about-bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(300px, auto);
  }

  .bento-cell:nth-child(odd) {
    border-right: none;
  }
}

/* --- 4. Core Capabilities Grid (Replaces Partners Section) --- */
.capabilities-sec {
  position: relative;
  padding: 180px 0 150px;
  z-index: 20;
}

.capabilities-sec .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the top line with segments */

.cap-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 50px);
  text-transform: uppercase;
  margin-bottom: 60px;
  text-align: center;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 var(--grid-edge);
  /* Removed top and left borders */
}

/* Partner Card Style (Updated from Expertise) */
.cap-item {
  position: relative;
  aspect-ratio: 1.4 / 1;
  background-color: #ebebeb;
  /* Darkened grey box */
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin: 6px;
  /* Small gap between boxes */
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cap-item:hover {
  background-color: #ebebeb;
  transform: translateY(-2px);
}

.cap-number {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.65rem;
  font-weight: 500;
  color: #999;
}

.cap-logo {
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.cap-logo i {
  font-size: 1.4rem;
  color: #333;
}

/* Keep specific font mappings for logo variety */
.cap-item:nth-child(1) .cap-logo {
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.cap-item:nth-child(2) .cap-logo {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
}

.cap-item:nth-child(3) .cap-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
}

.cap-item:nth-child(4) .cap-logo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.6rem;
}

.cap-item:nth-child(5) .cap-logo {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.6rem;
}

.cap-item:nth-child(6) .cap-logo {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.1rem;
}

.cap-item:nth-child(7) .cap-logo {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
}

.cap-item:nth-child(8) .cap-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
}

.cap-item:nth-child(9) .cap-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
}

.cap-item:nth-child(10).cap-logo {
  font-family: var(--font-body);
  font-size: 1.8rem;
}

.cap-desc {
  display: none;
}

/* Text reveal removed for this aesthetic */

/* Double-Width "Join Us" Card - Forced Dark Theme */
.cap-item.join-us-card {
  grid-column: span 2;
  aspect-ratio: 2.85 / 1;
  min-height: 0;
  height: auto;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-decoration: none;
  overflow: hidden;
  background-color: var(--bg-dark) !important;
  color: var(--text-white) !important;
}

.cap-item.join-us-card .logo-small {
  font-size: 0.75rem;
}

.cap-item.join-us-card h4 {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.2vw, 17px);
  line-height: 1.2;
  margin: 6px 0;
  text-transform: uppercase;
  color: var(--text-white) !important;
}

.cap-item.join-us-card .join-btn {
  padding: 6px 14px !important;
  font-size: 0.7rem !important;
}

.cap-item.join-us-card .rating {
  bottom: 20px !important;
  right: 32px !important;
  font-size: 0.7rem !important;
}

.cap-item.join-us-card .join-btn {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 4px;
  transition: background 0.3s;
  color: var(--text-white);
}

.cap-item.join-us-card:hover .join-btn {
  background: var(--text-white);
  color: var(--bg-dark);
}

.cap-item.join-us-card .rating {
  font-size: 0.8rem;
  color: #aaa;
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cap-item.join-us-card .rating strong {
  color: var(--text-white);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cap-item {
    aspect-ratio: auto;
    min-height: 250px;
  }

  .cap-item.join-us-card {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .cap-grid {
    grid-template-columns: 1fr;
  }

  .cap-item.join-us-card {
    grid-column: span 1;
  }

  .cap-item.join-us-card .rating {
    position: relative;
    bottom: 0;
    right: 0;
    margin-top: 20px;
  }
}

/* --- 5. Growth Marquee Section (Infinite Loop) --- */
.growth-marquee-sec {
  position: relative;
  background-color: #ffffff;
  /* Switched from off-white to pure white as requested */
  padding: 100px 0 60px;
  /* Tightened padding to remove excess vertical space */
  z-index: 20;
  overflow: hidden;
}

.growth-marquee-sec::before,
.growth-marquee-sec::after {
  display: none !important;
  /* Disables the masks that were cutting off the text */
}

.growth-marquee-sec .section-frame .sf-line.top,
.growth-marquee-sec .section-frame .sf-line.bottom,
.growth-marquee-sec .section-frame .sf-dia {
  display: none;
}

.growth-header {
  margin: 0 var(--grid-edge) 60px;
  padding-left: 40px;
  /* Aligns with the mission statement gap */
}

/* FIX: Removes massive white gap above "How We Work" exclusively on mobile */
@media (max-width: 768px) {
  .growth-marquee-sec {
    padding-top: 20px !important;
  }

  .growth-header {
    margin-bottom: 40px !important;
    padding-left: 20px !important;
    /* Ensures it aligns cleanly on mobile grids */
  }
}

.growth-header .section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 65px);
  /* Decreased font size */
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}

.marquee-container {
  width: calc(100% - (var(--grid-edge) * 2));
  margin: 0 var(--grid-edge);
  overflow: hidden;
  display: flex;
  border: none;
  /* Removed internal borders as requested */
}

.marquee-track {
  display: flex;
  width: max-content;
  /* 30s is a good speed, adjust if needed */
  animation: marqueeLoop 30s linear infinite;
}

@keyframes marqueeLoop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.m-card {
  width: clamp(260px, 22vw, 320px);
  /* Slightly smaller boxes */
  height: clamp(260px, 22vw, 320px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.m-card.text-card {
  background-color: #ffffff;
  /* Explicit white for the "White-Black-White" pattern */
  padding: 30px 24px;
  /* Tighter padding for smaller boxes */
  justify-content: flex-start;
}

.m-card.dark-card {
  background-color: var(--bg-dark);
  color: var(--text-white);
}

.m-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  /* Decreased heading size */
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.m-card.dark-card h3 {
  color: #fff;
}

.m-card .year {
  font-size: 0.7rem;
  /* Decreased year size */
  font-weight: 600;
  color: #888;
  margin-bottom: auto;
  display: block;
}

.m-card p {
  font-size: 0.9rem;
  /* Decreased paragraph size */
  line-height: 1.5;
  color: #555;
  margin: 0;
}

.m-card.dark-card p {
  color: #ccc;
}

.m-card.img-card {
  padding: 0;
}

.m-card.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
}

/* --- 6. Since 2019 Stats Section --- */
.since-sec {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 20;
  padding: 0 0 80px 0;
}

/* Hide the 80px black architectural masks so the background image fills the entire section */
.since-sec .section-frame::before,
.since-sec .section-frame::after,
.since-sec .section-frame .sf-line.top,
.since-sec .section-frame .sf-line.bottom {
  display: none !important;
}

.since-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: 0.4;
  z-index: 1;
}

.since-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 80%, var(--bg-dark) 100%);
}

.since-content {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 120px;
  flex-grow: 1;
  justify-content: space-between;
  /* Pushes the stats row to the absolute bottom */
}

.since-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Perfectly centers the left text and right quote */
  margin: 0 var(--grid-edge);
  padding-bottom: 80px;
  flex-grow: 1;
  /* Fills the space above the stats */
}

.massive-since {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 12vw, 180px);
  /* FIX: Reduced max size to prevent crowding on large laptops */
  font-weight: 700;
  line-height: 1.05;
  /* FIX: Increased line-height so the words no longer overlap vertically */
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-left: 40px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.massive-since .line-2 {
  padding-left: 12%;
  /* Reduced from 20% to align '2' right under 'N' */
}

.since-quote-box {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-right: 40px;
  /* Aligns with the global grid gap */
}

.since-quote-box p {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 30px 0 40px;
  /* Better breathing room around quote */
  text-transform: uppercase;
  color: #fff;
}

.since-quote-box .small-heading {
  color: #aaa !important;
  margin-bottom: 24px !important;
  /* Add these two lines to force right alignment */
  text-align: right;
  width: 100%;
}

.since-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 var(--grid-edge);
}

.stat-col {
  padding: 60px 40px;
  /* Taller, wider padding for premium feel */
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-col:last-child {
  border-right: none;
}

.stat-col h3 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 70px);
  /* Larger numbers */
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1;
}

.stat-col p {
  font-size: 0.95rem;
  color: #aaa;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .since-top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
  }

  .since-quote-box {
    align-items: flex-start;
    text-align: left;
  }

  .since-stats-row {
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  .stat-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 40px 30px;
  }
}

@media (max-width: 600px) {
  .since-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .massive-since .line-2 {
    padding-left: 0;
  }
}

.since-quote-box .quote-btn {
  margin: 0;
  /* Removes the centering auto-margin so flex-end can push it right */
}

/* --- 7. Team Grid Section --- */


.team-sec {
  position: relative;
  padding: 150px 0;
  z-index: 20;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 80px var(--grid-edge) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.team-member {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px;
}

.team-member img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: grayscale(100%);
  margin-bottom: 20px;
}

.team-member h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.team-member p {
  font-size: 0.85rem;
  color: #888;
}

.join-team-card {
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.join-team-card h3 {
  font-size: 1.3rem;
  margin: 20px 0 30px;
  text-transform: uppercase;
}

/* --- 7. FAQ Section (Split Pane Layout) --- */
.faq-sec {
  position: relative;
  padding: 80px 0 150px;
  /* Reduced top padding for tighter flow */
  background-color: #ffffff;
  color: var(--text-dark);
  z-index: 20;
}

.faq-sec .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */

.faq-container {
  margin: 0 var(--grid-edge);
}

.faq-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 65px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  padding-left: 40px;
  /* Standard vertical grid offset */
  margin-top: 60px;
  /* Symmetrical with the 60px bottom margin */
  margin-bottom: 60px;
  text-transform: uppercase;
}

.faq-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Perfect 50/50 Split */
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  min-height: 500px;
}

.faq-row-header {
  padding: 20px 40px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
}

/* Left Side: Questions */
.faq-left {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.faq-question-item {
  padding: 35px 40px;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-question-item.no-border {
  border-bottom: none;
}

.faq-question-item:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.02);
  /* Very subtle shift instead of grey */
}

/* Active Question State */
.faq-question-item.active {
  background-color: var(--bg-dark);
  color: var(--text-white);
}

/* Right Side: Answers */
.faq-right {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  /* Restored clean white panel */
}

.faq-answer-display {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.faq-answer-text {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  max-width: 480px;
  text-align: center;
}

.faq-answer-text.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.faq-answer-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* FAQ Responsive Adjustments */
@media (max-width: 1024px) {
  .faq-split-layout {
    grid-template-columns: 1fr;
    border-top: none;
    min-height: auto;
  }

  .faq-left {
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .desktop-only {
    display: none;
  }

  .faq-right {
    display: none;
  }
}

/* ===== FULL SCREEN VIDEO SECTION (ABOUT PAGE) ===== */
.about-video-sec {
  position: relative;
  width: 100%;
  /* Changed from 100vw to respect scrollbar and grid alignment */
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.about-video-sec .section-frame .sf-line.top,
.about-video-sec .section-frame::before,
.about-video-sec .section-frame::after {
  display: none !important;
  /* Hides the black top/bottom masks so the video fills the screen */
}

/* The video itself */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Forces the video to fill the screen without stretching */
  z-index: 1;
  filter: grayscale(20%);
  /* Adds a slight premium muted tone */
}

/* Smooth gradient overlay to blend with the dark theme above and below */
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(13, 13, 13, 0.3) 20%, rgba(13, 13, 13, 0.3) 80%, var(--bg-dark) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Floating text container */
.video-content {
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-content.align-left {
  text-align: left;
  align-items: flex-start;
  width: 100%;
  padding-left: calc(var(--grid-edge) + 40px);
  max-width: 720px;
}

.about-video-sec .video-content.align-left {
  margin-right: auto;
  margin-left: 0;
}

.about-video-sec {
  justify-content: flex-start;
  gap: 24px;
}

.video-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 80px);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Responsive Overrides for new sections */
@media (max-width: 1024px) {

  .about-hero-grid,
  .about-bento-grid,
  .awards-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-title {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding-right: 0;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  .about-hero-visual {
    padding-left: 0;
  }

  .bento-cell.border-right {
    border-right: none;
  }

  .bento-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .bento-cell.img-cell {
    height: 400px;
  }

  .hero-team-card {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 20px;
    width: 100%;
  }

  .since-top {
    flex-direction: column;
    gap: 40px;
  }

  .since-stats-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 600px) {
  .growth-track {
    grid-template-columns: 1fr;
  }

  .since-stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .award-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .aw-year {
    text-align: left;
  }
}

/* ==================================================== */
/* ===== SERVICES PAGE HERO SECTION               ===== */
/* ==================================================== */
#services-pin-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-dark);
  overflow: hidden;
  z-index: 10;
}

.services-hero-sec {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.svc-side-menu {
  position: absolute;
  left: var(--layout-pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.svc-side-menu .menu-icon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.svc-side-menu .menu-icon span {
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--text-white);
}

.svc-side-menu .vertical-text {
  writing-mode: vertical-rl;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--text-white);
  text-transform: uppercase;
}

.svc-scroll-progress {
  position: absolute;
  right: var(--layout-pad);
  bottom: 80px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--text-white);
}

.svc-scroll-progress .scroll-text {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

.svc-scroll-progress .progress-track {
  width: 4px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.svc-scroll-progress .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: var(--text-white);
}

.svc-scroll-progress .section-counter {
  font-family: var(--font-body);
  font-size: 0.85rem;
  margin-top: 8px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.svc-content-wrapper {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-section {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 0 var(--layout-pad);
  will-change: transform, opacity;
}

.content-section .hero-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 120px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--text-white);
  margin-bottom: 24px;
}

.content-section .hero-subtitle p {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

/* ==================================================== */
/* ===== WHY PARTNER SECTION (SERVICES PAGE)      ===== */
/* ==================================================== */

.why-partner-sec {
  position: relative;
  padding: 150px 0 80px;
  /* Reduced bottom padding to align floor with grid line */
  background-color: #ffffff;
  color: var(--text-dark);
  z-index: 20;
}

.why-partner-sec .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */

/* Adjust divider positioning to match global grid */
.why-partner-sec .horizontal-divider {
  top: 80px;
  /* Aligned with sf-line.top and grid corners */
}

.why-header {
  margin: 0 var(--grid-edge) 80px;
  text-align: center;
}

.why-header .section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 var(--grid-edge);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.why-card {
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  transition: background-color var(--transition);
}

.why-card:last-child {
  border-right: none;
}

.why-card:hover {
  background-color: #f4f4f0;
}

.why-icon {
  font-size: 2.5rem;
  color: var(--text-dark);
  margin-bottom: 30px;
}

.why-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.why-card p {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  .why-grid {
    grid-template-columns: 1fr;
    border-bottom: none;
  }

  .why-card {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    padding: 60px 30px;
  }
}

/* ==================================================== */
/* ===== APPROACH SECTION (SERVICES PAGE)         ===== */
/* ==================================================== */

.approach-sec {
  padding: 150px 0 120px;
  /* Increased bottom padding from 60px to 120px */
  background-color: var(--bg-dark);
  color: var(--text-white);
  position: relative;
  z-index: 20;
}

/* FIX: Better spacing and removes the image from the Deployment section on mobile */
@media (max-width: 768px) {
  .approach-sec {
    padding-top: 0 !important;
  }

  .approach-sec .horizontal-divider {
    top: 60px !important;
    /* MOVED: Pushes the badge down for a more balanced header look */
  }

  .approach-content .section-title {
    margin-top: 100px !important;
    /* PUSHED: Moves the title lower to maintain the gap from the badge */
  }

  /* REMOVED: Hides the globe/rings image sitting at the bottom of the section on mobile */
  .approach-globe-wrap {
    display: none !important;
  }
}

/* Mobile-only: Pull the badge higher and space out the title from the caption */
@media (max-width: 768px) {
  .approach-sec {
    padding-top: 80px !important;
    /* Pulls the entire section (including badge) higher */
  }

  .approach-content .section-title {
    margin-top: 50px !important;
    /* Pushes the title down, away from the badge */
    margin-bottom: 30px !important;
    /* Creates breathing room above the paragraph */
  }
}

.approach-sec .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */

.approach-sec .horizontal-divider {
  top: 80px;
  /* Aligned with sf-line.top and grid corners */
}

.approach-sec .section-frame .sf-line.bottom {
  display: none;
}

.approach-sec .section-frame .sf-dia.bl,
.approach-sec .section-frame .sf-dia.br {
  display: none;
}

.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin: 0 var(--grid-edge);
  align-items: center;
}

.approach-content .section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 55px);
  font-weight: 700;
  line-height: 1.1;
  margin: 30px 0 24px;
  text-transform: uppercase;
}

.approach-desc {
  font-size: 1.05rem;
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 50px;
  max-width: 480px;
}

.approach-list {
  list-style: none;
}

.approach-list li {
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

.approach-list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.approach-list li .num {
  color: #666;
  margin-right: 24px;
  font-size: 0.9rem;
  font-family: var(--font-body);
}

.approach-list li .text {
  flex-grow: 1;
  transition: transform var(--transition);
}

.approach-list li i {
  opacity: 0;
  transform: translateX(-10px);
  transition: var(--transition);
  color: #fff;
}

.approach-list li:hover {
  color: #fff;
}

.approach-list li:hover .text {
  transform: translateX(10px);
}

.approach-list li:hover i {
  opacity: 1;
  transform: translateX(0);
}

.approach-globe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#d3-globe-canvas {
  width: 100%;
  height: auto;
  cursor: grab;
  border-radius: 50%;
}

#d3-globe-canvas:active {
  cursor: grabbing;
}

.globe-hint {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 0.75rem;
  color: #888;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Responsive */
@media (max-width: 1024px) {
  .approach-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* ==================================================== */
/* ===== SPLIT SCREEN SCROLL SECTION              ===== */
/* ==================================================== */

#split-pin-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Restored to full screen to prevent background gaps during pinning */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Ground the content closer to the bottom border */
  padding-bottom: 120px;
  /* Aligns content with the architectural grid floor */
  background-color: var(--bg-dark);
  z-index: 10;
  overflow: hidden;
}

#split-pin-wrapper.section-framed .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */
#split-pin-wrapper.section-framed .section-frame .sf-line.bottom {
  display: none;
}

#split-pin-wrapper.section-framed .section-frame .sf-dia.bl,
#split-pin-wrapper.section-framed .section-frame .sf-dia.br {
  display: none;
}

.split-scroll-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  width: 100%;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  height: 70vh;
  /* Original height for optimal card visibility */
  align-items: center;
}

.split-left,
.split-right {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
}

/* The Magic Grid Stacking: 
  All text divs and all image divs are forced into grid row 1 / col 1 
  so they stack perfectly on top of each other. 
*/
.split-text-item,
.split-card-item {
  grid-area: 1 / 1;
  width: 100%;
  will-change: transform, opacity;
}

/* Typography matching your theme */
.split-text-item span.num {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  display: block;
  margin-bottom: 1rem;
}

.split-text-item h2 {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.1;
  color: var(--text-white, #fff);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.split-text-item p {
  font-family: var(--font-body, sans-serif);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 90%;
  line-height: 1.6;
}

/* Image Card Styling */
.split-card-item {
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

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

/* Mobile adjustments */
@media (max-width: 991px) {
  .split-scroll-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 2rem;
    height: 85vh;
  }

  .split-left {
    align-items: start;
    height: auto;
  }

  .split-text-item h2 {
    font-size: 2rem;
  }
}

/* ==================================================== */
/* ===== CTA GLOBE SECTION (REDESIGN)             ===== */
/* ==================================================== */

.cta-globe-sec {
  position: relative;
  width: 100%;
  min-height: 85vh;
  /* Reduced from 100vh to tighten vertical space */
  display: flex;
  align-items: flex-start;
  /* Changed from center to allow manual padding control */
  justify-content: center;
  overflow: hidden;
  padding: 180px 24px 180px;
  /* Increased bottom padding for a more balanced gap */
  background: linear-gradient(to bottom right, var(--bg-dark, #0a0a0a), rgba(10, 10, 10, 0.95), rgba(40, 40, 60, 0.1));
}

.cta-globe-sec .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */
.cta-globe-sec .section-frame .sf-line.left,
.cta-globe-sec .section-frame .sf-line.right {
  bottom: 80px;
  /* Terminate lines at the grid floor */
}

.cta-globe-sec::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.5), transparent, rgba(10, 10, 10, 0.3));
  pointer-events: none;
  z-index: 0;
}

/* FIX: Prevents overlap and adjusts dark "shade" overlay for mobile readability */
@media (max-width: 768px) {
  section.cta-globe-sec {
    padding-top: 130px !important;
    /* FIX: Pushes content down so it doesn't overlap the "Initiate Deployment" badge */
  }

  .cta-globe-sec::after {
    background: rgba(0, 0, 0, 0.45) !important;
    /* FIX: Lightens the background "shade" for better visibility */
    z-index: 1 !important;
  }

  .cta-globe-content {
    position: relative;
    z-index: 2 !important;
    /* Ensures the text sits safely on top of the dark shade */
  }

  /* Polishing the text readability further */
  .cta-desc-main {
    color: #ffffff !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 1) !important;
    font-weight: 600 !important;
  }

  .cta-desc-sub {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  }
}

#cta-globe-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Glow Orbs */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbPulse 4s ease-in-out infinite alternate;
  z-index: 0;
}

.glow-orb.top-left {
  top: 20%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.03);
}

.glow-orb.bottom-right {
  bottom: 20%;
  right: 20%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.02);
}

@keyframes orbPulse {
  0% {
    opacity: 0.5;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Content wrapper */
.cta-globe-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

/* Pill Badge */
.cta-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 50px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* FIX: Removes the badge from mobile view only */
@media (max-width: 768px) {
  .cta-badge {
    display: none !important;
  }
}

.cta-badge span {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ping-dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}

.ping-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ping-dot.delayed::after {
  animation-delay: 0.5s;
}

@keyframes ping {

  75%,
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Typography */
.massive-connect-title {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin: 0;
  user-select: none;
}

.massive-connect-title .light-text {
  display: block;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  font-size: clamp(2.5rem, 5vw, 5rem);
}

.gradient-text-wrap {
  position: relative;
  display: inline-block;
}

.gradient-text {
  background: linear-gradient(to bottom right, #fff, #fff, rgba(255, 255, 255, 0.6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.gradient-blur {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #fff, #fff, rgba(255, 255, 255, 0.6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  filter: blur(20px);
  opacity: 0.5;
  transform: scale(1.05);
  z-index: 1;
}

.gradient-underline {
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 12px;
  width: 0%;
  /* Animated via GSAP */
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5);
  z-index: 0;
}

/* Paragraphs */
.cta-desc-wrap {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-desc-main {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  font-weight: 500;
}

/* FIX: Significantly improves readability on mobile by boosting contrast and adding a subtle shadow */
@media (max-width: 768px) {
  .cta-desc-main {
    color: #ffffff !important;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 1) !important;
    /* Boosted shadow to make text pop */
    font-weight: 600 !important;
  }

  .cta-desc-sub {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  }
}

.cta-desc-main span {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  padding: 4px 8px;
  border-radius: 6px;
}

.cta-desc-sub {
  font-family: var(--font-body, sans-serif);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

/* Buttons */
.cta-btn-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

.btn-start,
.btn-demo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-start {
  background: linear-gradient(to right, #fff, #f0f0f0, #e0e0e0);
  color: #000;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-start .btn-bg-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.btn-start:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2), 0 0 25px rgba(255, 255, 255, 0.3);
}

.btn-start:hover .btn-bg-hover {
  transform: translateX(100%);
}

.btn-start i {
  transition: transform 0.3s ease;
}

.btn-start:hover i {
  transform: translateX(5px);
}

.btn-demo {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-demo .btn-bg-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.05));
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-demo:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.1);
}

.btn-demo:hover .btn-bg-hover {
  opacity: 1;
}

.btn-demo:hover i {
  transform: scale(1.1) rotate(6deg);
}

.btn-demo i {
  transition: all 0.3s ease;
}

/* ==================================================== */
/* ===== PRICING PAGE HERO                        ===== */
/* ==================================================== */

.pricing-hero-sec {
  position: relative;
  width: 100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 180px 24px 100px;
  background-color: var(--bg-dark, #0a0a0a);
  overflow: hidden;
}

/* Simulates the deep 3D ambient glow from the reference */
.pricing-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 800px;
  height: 80vw;
  max-height: 800px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  animation: pulseHeroGlow 6s ease-in-out infinite alternate;
}

@keyframes pulseHeroGlow {
  0% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
}

.pricing-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  width: 100%;
}

.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
  backdrop-filter: blur(10px);
}

.ph-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.ph-desc {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  line-height: 1.6;
}

/* ==================================================== */
/* ===== PRICING TOGGLE FIX                       ===== */
/* ==================================================== */

.pricing-toggle-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pricing-toggle-switch {
  position: relative;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  padding: 4px;
  cursor: pointer;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: fit-content;
}

.pricing-toggle-switch .slider-bg {
  position: absolute;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 50px;
  left: 4px;
  top: 4px;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 0;
}

#pricingToggle:checked+.pricing-toggle-switch .slider-bg {
  transform: translateX(100%);
}

.toggle-label {
  position: relative;
  z-index: 1;
  padding: 10px 32px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  transition: color 0.3s ease;
  text-align: center;
  flex: 1;
}

.toggle-label.active {
  color: #000;
}

/* ==================================================== */
/* ===== FEATURE COMPARISON TABLE                 ===== */
/* ==================================================== */

.compare-section {
  position: relative;
  padding: 150px 0 100px;
  /* Fixed: 150px top padding clears the absolute borderline */
  background-color: var(--bg-dark, #0a0a0a);
  width: 100%;
}

.compare-section .section-frame .sf-line.top {
  display: none;
}

/* Divider handles the segmented top track */

.compare-container {
  max-width: 100%;
  margin: 0;
  padding: 0 var(--layout-pad);
  /* Fixed: Aligns text perfectly inside the vertical grid lines */
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.compare-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #fff;
  margin-bottom: 60px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.compare-table {
  width: 100%;
  min-width: 800px;
  /* Forces table to maintain shape on mobile */
  border-collapse: collapse;
  text-align: center;
}

.compare-table th {
  padding: 24px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compare-table th.feature-col-header {
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}

.compare-table td {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.compare-table td.feature-name {
  text-align: left;
  font-weight: 500;
  color: #fff;
  font-size: 1.125rem;
}

.compare-table .check {
  color: #22c55e;
  font-size: 1.25rem;
}

.compare-table .minus {
  color: rgba(255, 255, 255, 0.15);
  font-size: 1rem;
}

/* Subtle hover effect for rows */
.compare-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* ==================================================== */
/* ===== REACT TRANSLATED CTA & LIQUID BUTTON     ===== */
/* ==================================================== */

.cta-react-translated-sec {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 150px 0 120px;
  background-color: #000;
  /* Black background allows the shader colors to pop */
  min-height: 70vh;
}

/* Hide the 80px black architectural masks so the background fills the entire section */
.cta-react-translated-sec .section-frame .sf-line.top,
.cta-react-translated-sec .section-frame .sf-line.bottom,
.cta-react-translated-sec .section-frame::before,
.cta-react-translated-sec .section-frame::after {
  display: none !important;
}

.cta-react-translated-sec .section-frame .sf-line.left,
.cta-react-translated-sec .section-frame .sf-line.right {
  bottom: 80px;
  /* Terminate lines at the grid floor */
}

#cta-liquid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.react-glass-card {
  position: relative;
  z-index: 10;
  width: calc(100% - (var(--layout-pad) * 2));
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 80px 24px;
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.5);
  /* Deep dark glass */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.react-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
}

.react-desc {
  font-family: var(--font-body, sans-serif);
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(1rem, 2vw, 1.125rem);
  max-width: 600px;
  line-height: 1.6;
}

.react-ping-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px 0;
}

.react-ping-badge p {
  color: #22c55e;
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
}

.ping-wrapper {
  position: relative;
  display: flex;
  height: 12px;
  width: 12px;
  align-items: center;
  justify-content: center;
}

.ping-anim {
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #22c55e;
  opacity: 0.75;
  animation: reactPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ping-core {
  position: relative;
  display: inline-flex;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #22c55e;
}

@keyframes reactPing {

  75%,
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.react-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.liquid-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  padding: 0 3rem;
  border-radius: 9999px;
  font-size: 1.125rem;
  font-family: var(--font-body, sans-serif);
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  z-index: 1;
  text-decoration: none;
}

.liquid-button:hover {
  transform: scale(1.05);
}

.liquid-button-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 9999px;
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.09),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.liquid-button-glass {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 9999px;
  backdrop-filter: url("#container-glass");
  -webkit-backdrop-filter: url("#container-glass");
}

.liquid-button span {
  position: relative;
  z-index: 10;
}

/* ==================================================== */
/* ===== RESTORED: GLOBAL CONTACT SECTION         ===== */
/* ==================================================== */

.contact-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 120px var(--layout-pad);
  background-color: var(--bg-dark, #0a0a0a);
  color: #fff;
  z-index: 20;
  overflow-x: clip;
}

/* Hide the 80px black architectural masks so the WebGL shader canvas fills the entire section */
.contact-section .section-frame::before,
.contact-section .section-frame::after {
  display: none !important;
}

.contact-divider-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Boosted so the badge breaks through the background mask */
}

.contact-divider-wrap .horizontal-divider {
  top: 80px;
}

.horizontal-divider.divider-flex {
  display: flex !important;
  align-items: center;
  gap: 0;
  left: -50vw;
  right: -50vw;
  height: 1px;
}

.horizontal-divider.divider-flex .line-seg {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* Spacer from viewport edge to grid edge */
.horizontal-divider.divider-flex::before {
  content: '';
  width: calc(50vw + var(--grid-edge));
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* First segment: 40px offset from grid edge to match headers */
.horizontal-divider.divider-flex .line-seg:first-child {
  width: 40px;
  flex-shrink: 0;
}

/* Second segment: fills the rest of the grid width + viewport overflow */
.horizontal-divider.divider-flex .line-seg:nth-child(3) {
  flex-grow: 1;
}

/* Dark lines variant for light backgrounds (Bento, Partners, etc.) */
.horizontal-divider.dark-lines.divider-flex .line-seg,
.horizontal-divider.dark-lines.divider-flex::before {
  background-color: rgba(0, 0, 0, 0.3) !important;
  /* Stronger visibility */
  display: block;
}

.horizontal-divider.dark-lines.divider-flex .diamond {
  background-color: rgba(0, 0, 0, 0.45);
}

.contact-divider-wrap .horizontal-divider .diamond.left {
  left: calc(50vw + var(--grid-edge) - 3px);
}

.contact-divider-wrap .horizontal-divider .diamond.right {
  right: calc(50vw + var(--grid-edge) - 3px);
}

.contact-divider-wrap .horizontal-divider .badge {
  position: static;
  transform: none;
  margin: 0;
}

/* Hide top frame lines to avoid double borders with the divider */
.contact-section .section-frame .sf-line.top,
.contact-section .section-frame .sf-dia.tl,
.contact-section .section-frame .sf-dia.tr {
  display: none !important;
}

.contact-section .section-frame .sf-line.left,
.contact-section .section-frame .sf-line.right {
  top: 80px !important;
  bottom: 80px !important;
}

/* Ensure masks match the dark section background, even on light-theme pages */
.contact-section.dark-theme .section-frame::before,
.contact-section.dark-theme .section-frame::after,
.process-section.section-framed .section-frame::before,
.process-section.section-framed .section-frame::after {
  background-color: var(--bg-dark, #0d0d0d) !important;
  opacity: 1 !important;
}

.contact-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.3) 100%);
  z-index: 2;
  pointer-events: none;
}

.contact-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  width: 100%;
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2.5rem, 4.5vw, 65px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.contact-connect {
  margin-top: 10px;
}

.connect-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.connect-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.connect-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: #fff;
  font-weight: 500;
}

.connect-list li i {
  font-size: 0.75rem;
  color: #fff;
}

.contact-form-wrap {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px;
  border-radius: 8px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

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

.input-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #ccc;
}

.input-group input,
.input-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 0;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  transition: border-color 0.3s;
}

.input-group input:focus,
.input-group textarea:focus {
  outline: none;
  border-bottom-color: #fff;
}

.submit-btn {
  margin-top: 20px;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================== */
/* ===== REFINED: BLOG PAGE (PHASE 16) =====            */
/* ==================================================== */

.blog-page,
.about-page {
  background-color: #ffffff !important;
}

.blog-hero-sec {
  position: relative;
  padding: 120px var(--layout-pad) 40px;
  background: #ffffff;
  border-top: none !important;
  border-bottom: none !important;
  overflow: hidden;
  z-index: 10;
}

.blog-hero-sec .section-frame::before,
.blog-hero-sec .section-frame::after,
.blog-hero-sec .sf-line.top,
.blog-hero-sec .sf-line.bottom {
  display: none !important;
}

.blog-hero-blur {
  position: absolute;
  inset: 0;
  /* Pastel aurora blur matching the reference */
  background: radial-gradient(circle at 20% 50%, rgba(255, 182, 255, 0.15), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 255, 255, 0.1), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255, 235, 150, 0.15), transparent 50%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}

.blog-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width, 1400px);
  margin: 0 auto;
}

.blog-hero-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(5rem, 16vw, 220px);
  font-weight: 700;
  line-height: 0.85;
  color: #222;
  margin: 0;
  letter-spacing: -0.03em;
}

.blog-hero-title.left {
  text-align: left;
}

.blog-hero-title.right {
  text-align: right;
  margin-top: -10px;
}

/* Blog Grid Architecture */
.blog-page-wrap {
  background: #ffffff;
  padding-bottom: 100px;
}

.blog-main-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 380px;
  /* Locks the height so image expansion works perfectly */
  margin: 0 var(--grid-edge);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.b-card {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 40px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #111;
  background: #fff;
  overflow: hidden;
  position: relative;
}

/* Border correction for desktop (3 columns) */
@media (min-width: 1025px) {

  .b-card:nth-child(2),
  .b-card:nth-child(3),
  .b-card:nth-child(6) {
    border-right: none;
  }
}

/* Border correction for tablet (2 columns) */
@media (max-width: 1024px) and (min-width: 769px) {
  .blog-main-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 350px;
  }

  .b-card:nth-child(even) {
    border-right: none;
  }

  .b-card.featured {
    grid-column: 1 / 3;
  }
}

/* Border correction for mobile (1 column) */
@media (max-width: 768px) {
  .blog-main-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    min-height: auto;
  }

  .b-card {
    border-right: none !important;
    padding: 24px 20px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .b-card.featured {
    grid-column: 1 / 2;
    grid-row: auto;
    height: auto !important;
  }

  /* Make all images visible on mobile */
  .b-card .b-img-wrap {
    height: 200px !important;
    opacity: 1 !important;
    margin-bottom: 20px !important;
    display: block !important;
  }

  .b-card.featured .b-img-wrap {
    height: 240px !important;
    margin-bottom: 20px !important;
  }

  /* Change meta layout to stack title and date vertically */
  .b-card .b-meta {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .b-card .b-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  .b-card .b-date {
    margin-top: 0 !important;
    font-size: 0.85rem !important;
    color: #666 !important;
    width: 100% !important;
  }
}

.b-card.featured {
  grid-column: 1 / 3;
  grid-row: span 2;
  /* Forces it to perfectly align with two standard cards */
}

/* Image Expansion Logic */
.b-img-wrap {
  width: 100%;
  height: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 4px;
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, margin-bottom 0.4s ease;
  position: relative;
}

.b-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-card:hover .b-img-wrap {
  height: 220px;
  opacity: 1;
  margin-bottom: 24px;
}

/* Featured Card Image Logic (Always Visible) */
.b-card.featured .b-img-wrap {
  height: auto;
  flex-grow: 1;
  opacity: 1;
  margin-bottom: 30px;
}

.b-card.featured:hover .b-img-wrap {
  height: auto;
  /* Overrides the hover to keep it stable */
}

.featured-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #fff;
  color: #000;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

/* Typography & Meta Data */
.b-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.b-title {
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.1rem, 1.5vw, 22px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
  color: #111;
  transition: color 0.3s;
}

.b-card.featured .b-title {
  font-size: clamp(1.4rem, 2vw, 28px);
}

.b-card:hover .b-title {
  color: #666;
}

.b-date {
  font-size: 0.8rem;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
  margin-top: 4px;
}

/* ==================================================== */
/* ===== LIGHT THEME FULL-SCREEN MENU OVERRIDES   ===== */
/* ==================================================== */

.light-theme .menu-overlay {
  background-color: #e5e5e5;
  color: var(--text-dark);
}

/* Invert the structural grid borders */
.light-theme .menu-col-left {
  border-right: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.light-theme .menu-info-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.light-theme .menu-social-row {
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.light-theme .menu-social-row a {
  border-right: 1px solid rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 1024px) {
  .light-theme .menu-col-left {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-right: none !important;
  }
}

/* Text coloring - Perfect Slate Gray for high visibility */
.light-theme .menu-nav-item a {
  color: #999999;
}

.light-theme .menu-nav-item a i {
  color: #999999;
}

.light-theme .menu-nav-item a:hover {
  color: #111111;
  /* Turns solid black on hover */
  background-color: transparent;
  /* Removes background highlight from previous turns */
}

.light-theme .menu-nav-item a:hover i {
  color: #111111;
}

/* Invert the right column text */
.light-theme .menu-time,
.light-theme .menu-email,
.light-theme .menu-vision-text,
.light-theme .menu-globe-widget i {
  color: #111111;
}

/* Invert paragraphs and smaller text */
.light-theme .location-block p,
.light-theme .contact-block p {
  color: #555555;
}

/* Invert social links */
.light-theme .menu-social-row a {
  color: #666666;
}

.light-theme .menu-social-row a:hover {
  color: #111111;
}

/* ==================================================== */
/* ===== MOBILE RESPONSIVE OVERRIDES (MAX 768px)  ===== */
/* ==================================================== */

@media (max-width: 768px) {

  /* --- Global Resets --- */
  :root {
    --layout-pad: 20px;
    --grid-edge: 0px;
  }

  .section,
  .about-section,
  .why-partner-sec,
  .approach-sec,
  .cta-globe-sec,
  .pricing-section,
  .excellence-section,
  .blog-section,
  .contact-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .horizontal-divider .badge {
    margin-left: 40px !important;
  }

  /* --- Navbar (Mobile) --- */
  .navbar {
    padding: 0 20px 0 8px !important;
  }

  /* Move Menu to the Right */
  .nav-left {
    order: 2;
  }

  /* Move Logo to the Left and push Menu to the edge */
  .nav-center {
    order: 1;
    margin-right: auto;
  }

  /* Completely hide the Arrow / CTA section */
  .nav-right {
    display: none !important;
  }

  /* Decrease Logo Size */
  .navbar .logo {
    font-size: 1.25rem !important;
  }

  .navbar .logo svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* --- 1. Hero Section (Mobile) --- */
  .hero {
    height: 100svh !important;
    /* Uses dynamic mobile viewport height */
    min-height: 600px !important;
    width: 100%;
    overflow: hidden;
  }

  .hero-container {
    justify-content: flex-start !important;
    padding-top: 110px !important;
  }

  /* Centered, wrapped title layout */
  .hero-text-wrapper {
    margin-top: 0 !important;
    z-index: 20;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Shrink rows to hug the text so "NEVER" and "MISS" sit side-by-side */
  .hero-title-row {
    width: auto !important;
    padding: 0 8px !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* Force 'A LEAD' onto the next line and center it */
  .hero-text-wrapper>.hero-title-row:nth-child(3) {
    width: 100% !important;
    margin-top: -5px !important;
  }

  .hero-title {
    font-size: clamp(3rem, 14vw, 5rem) !important;
    line-height: 0.9;
  }

  .hero-lock-icon {
    font-size: clamp(2.5rem, 12vw, 4.5rem) !important;
    margin: 0 0 0 10px !important;
    transform: translateY(-4px);
  }

  .since-text {
    display: none !important;
  }

  /* Robot 3D Canvas Background */
  .hero-robot-3d {
    width: 150vw !important;
    right: -40vw !important;
    left: auto !important;
    bottom: auto !important;
    /* Reset bottom */
    top: 30vh !important;
    /* Forces it down from the top of the screen */
    opacity: 0.4 !important;
    transform: none !important;
    pointer-events: none;
    z-index: 1 !important;
  }

  /* Lower Content Centered & Pushed Up */
  .hero-content-left {
    position: absolute;
    bottom: 40px !important;
    /* Safely above the screen edge */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    padding: 0 20px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .client-stats {
    margin-bottom: 16px !important;
    transform: scale(0.9);
    transform-origin: center center !important;
    /* Centered origin */
    justify-content: center !important;
  }

  .review-stars span {
    color: #ffffff !important;
    opacity: 0.9 !important;
  }

  .hero-desc {
    font-size: 0.95rem !important;
    margin-bottom: 24px !important;
    max-width: 320px !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-align: center !important;
  }

  .hero-desc strong {
    color: #ffffff !important;
  }

  .btn-group {
    position: relative;
    z-index: 100;
    opacity: 1 !important;
    justify-content: center !important;
  }

  .btn-group .btn-main {
    padding: 14px 24px !important;
    font-size: 0.9rem !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    opacity: 1 !important;
  }

  .btn-group .btn-icon {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Hide Socials to save space and reduce clutter on mobile */
  .hero-social-float {
    display: none !important;
  }

  .hero-bottom-bar {
    display: none !important;
  }

  /* ============================================================= */
  /* ===== PHASE 3: FLOATING CARDS — disable GSAP pinning    ===== */
  /* --- 2. About Section (Mobile) --- */
  .about-section {
    padding: 60px 20px !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .about-grid {
    display: flex !important;
    /* Kills the stubborn grid overflow */
    flex-direction: column;
    gap: 40px;
    width: 100%;
    margin: 0;
  }

  .about-content-left {
    width: 100%;
    text-align: left;
  }

  .about-content-left .section-title {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
    line-height: 1.2;
    margin-bottom: 20px;
    white-space: normal;
  }

  .about-desc {
    font-size: 1.05rem;
    max-width: 100%;
  }

  .about-card-wrapper {
    max-width: 100%;
    width: 100%;
    display: block;
  }

  .profile-card {
    margin-top: 0;
    width: 100%;
  }

  .profile-img-wrapper {
    aspect-ratio: 4/5;
    width: 100%;
  }

  .profile-info {
    padding: 40px 20px 20px;
  }

  .profile-btn {
    padding: 0 0 0 20px;
    font-size: 1.05rem;
    background: #ffffff !important;
    color: #000000 !important;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }

  .profile-btn-icon {
    padding: 16px 20px;
    background: #000000 !important;
    color: #ffffff !important;
    border-left: none !important;
  }

  .about-content-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .small-heading {
    margin-bottom: 10px;
  }

  .advantage-list {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .advantage-list li {
    font-size: 1.05rem;
    padding: 20px 0;
    width: 100%;
    justify-content: flex-start;
  }

  .about-copyright {
    margin-top: 10px;
  }

  /* ============================================================= */

  #phase3-pin-wrapper {
    height: auto;
  }

  .scroll-cards-section {
    padding: 60px 20px;
    min-height: auto;
    justify-content: flex-start;
  }

  /* Turn the absolute-positioned card stack into a visible 2×2 grid */
  .cards-wrapper {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
  }

  .anim-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 180px;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .card-center-placeholder {
    display: none !important;
  }

  /* Quote section: remove absolute top:100% positioning */
  .quote-wrapper {
    position: relative;
    top: auto;
    margin: 40px 0 0;
    max-width: 100%;
    text-align: center;
  }

  .quote-text {
    font-size: 1.1rem;
  }

  /* ============================================================= */
  /* ===== SERVICES ACCORDION — vertical stacked layout      ===== */
  /* ============================================================= */

  .services-accordion-section {
    padding: 130px 20px 60px !important;
    /* Pushed down to clear the badge */
    gap: 40px;
  }

  .services-accordion-section .horizontal-divider {
    top: 60px;
    /* Positions the line and badge perfectly above the title */
  }

  .accordion-wrapper {
    flex-direction: column;
    height: auto;
    gap: 24px;
    /* Added gap to create distinct floating cards */
  }

  /* All items fully expanded on mobile — premium dark card style */
  .accordion-item {
    flex: none !important;
    min-height: auto;
    padding: 40px 30px 35px;
    /* Better internal breathing room */
    border-radius: 16px !important;
    /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    /* Crisp border */
  }

  /* Darker overlay to make text highly readable over busy images */
  .accordion-item::after {
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
  }

  .accordion-item .bg-image {
    opacity: 1 !important;
  }

  /* Show tab-content on every item */
  .accordion-item .tab-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: none !important;
    margin-top: 14px;
  }

  /* Tab header: stack number above title */
  .accordion-item .tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Force title colour + orientation */
  .accordion-item .tab-header h3 {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    color: #fff !important;
    font-size: 1.3rem !important;
    /* Slightly larger for better hierarchy */
  }

  /* Hide the +/× toggle icon on mobile */
  .accordion-item .tab-icon {
    display: none !important;
  }

  /* Number label */
  .acc-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.06em;
  }

  /* Description */
  .accordion-item .tab-content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;
  }

  /* INCLUDES section */
  .acc-includes {
    margin-top: 18px;
  }

  .includes-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .includes-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .acc-tag {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
  }

  /* Hide explore button on mobile — replaced by tags */
  .accordion-item .explore-btn {
    display: none !important;
  }

  .accordion-static-cta {
    flex: none;
    min-height: 180px;
    border-radius: 0;
  }

  /* ============================================================= */
  /* ===== METRICS BLOCK — single column (MOBILE)            ===== */
  /* ============================================================= */

  .metrics-block {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 30px;
  }

  .metrics-content-left .hero-desc {
    font-size: 1.8rem;
    color: var(--text-dark) !important;
    line-height: 1.25;
    max-width: 100%;
    margin-bottom: 24px;
    font-family: var(--font-heading);
    /* Matches the bold sans-serif in your screenshot */
    font-weight: 500;
  }

  .metrics-content-left .hero-desc strong {
    font-family: var(--font-body);
    font-weight: 400;
    color: #888 !important;
    /* Greys out the second half of the sentence */
    font-size: 1.8rem;
    letter-spacing: normal;
  }

  .metrics-cta {
    display: flex;
    width: max-content;
  }

  .metrics-cta .btn-main {
    padding: 14px 24px;
    font-size: 1.1rem;
  }

  .metrics-cta .btn-icon {
    padding: 0 16px;
    border-left: none;
    /* Removes the double border */
  }

  .metrics-cta .btn-icon i {
    font-size: 1.1rem;
  }

  .metrics-stats-right {
    flex-direction: column;
    gap: 30px;
  }

  .metrics-stats-right .metric-card {
    text-align: left;
  }

  .metrics-stats-right .metric-card h2 {
    font-size: 3.5rem;
    color: #888;
    /* Greys out the X, %, + */
    margin-bottom: 0px;
  }

  .metrics-stats-right .metric-card h2 .counter {
    color: var(--text-dark);
    /* Keeps the dynamic numbers solid black */
    font-size: 4.5rem;
  }

  .metrics-stats-right .metric-card p {
    font-size: 1.2rem;
    color: #888;
    max-width: 100%;
    margin-top: 8px;
  }

  /* ============================================================= */
  /* ===== IMPACT SECTION — MOBILE REFINEMENT                ===== */
  /* ============================================================= */

  .impact-section {
    padding: 80px 0 40px !important;
  }

  .impact-container {
    gap: 40px;
  }

  .impact-heading {
    font-size: clamp(3.5rem, 13vw, 4.5rem) !important;
    line-height: 1.1;
    margin-bottom: 5px;
    color: #ddd;
    /* Slightly dimmed to match screenshot */
  }

  /* Stack the 120+ and the text block vertically */
  .impact-middle-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .impact-number {
    font-size: clamp(4.5rem, 20vw, 6rem);
    line-height: 1;
    margin-bottom: 10px;
    color: #fff;
    /* Bright white for emphasis */
  }

  /* Stack the paragraph above the "CLIENT" text */
  .impact-sub-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-left: 0 !important;
    /* Removes the desktop indent */
    width: 100%;
  }

  .impact-subtext {
    font-size: 1.05rem;
    max-width: 100%;
    margin-bottom: 10px;
    color: #fff;
  }

  /* Apply the faded gradient specifically to CLIENT and WORLDWIDE */
  .impact-heading.client-text,
  .impact-typography>.impact-heading:last-child {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.15) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: rgba(255, 255, 255, 0.5);
    /* Fallback */
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* Force 2-column logo grid with dark background */
  .client-logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    background: rgba(0, 0, 0, 0.4);
    /* Matches the dark translucent box look */
  }

  .client-logo-item {
    padding: 30px 15px !important;
    font-size: 1.1rem !important;
  }

  /* ============================================================= */
  /* ===== BENTO SECTION — MOBILE HORIZONTAL CAROUSEL        ===== */
  /* ============================================================= */

  .bento-section {
    padding: 50px 0 !important;
    overflow: hidden;
  }

  .bento-header {
    margin: 20px 20px 24px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bento-header h2 {
    font-size: 1.8rem !important;
    line-height: 1.05 !important;
  }

  .bento-header::after {
    display: none;
  }

  /* Vertical stack — full-width cards, content-driven height */
  .bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 20px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .bento-card,
  .bento-split-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 28px !important;
    border-radius: 16px !important;
  }

  /* The split column holds two smaller cards side-by-side */
  .bento-split-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .bento-mini {
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    border-radius: 16px !important;
    padding: 24px !important;
  }

  /* Image formatting fixes for the mobile bounds */
  .bento-robot-img {
    width: 80% !important;
    bottom: -10px !important;
    right: -10px !important;
  }

  .bento-badge-br {
    position: absolute !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    margin-top: 0;
    font-size: 2rem !important;
  }

  .bento-col-right-bot {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .bento-col-mid-top {
    min-height: 0 !important;
  }

  .bento-col-mid-top .mid-top-inner {
    width: 100% !important;
    text-align: left !important;
  }

  .bento-col-mid-top h3,
  .bento-col-mid-top p {
    width: 100% !important;
    text-align: left !important;
  }

  /* ============================================================= */
  /* ===== HISTORY SECTION — MOBILE TIMELINE & PROFILE       ===== */
  /* ============================================================= */

  .history-section {
    flex-direction: column !important;
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
  }

  .history-section .history-divider-wrap,
  .history-section .bento-divider-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .history-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 96px 0 0 0 !important;
    overflow: hidden !important;
    background-color: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
    gap: 24px !important;
  }

  .history-section .history-left-content {
    background-color: #f4f4f0 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
  }

  .history-section .timeline-container {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #fff !important;
  }

  .history-left,
  .history-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* CRITICAL: Stops track from stretching the parent */
    border-right: none !important;
    box-sizing: border-box !important;
  }

  .history-section .history-left-content {
    padding: 28px 20px 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .history-top-divider {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative;
  }

  .history-top-divider::before {
    left: 0 !important;
    right: 0 !important;
  }

  .history-top-divider .badge {
    margin-left: 20px !important;
    background-color: #f4f4f0 !important;
  }

  .history-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    word-wrap: break-word !important;
    color: #111 !important;
  }

  .history-desc {
    margin-bottom: 30px !important;
    color: #555 !important;
    font-size: 1rem !important;
  }

  .timeline-container,
  .timeline-window {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .timeline-window {
    overflow: hidden !important;
  }

  .timeline-track {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* Force 2 cards side-by-side on mobile */
  .timeline-track .tl-card {
    flex: 0 0 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    padding: 30px 20px !important;
    min-height: 250px !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .tl-card h3 {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important;
  }

  .tl-card p {
    font-size: 0.85rem !important;
  }

  .tl-controls {
    flex-direction: row !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
  }

  .tl-btn {
    padding: 16px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #fff !important;
    color: #111 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .tl-btn.prev {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  /* Clean up the right side (Founder Profile) */
  .history-right {
    min-height: auto !important;
    padding: 40px 20px 60px !important;
    background-color: transparent !important;
  }

  /* Hide the desktop blurry background on mobile */
  .history-right-bg,
  .history-overlay {
    display: none !important;
  }

  .founder-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .founder-photo-box {
    background: #111 !important;
    padding: 0 !important;
    border: none !important;
    backdrop-filter: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .founder-photo {
    height: auto !important;
    aspect-ratio: 4/5;
    width: 100% !important;
    position: relative;
    box-sizing: border-box !important;
  }

  .founder-info {
    border-top: none !important;
    padding: 24px 20px !important;
    text-align: center;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .founder-info h3 {
    font-size: 1.4rem !important;
    color: #fff !important;
    margin-bottom: 6px !important;
    word-wrap: break-word !important;
  }

  .founder-info p {
    color: #aaa !important;
    font-size: 0.85rem !important;
  }

  /* ============================================================= */
  /* ===== SERVICES.HTML SPLIT SCREEN — fix stacked items    ===== */
  /* ===  GSAP doesn't run on mobile so all text items sit   ===== */
  /* ===  at grid-area:1/1, overlapping each other.          ===== */
  /* ============================================================= */

  #split-pin-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible;
    padding-top: 80px;
    padding-bottom: 40px;
    /* RESTORED: Healthier gap between the sections */
  }

  .split-scroll-container {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 0;
    padding: 0 20px;
  }

  /* Hide image cards on mobile (text-only vertical list) */
  .split-right {
    display: none !important;
  }

  .split-left {
    display: block !important;
    height: auto;
  }

  /* Un-stack all text items from grid-area:1/1 */
  .split-text-item {
    grid-area: auto !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 40px 0;
    border-bottom: 1px solid var(--border-color);
  }

  .split-text-item:last-child {
    border-bottom: none;
  }

  .split-text-item h2 {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }

  /* ============================================================= */
  /* ===== EXCELLENCE SECTION — MOBILE REFINEMENT            ===== */
  /* ============================================================= */

  .excellence-section {
    padding: 80px 20px 40px !important;
    min-height: 100vh !important;
  }

  .exc-content-wrap {
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    height: 100%;
    gap: 40px !important;
  }

  /* Top Left Alignment */
  .exc-left {
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  .exc-massive-num {
    font-size: clamp(5rem, 18vw, 8rem) !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
  }

  .exc-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }

  /* Middle Right Alignment */
  .exc-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    max-width: 100% !important;
  }

  .exc-quote-block {
    text-align: right !important;
    align-self: flex-end !important;
    max-width: 90% !important;
    margin-bottom: 0 !important;
  }

  .exc-quote-block .logo-small {
    justify-content: flex-end !important;
  }

  .exc-quote {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
    line-height: 1.4 !important;
  }

  /* Bottom Glass Box */
  .exc-stats-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    /* Using borders instead of gap for the center line */
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    /* Restoring the translucent look */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
  }

  .exc-stat {
    padding: 30px 20px !important;
  }

  .exc-stat:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    /* Center divider */
  }

  .exc-stat h4 {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
    margin-bottom: 8px !important;
  }

  .exc-stat p {
    font-size: 0.9rem !important;
    opacity: 0.8 !important;
  }

  /* ============================================================= */
  /* ===== BLOG SECTION — MOBILE REFINEMENT                  ===== */
  /* ============================================================= */

  .blog-section {
    padding: 140px 20px 60px !important;
  }

  /* Stack title and button vertically */
  .blog-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
    margin-bottom: 60px !important;
  }

  .blog-header .section-title {
    font-size: clamp(2.5rem, 11vw, 3.8rem) !important;
    line-height: 1 !important;
  }

  /* Black "View all blogs" button with white arrow tile (matches reference) */
  .blog-header .blog-btn-modern {
    display: inline-flex !important;
    align-items: stretch !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000 !important;
    border-radius: 2px !important;
    padding: 0 !important;
    text-decoration: none !important;
    width: fit-content !important;
    overflow: hidden;
  }

  .blog-header .blog-btn-modern .btn-text {
    padding: 16px 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
  }

  .blog-header .blog-btn-modern .btn-icon-box {
    background: #ffffff !important;
    color: #000000 !important;
    width: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    border-left: 1px solid #000 !important;
  }

  /* List-style blog items: Updated to match main blog page structure */
  .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    border-top: none !important;
  }

  .blog-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 32px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  }

  .blog-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  /* Force Images to appear */
  .blog-card .blog-img-wrap {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    opacity: 1 !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px !important;
  }

  .blog-card .blog-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Stack Title and Date */
  .blog-meta {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .blog-title {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
  }

  .blog-date {
    font-size: 0.85rem !important;
    color: #888 !important;
    font-weight: 500 !important;
    margin-top: 0 !important;
    text-align: left !important;
  }
}

/* ==================================================== */
/* ===== UNIFIED PRICING SUMMARY (PERFORMANCE)    ===== */
/* ==================================================== */

.pricing-summary-sec {
  position: relative;
  padding: 140px 0;
  /* Changed to 140px top and bottom for perfect vertical centering */
  background-color: var(--bg-dark);
  color: #fff;
  z-index: 22;
}

/* Hide the 80px architectural masks so the background stretches cleanly edge-to-edge */
.pricing-summary-sec .section-frame::before,
.pricing-summary-sec .section-frame::after {
  display: none !important;
}

/* Hide top frame line because the "PRICING PLANS" badge handles the top line */
.pricing-summary-sec .section-frame .sf-line.top {
  display: none;
}

.pricing-horizontal-divider {
  position: absolute;
  top: 0;
  /* Reset to 0 so the inner line aligns perfectly with the 80px diamonds */
  left: var(--grid-edge);
  right: var(--grid-edge);
  height: 1px;
  z-index: 100;
}

.pricing-horizontal-divider .line {
  position: absolute;
  top: 0;
  left: -100vw;
  right: -100vw;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.pricing-horizontal-divider .diamond {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background-color: rgba(255, 255, 255, 0.35);
  transform: rotate(45deg);
}

.pricing-horizontal-divider .diamond.left {
  left: -3px;
}

.pricing-horizontal-divider .diamond.right {
  right: -3px;
}

.pricing-horizontal-divider .badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg-dark);
  color: #fff;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  line-height: 28px;
  white-space: nowrap;
}

.p-summary-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin: 0 var(--layout-pad);
  align-items: center;
}

.p-summary-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #fff;
}

.p-summary-desc {
  font-size: 1.1rem;
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 480px;
}

.p-summary-btn {
  display: inline-flex !important;
  padding-left: 24px !important;
}

.p-summary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

.p-summary-list li {
  padding: 30px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: background 0.3s, border-color 0.3s;
}

.p-summary-list li:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.tier-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.tier-desc {
  font-size: 0.95rem;
  color: #aaa;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .p-summary-container {
    grid-template-columns: 1fr;
  }

  .p-summary-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .p-summary-desc {
    text-align: center;
  }
}

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

  .p-summary-container {
    margin: 0 20px;
    gap: 40px;
  }

  .p-summary-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
    text-align: left;
  }

  .p-summary-left {
    text-align: left;
    align-items: flex-start;
  }

  .p-summary-desc {
    text-align: left;
  }

  .p-summary-list li {
    padding: 24px;
  }

  /* ==================================================== */
  /* --- MOBILE MENU REDESIGN (COMPACT 1-SCREEN FIT)  --- */
  /* ==================================================== */

  .menu-grid {
    padding-top: 80px !important;
    /* Changed from 60px to exactly clear the Navbar */
    align-content: flex-start;
    height: 100svh !important;
    overflow: hidden !important;
  }

  .menu-col-left {
    padding: 0 !important;
    border-bottom: none !important;
  }

  .menu-nav-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu-nav-item {
    width: 100% !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
  }

  .menu-nav-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .menu-nav-item:nth-child(1),
  .menu-nav-item:nth-child(2) {
    border-top: none !important;
  }

  .menu-nav-item a {
    font-family: var(--font-body, sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #ccc !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center;
    width: 100% !important;
  }

  .menu-nav-item a i {
    display: none !important;
  }

  /* --- Lower Menu Info Section --- */
  .menu-col-right {
    padding: 20px 20px 0 !important;
    /* Tighter top padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    /* Pushes the social row to the absolute bottom */
  }

  .menu-info-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    /* Tighter gap */
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  .menu-vision-text {
    font-size: 1.15rem !important;
    /* Smaller text */
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 1.3 !important;
  }

  .menu-globe-widget {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .menu-globe-widget i {
    font-size: 1.8rem !important;
    /* Smaller globe */
    color: #888 !important;
  }

  .menu-globe-widget .coords {
    font-size: 0.7rem !important;
    color: #888 !important;
  }

  .menu-info-bottom {
    gap: 15px !important;
    margin-top: 15px !important;
    /* Tighter margins */
  }

  .menu-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    /* Tighter grid */
  }

  .menu-contact-grid .location-block,
  .menu-contact-grid .contact-block {
    padding: 0 !important;
    border: none !important;
  }

  .menu-contact-grid .meta-label {
    border-left: 1px solid #555 !important;
    border-bottom: none !important;
    padding-left: 12px !important;
    padding-bottom: 0 !important;
    font-size: 0.65rem !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
  }

  .location-block p,
  .contact-block p {
    font-size: 0.85rem !important;
    /* Smaller text */
    color: #aaa !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    /* Tighter margins */
  }

  .menu-time {
    font-size: 2.2rem !important;
    /* Smaller clock */
    color: #fff !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
  }

  .menu-email {
    font-size: 0.95rem !important;
    /* Smaller email */
    font-weight: 600 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
  }

  /* --- Social Row Footer --- */
  .menu-social-row {
    grid-template-columns: repeat(4, 1fr) !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-top: auto !important;
    /* Auto pushes it to the bottom */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
  }

  .menu-social-row a {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px 0 !important;
    /* Tighter buttons */
    justify-content: center !important;
    font-size: 0 !important;
  }

  .menu-social-row a:last-child {
    border-right: none !important;
  }

  .menu-social-row a i {
    font-size: 1.1rem !important;
    color: #ccc !important;
  }
}

/* ==========================================================================
   Section Frame — top + bottom lines with diamonds at all 4 corners
   where they meet the global vertical grid lines.
   Usage: add class "section-framed" to a <section>, and inside it place:
     <div class="section-frame">
       <span class="sf-line top"></span>
       <span class="sf-line bottom"></span>
       <span class="sf-dia tl"></span><span class="sf-dia tr"></span>
       <span class="sf-dia bl"></span><span class="sf-dia br"></span>
     </div>
   ========================================================================== */
.section-framed {
  position: relative;
  overflow: visible;
}

.section-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

.section-frame .sf-line {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  /* Uniform baseline contrast */
  z-index: 500;
  /* Elevated above all potential background overlaps */
}

.section-frame .sf-line.top,
.section-frame .sf-line.bottom {
  left: -100vw;
  right: -100vw;
  height: 1px;
}

/* 
   Architectural Masks: 
   These create a "floor" and "ceiling" that hide content 
   passing through the 80px gutter, ensuring it looks like 
   it's going "under" the grid line.
*/
.section-frame::before,
.section-frame::after {
  content: '';
  position: absolute;
  left: -100vw;
  right: -100vw;
  background-color: var(--bg-dark);
  /* Default for dark-theme sections */
  z-index: 490;
  /* Sits just below the sf-line (500) but above content (10) */
  pointer-events: none;
}

.section-frame::before {
  top: 0;
  height: 80px;
}

.section-frame::after {
  bottom: 0;
  height: 80px;
}

/* Light theme variants for masks */
.section-framed.light-theme .section-frame::before,
.section-framed.light-theme .section-frame::after {
  background-color: #ffffff;
}



.section-frame .sf-line.top {
  top: 80px;
}

.section-frame .sf-line.bottom {
  bottom: 80px;
}

.section-frame .sf-line.left {
  display: block;
  top: 0;
  bottom: 0;
  width: 1px;
  left: var(--grid-edge);
}

.section-frame .sf-line.right {
  display: block;
  top: 0;
  bottom: 0;
  width: 1px;
  left: calc(100% - var(--grid-edge));
  /* Anchored from left for perfect sync */
}

.section-frame .sf-dia {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: #000;
  /* Solid opaque color to cover line intersections */
  transform: rotate(45deg);
  z-index: 1100;
  /* Must be higher than both masks (490) and dividers (1000) */
}

.section-frame .sf-dia.tl {
  top: 76.5px;
  left: calc(var(--grid-edge) - 3.5px);
}

.section-frame .sf-dia.tr {
  top: 76.5px;
  left: calc(100% - var(--grid-edge) - 3.5px);
}

/* Positioned from left */
.section-frame .sf-dia.bl {
  bottom: 76.5px;
  left: calc(var(--grid-edge) - 3.5px);
}

.section-frame .sf-dia.br {
  bottom: 76.5px;
  left: calc(100% - var(--grid-edge) - 3.5px);
}

/* Positioned from left */

/* Dark background variant */
.section-frame.light-lines .sf-line {
  background-color: rgba(255, 255, 255, 0.4);
}

.section-frame.light-lines .sf-dia {
  background-color: #fff;
  z-index: 1101;
}

/* Solid white on dark sections */

/* Removed section boundary collapse logic — dividers are now inset 80px within sections */

/* ==========================================================================
   Section top label — a pill/badge that sits centered on the top border line
   of a .section-framed section (left-aligned, like the reference).
   ========================================================================== */
.section-framed .section-top-label {
  position: absolute !important;
  top: -13px !important;
  left: calc(var(--grid-edge) + 40px) !important;
  z-index: 210;
  background-color: var(--bg-dark);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  padding: 0 16px !important;
  line-height: 26px !important;
  font-size: 0.65rem !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 !important;
}

/* Light-bg variant */
.section-framed .section-top-label.on-light {
  background-color: #ffffff;
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* History section: split light/dark layout — use blend mode so lines stay
   visible on both halves without needing two separate rulesets. */
/* History uses the same default dark lines as the bento section. */
.section-frame.history-frame .sf-line {
  background-color: rgba(0, 0, 0, 0.15);
}

.section-frame.history-frame .sf-dia {
  background-color: rgba(0, 0, 0, 0.35);
}

/* The badge floats independently now; frame draws all 4 sides cleanly. */
.history-top-divider.badge-only,
.blog-top-divider.badge-only,
.pricing-top-divider.badge-only {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: block !important;
  background: transparent !important;
  z-index: 210;
}

.history-top-divider.badge-only::before,
.blog-top-divider.badge-only::before,
.pricing-top-divider.badge-only::before {
  content: none !important;
  display: none !important;
}

.history-top-divider.badge-only .badge,
.blog-top-divider.badge-only .badge,
.pricing-top-divider.badge-only .badge {
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
}

/* History section badge sits on light bg */
.history-section .history-top-divider.badge-only .badge {
  background-color: #ffffff !important;
  color: #000 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.blog-section .blog-top-divider.badge-only .badge {
  background-color: #ffffff !important;
  color: #000 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.pricing-summary-sec .pricing-top-divider.badge-only .badge {
  background-color: var(--bg-dark) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ==================================================== */
/* ===== CONTACT ROTATING TEXT REFINEMENT         ===== */
/* ==================================================== */
.rotating-wrapper {
  position: relative;
  display: block;
  /* Since it's after a <br>, block is fine */
  height: 1.1em;
  /* Match the line-height of the h2 */
  overflow: hidden;
  margin-top: 10px;
}

.rot-text {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  width: 100%;
  display: block;
}

/* Mobile-only fixes for rotating text */
@media (max-width: 768px) {
  .rotating-wrapper {
    /* Keep overflow hidden so animated words don't overlap the text above */
    overflow: hidden;
    height: 1.25em;
    /* Slightly taller so the bottom of letters don't clip */
  }

  .rot-text {
    /* Scale down text dynamically so long phrases like 'SMART WORKFLOWS' fit horizontally */
    font-size: clamp(1.5rem, 8vw, 2.2rem) !important;
    /* Replace the massive glowing shadow with a tight drop-shadow to eliminate the sharp grey box */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95) !important;
  }
}

/* Mobile-only fixes for horizontal cutoff and shadow clipping */
@media (max-width: 768px) {
  .rotating-wrapper {
    /* Slightly taller wrapper gives the heavy mobile drop-shadow room to fade out naturally, preventing the sharp grey box */
    height: 1.4em;
  }

  .rot-text {
    /* Dynamically scales text down on smaller screens so long phrases like 'SMART WORKFLOWS' fit without getting cut off */
    font-size: clamp(1.5rem, 8.5vw, 2.4rem) !important;
  }
}

/* Mobile-only fixes for horizontal cutoff and shadow clipping */
@media (max-width: 768px) {
  .rotating-wrapper {
    /* Slightly taller wrapper gives the heavy mobile drop-shadow room to fade out naturally, preventing the sharp grey box */
    height: 1.4em;
  }

  .rot-text {
    /* Dynamically scales text down on smaller screens so long phrases like 'SMART WORKFLOWS' fit without getting cut off */
    font-size: clamp(1.5rem, 8.5vw, 2.4rem) !important;
  }
}

/* ==================================================== */
/* ===== NEW GLOWY WAVES HERO (PRICING)           ===== */
/* ==================================================== */
.pricing-hero-sec {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-dark);
  padding: 120px 24px 100px;
}

#hero-waves-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.ph-content-wrapper {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}

.ph-title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  font-weight: 700;
}

.ph-title span {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ph-desc {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgba(255, 255, 255, 0.7);
  max-width: 800px;
  margin-bottom: 40px;
  line-height: 1.5;
}

.ph-btn-group {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
}

.btn-outline {
  padding: 14px 28px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 100px;
  transition: var(--transition);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #fff;
}

.ph-highlights {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}

.ph-highlights li {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  backdrop-filter: blur(5px);
}

.ph-stats-card {
  width: 100%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.ph-stat-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ph-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.5);
}

.ph-stat-val {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-heading);
}

@media (max-width: 768px) {
  .pricing-hero-sec {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 100px 20px 40px !important;
    position: relative !important;
  }

  .pricing-hero-sec::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .ph-content-wrapper {
    position: relative !important;
    z-index: 2 !important;
  }

  .ph-badge {
    margin-bottom: 16px !important;
    padding: 6px 12px !important;
    font-size: 0.6rem !important;
  }

  .ph-title {
    font-size: clamp(2.5rem, 11vw, 3.5rem) !important;
    margin-bottom: 12px !important;
    line-height: 1.05 !important;
  }

  .ph-desc {
    font-size: 0.95rem !important;
    margin-bottom: 24px !important;
    line-height: 1.4 !important;
  }

  .ph-btn-group {
    flex-direction: column;
    align-items: center !important;
    /* This forces the button to the center */
    width: 100%;
    margin-bottom: 10px !important;
  }

  .ph-btn-group .btn-main {
    display: flex !important;
    width: 100% !important;
    padding: 0 0 0 24px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .ph-btn-group .btn-main span {
    margin-right: 0 !important;
  }

  .ph-btn-group .profile-btn-icon {
    padding: 16px 20px !important;
  }

  .ph-highlights {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    gap: 8px !important;
  }

  .ph-highlights li {
    padding: 6px 12px !important;
    font-size: 0.6rem !important;
  }

  .ph-stats-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/* === REFINED LAMP GLOW: Eliminates bounding box and applies grey shade === */
.lamp-glow-main {
  /* Using radial-gradient with alpha transparency to ensure boundless, soft edges */
  background: radial-gradient(circle,
      rgba(220, 220, 220, 0.3) 0%,
      /* Grey core with reduced opacity */
      rgba(220, 220, 220, 0.15) 60%,
      /* Softer grey middle */
      rgba(220, 220, 220, 0) 100%
      /* Perfectly transparent edge - ELIMINATES THE BOX */
    );
  filter: blur(25px);
  /* Added filter blur to soften any remaining lines */
  pointer-events: none;
  /* Ensure it doesn't block clicks */
}

.lamp-glow-oval {
  /* Applying a grey pool of light, diffused and boundless */
  background: radial-gradient(ellipse,
      rgba(180, 180, 180, 0.15) 0%,
      /* Softer grey core */
      rgba(180, 180, 180, 0.05) 70%,
      /* Diffuse grey middle */
      rgba(180, 180, 180, 0) 100%
      /* Perfectly transparent edge - ELIMINATES THE BOX */
    );
  filter: blur(40px);
  /* Heavier blur for a soft, atmospheric pool */
  pointer-events: none;
}

/* === REFINED BOUNDLESS GREY/WHITE GLOW === */

/* 1. Hide all hard geometric lines, cones, and bounding boxes */
.lamp-line,
.lamp-cone,
.lamp-mask,
.lamp-blur-top {
  display: none !important;
}

/* 2. Allow the light to bleed naturally */
.lamp-container {
  overflow: visible !important;
}

/* 3. Use solid colors and heavy blurs so the light punches through the dark background */
.lamp-glow-main {
  background: rgba(255, 255, 255, 0.8) !important;
  filter: blur(80px) !important;
  /* Huge blur creates the boundless gradient */
  height: 18rem !important;
  /* Made taller so the light reaches further down */
  transform: translateY(-50%) !important;
  /* Centers the light over the top edge */
}

.lamp-glow-oval {
  background: #ffffff !important;
  filter: blur(40px) !important;
  height: 10rem !important;
  transform: translateY(-50%) !important;
}

/* === ALTRION FOOTER MATCHING OVERRIDES === */
@media (min-width: 769px) {

  /* Forces 4 columns so the links stay tight on the left, leaving the right empty */
  .footer-framed-box .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    gap: 40px;
  }

  /* Matches Altrion's button style (White body, Black icon box) */
  .footer-btn-modern {
    background: #ffffff !important;
    border-radius: 0 !important;
  }

  .footer-btn-modern .btn-text {
    color: #000000 !important;
  }

  .footer-btn-modern .btn-icon-box {
    background: #000000 !important;
    color: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
  }
}

/* Matches Altrion's label styling (side borders only, transparent bg) */
.footer-label {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 0 12px !important;
  font-size: 0.65rem !important;
  color: #888 !important;
  letter-spacing: 0.1em !important;
}

/* Matches Altrion's social icons (Square, dark background, no border) */
.footer-socials a {
  border-radius: 4px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #888 !important;
}

.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* === HIDE SPLINE WATERMARK === */
spline-viewer::part(logo) {
  display: none !important;
}

/* === HIDE SPLINE WATERMARK === */
spline-viewer::part(logo) {
  display: none !important;
}

/* ==================================================== */
/* =====  MOBILE TARGETED FIXES  (MAX 768px)      ===== */
/* =====  Scoped patches — desktop untouched       ===== */
/* ==================================================== */
@media (max-width: 768px) {

  /* --- Section-frame masks cause heading-clipping + white/dark bars
         between sections on mobile. Remove decorative frame bits on mobile. --- */
  .section-frame::before,
  .section-frame::after,
  .section-frame .sf-line.top,
  .section-frame .sf-line.bottom,
  .section-frame .sf-line.left,
  .section-frame .sf-line.right,
  .section-frame .sf-dia {
    display: none !important;
  }

  /* --- HERO: robot was positioned off-screen at 50% opacity.
         Recenter so it sits behind the text as visible backdrop. --- */
  /* --- HERO: Override the rogue positioning --- */
  /* --- HERO: Center the robot behind the text --- */
  .hero-robot-3d {
    width: 150vw !important;
    left: 50% !important;
    /* Pull to the middle */
    right: auto !important;
    /* Clear the right-side anchor */
    transform: translateX(-50%) !important;
    /* Perfectly centers it */
    bottom: -28vh !important;
    /* Keeps it pushed down below the text */
    top: auto !important;
    opacity: 0.4 !important;
  }

  /* --- HERO: '© Automated — Growth' badge clipped off right edge.
         Desktop keeps it; hide only on mobile. --- */
  .since-text {
    display: none !important;
  }

  /* --- HERO: keep title rows within viewport, no weird indents
         pushing content off the right. --- */
  .hero-title-row {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-container>.hero-title-row:nth-of-type(2),
  .hero-text-wrapper>.hero-title-row:nth-child(2) {
    padding-left: 20px !important;
  }

  .hero-text-wrapper>.hero-title-row:nth-child(3) {
    padding-left: 20px !important;
  }

  /* --- PHILOSOPHY CAROUSEL: two 50% cards side-by-side are cramped.
         Show one full-width card; Prev/Next already present. --- */
  .timeline-track .tl-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 40px 24px !important;
    min-height: 280px !important;
  }

  .tl-card .tl-year {
    display: none !important;
  }

  .tl-card h3 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
  }

  .tl-card p {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  /* --- 100% COMMITTED section: force a guaranteed dark background
         so no white strip ever shows behind video. --- */
  .excellence-section {
    background-color: #0d0d0d !important;
  }

  /* --- ABOUT section: give the heading a bit more breathing room
         above so it never brushes the nav / prior section. --- */
  .about-section {
    padding-top: 80px !important;
  }

  /* --- SERVICES PAGE: Hide floating side navigation on mobile to prevent text overlap --- */
  .svc-side-menu,
  .svc-scroll-progress {
    display: none !important;
  }

  /* --- NEW SECTIONS: Reduce massive desktop paddings to mobile size --- */
  .pricing-section,
  .impact-section {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
}

/* ============================================================= */
/* ===== MOBILE CAROUSEL PAGINATION (process + bento)      ===== */
/* ============================================================= */
@media (max-width: 768px) {
  .carousel-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 24px auto 0;
    padding: 0 20px;
  }

  .carousel-pagination .pag-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease;
    flex-shrink: 0;
  }

  .carousel-pagination .pag-dot.active {
    width: 28px;
    border-radius: 4px;
    background: #ffffff;
  }

  .carousel-pagination .pag-counter {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 12px;
    min-width: 36px;
    text-align: left;
  }

  /* Light theme variant for the bento section (white background) */
  .bento-section.light-theme .carousel-pagination .pag-dot {
    background: rgba(0, 0, 0, 0.2);
  }

  .bento-section.light-theme .carousel-pagination .pag-dot.active {
    background: #000000;
  }

  .bento-section.light-theme .carousel-pagination .pag-counter {
    color: rgba(0, 0, 0, 0.5);
  }

  /* Dark theme variant for the bento section (industry pages) */
  /* Hiding the pagination (the 1-4 counter and dots) since we use a stacked grid now */
  .bento-section.dark-theme .carousel-pagination {
    display: none !important;
  }

  @media (min-width: 769px) {
    .carousel-pagination {
      display: none;
    }
  }

  /* ============================================================= */
  /* ===== MOBILE FOOTER REBUILD (matches reference layout)  ===== */
  /* ============================================================= */
  @media (max-width: 768px) {
    .footer-section {
      padding: 0 !important;
    }

    .footer-watermark {
      display: none !important;
    }

    .footer-column-stack {
      width: calc(100% - 24px);
      margin: 0 12px;
      padding: 24px 0;
      gap: 12px;
    }

    /* --- Top framed box: tagline + CTA + 2 link cols --- */
    .fm-frame {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 32px 24px;
      background: rgba(255, 255, 255, 0.01);
    }

    .fm-tagline {
      font-size: 1.1rem;
      line-height: 1.5;
      color: #888;
      margin: 0 0 36px;
    }

    .fm-tagline strong {
      color: #ffffff;
      font-weight: 600;
    }

    .fm-cta-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #888;
      margin: 0 0 14px;
    }

    .fm-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      background: #ffffff;
      color: #000000;
      padding: 6px 6px 6px 22px;
      border-radius: 6px;
      text-decoration: none;
      margin-bottom: 44px;
      transition: background 0.3s ease;
    }

    .fm-cta-btn span:first-child {
      font-weight: 600;
      font-size: 1rem;
    }

    .fm-cta-arrow {
      width: 40px;
      height: 40px;
      background: #000000;
      color: #ffffff;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
    }

    .fm-cta-btn:hover {
      background: #f0f0f0;
    }

    /* --- Two-column links inside frame --- */
    .fm-links-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .fm-links-col .footer-label {
      margin-bottom: 22px;
    }

    .fm-links-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .fm-links-col a {
      font-size: 1rem;
      font-weight: 500;
      color: #ffffff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.3s ease;
    }

    .fm-links-col a:hover {
      opacity: 0.7;
    }

    .fm-link-icon {
      font-size: 0.7rem;
      color: #888;
    }

    /* --- Below-frame info blocks --- */
    .fm-info-block {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 24px;
      background: rgba(255, 255, 255, 0.01);
    }

    .fm-info-block .footer-label {
      margin-bottom: 18px;
    }

    .fm-info-line {
      display: block;
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff;
      text-decoration: none;
      margin-bottom: 10px;
      letter-spacing: 0.01em;
    }

    .fm-info-line:last-child {
      margin-bottom: 0;
    }

    .fm-info-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 10px;
    }

    .fm-info-text {
      font-size: 0.95rem;
      color: #aaaaaa;
      line-height: 1.5;
      margin: 0;
    }

    .fm-socials {
      display: flex;
      gap: 12px;
    }

    .fm-socials a {
      width: 56px;
      height: 56px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 1.05rem;
      text-decoration: none;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .fm-socials a:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .fm-copyright {
      font-size: 1rem;
      font-weight: 600;
      color: #ffffff;
      margin: 0 0 4px;
    }

    .fm-credit {
      font-size: 0.85rem;
      color: #888;
      margin: 0;
    }
  }

  /* Hide the new mobile footer markup on desktop (desktop uses .footer-framed-box) */
  @media (min-width: 769px) {

    .fm-frame,
    .fm-info-block {
      display: none;
    }
  }

  /* Default styling for the form title (used on desktop and mobile) */
  .form-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 32px;
    color: #fff;
  }

  /* ============================================================= */
  /* ===== MOBILE CONTACT SECTION (matches reference layout) ==== */
  /* ============================================================= */
  @media (max-width: 768px) {

    /* Trim FAQ section's huge bottom padding so contact section starts higher */
    .faq-sec {
      padding-bottom: 60px !important;
    }

    .contact-section {
      padding: 60px 20px !important;
      align-items: flex-start !important;
    }

    /* Darken the bright background image so white text stays readable */
    .about-page .contact-section .canvas-mobile-bg {
      filter: brightness(0.55) saturate(0.9) !important;
    }

    /* Subtle dark gradient on top for extra contrast behind the headline + form */
    .contact-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0.45) 0%,
          rgba(0, 0, 0, 0.25) 40%,
          rgba(0, 0, 0, 0.55) 100%);
      z-index: 2;
      pointer-events: none;
    }

    .contact-grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
      padding-top: 80px;
      position: relative;
      z-index: 5;
    }

    .contact-title {
      font-size: 2.4rem !important;
      line-height: 1.05 !important;
      margin-bottom: 32px !important;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.6);
    }

    .contact-connect {
      margin-top: 0 !important;
    }

    .connect-label {
      font-size: 0.7rem !important;
      margin-bottom: 18px !important;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
    }

    .connect-list {
      gap: 14px !important;
    }

    .connect-list li {
      font-size: 1rem !important;
      gap: 14px !important;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
    }

    .connect-list li i {
      font-size: 0.75rem !important;
      color: #ffffff !important;
      transform: none !important;
    }

    .contact-form-wrap {
      padding: 28px 24px !important;
      border-radius: 8px !important;
      background: rgba(0, 0, 0, 0.35) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    .form-title {
      font-size: 1.05rem !important;
      margin-bottom: 24px !important;
      letter-spacing: 0.04em !important;
    }

    .contact-form {
      gap: 20px !important;
    }

    .input-group label {
      font-size: 0.85rem !important;
      color: #ffffff !important;
      font-weight: 600 !important;
    }

    .input-group input,
    .input-group textarea {
      font-size: 0.95rem !important;
      padding: 10px 0 !important;
    }

    .input-group textarea {
      min-height: 110px;
    }

    .submit-btn {
      width: auto !important;
      align-self: flex-start !important;
      padding: 14px 28px !important;
      background: #ffffff !important;
      color: #000000 !important;
      font-weight: 700 !important;
      font-size: 0.95rem !important;
      border-radius: 2px !important;
      margin-top: 12px !important;
    }
  }

  /* ============================================================= */
  /* ===== MOBILE: section-title badge spacing & gap fixes  ====== */
  /* ============================================================= */
  @media (max-width: 768px) {

    /* Push the bento + process titles below the absolute badge so it
     stops overlapping the section heading. The badge sits at top:80px
     with line-height 26px, so titles need to start below ~110px. */
    .bento-section {
      padding-top: 130px !important;
    }

    .process-section {
      padding-top: 130px !important;
    }

    .bento-header,
    .process-header {
      margin-top: 0 !important;
    }

    /* Close the visible gap between the horizontal line and the badge's
     vertical border bars on mobile. Tight padding + a small overlap pulls
     the line flush against each vertical bar so they read as one mark. */
    .horizontal-divider.divider-flex .badge {
      padding: 0 10px !important;
      margin-left: 0 !important;
      /* FIX: Removes the stubborn gap between the left line and the badge */
    }

    .horizontal-divider.divider-flex .line-seg:first-child {
      width: 20px !important;
      /* FIX: Shortens the line so the badge aligns perfectly with the 20px padding of the text below */
      margin-right: -2px;
    }

    .horizontal-divider.divider-flex .line-seg:nth-child(3) {
      margin-left: -2px;
    }

    /* ==================================================== */
    /* LIGHT-THEME mobile-menu readability overrides.       */
    /* The mobile redesign hardcodes light text with        */
    /* !important; mirror those rules with dark colors on   */
    /* light-theme pages so the menu is legible.            */
    /* ==================================================== */
    .light-theme .menu-nav-list {
      border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    .light-theme .menu-nav-item {
      border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    .light-theme .menu-nav-item:nth-child(odd) {
      border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    .light-theme .menu-nav-item a {
      color: #1a1a1a !important;
    }

    .light-theme .menu-vision-text {
      color: #1a1a1a !important;
    }

    .light-theme .menu-globe-widget i,
    .light-theme .menu-globe-widget .coords {
      color: #555 !important;
    }

    .light-theme .menu-contact-grid .meta-label {
      color: #1a1a1a !important;
      border-left-color: #999 !important;
    }

    .light-theme .location-block p,
    .light-theme .contact-block p {
      color: #444 !important;
    }

    .light-theme .menu-time,
    .light-theme .menu-email {
      color: #111 !important;
    }

    .light-theme .menu-social-row {
      border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    .light-theme .menu-social-row a {
      border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    .light-theme .menu-social-row a i {
      color: #555 !important;
    }
  }

  /* ============================================================= */
  /* ===== MOBILE: About Hero — fit in one vertical screen ======= */
  /* ============================================================= */
  @media (max-width: 768px) {
    .about-page .about-hero-sec {
      min-height: 100svh;
      height: 100svh;
      padding: 96px 0 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* ADDED: Full section dark gradient overlay to replace the ugly box scrim */
    .about-page .about-hero-sec::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.85) 100%);
      z-index: 2;
      pointer-events: none;
    }

    .about-page .about-hero-centered {
      padding-top: 0;
      padding-left: 20px;
      padding-right: 20px;
      justify-content: center;
      position: relative;
      z-index: 5;
    }

    /* REMOVED: The blocky .about-hero-centered::before radial-gradient scrim */

    .about-page .about-hero-centered .trust-badge {
      font-size: 0.62rem;
      padding: 6px 12px;
      margin-bottom: 18px;
      letter-spacing: 0.08em;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .about-page .about-hero-centered h1 {
      font-size: clamp(2.1rem, 10.5vw, 3rem);
      line-height: 1.05;
      margin-bottom: 16px;
      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    }

    .about-page .about-hero-centered p {
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 0 auto 22px;
      max-width: 92%;
      color: #ffffff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    }

    .about-page .about-hero-centered .hero-actions {
      gap: 10px;
    }

    .about-page .about-hero-centered .hero-actions .btn-main {
      padding: 12px 22px !important;
      font-size: 0.9rem !important;
    }

    .about-page .about-hero-centered .hero-actions .btn-icon {
      width: 44px !important;
      height: 44px !important;
    }

    /* Tame the lamp effect so it doesn't push layout / overflow on mobile */
    .about-page .about-hero-sec .lamp-container {
      transform: scale(0.7);
      transform-origin: center top;
    }
  }

  /* ==================================================== */
  /* ===== NEW: ABOUT PILLARS GRID (REPLACES BENTO) ===== */
  /* ==================================================== */
  .about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 var(--grid-edge);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .pillar-card {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    height: 100%;
  }

  .pillar-card:last-child {
    border-right: none;
  }

  .pillar-img {
    height: 280px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .pillar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%);
  }

  .pillar-content {
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .pillar-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .pillar-p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #aaa;
    margin: 0;
  }

  /* Mobile Carousel Overrides */
  @media (max-width: 1024px) {
    .about-pillars-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .pillar-card:nth-child(even) {
      border-right: none;
    }

    .pillar-card:nth-child(1),
    .pillar-card:nth-child(2) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
  }

  /* ============================================================= */
  /* ===== FINAL FIX: MOBILE TIMELINE CAROUSEL WITH BUTTONS  ===== */
  /* ============================================================= */
  @media (max-width: 768px) {
    .timeline-container {
      display: block !important;
      width: 100% !important;
    }

    .timeline-window {
      display: block !important;
      width: 100% !important;
      overflow: hidden !important;
      /* FIX: Hides the off-screen cards */
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .timeline-track {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      /* FIX: MUST be 100% for the JS sliding math to work */
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
      /* Restores smooth sliding */
      gap: 0 !important;
      padding: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .timeline-track .tl-card {
      display: flex !important;
      flex-direction: column !important;
      flex: 0 0 100% !important;
      /* FIX: Exactly 1 Card per view */
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      border: none !important;
      border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-radius: 0 !important;
      min-height: 250px !important;
      padding: 40px 24px !important;
      opacity: 1 !important;
      /* FIX: Forces cards to be fully visible */
      visibility: visible !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }

    /* Ensures light/dark cards keep their styling */
    .timeline-track .tl-card.light {
      background: #fff !important;
      color: #111 !important;
    }

    .timeline-track .tl-card.dark {
      background: #111 !important;
      color: #fff !important;
    }

    /* FIX: Brings the Next/Prev buttons back */
    .tl-controls {
      display: flex !important;
      flex-direction: row !important;
      width: 100% !important;
      border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .tl-btn {
      display: flex !important;
    }
  }

  /* ============================================================= */
  /* ===== MOBILE: About OUR TOOLKIT — 2×2 compact grid ========== */
  /* ============================================================= */
  @media (max-width: 768px) {
    .about-page .capabilities-sec {
      padding: 80px 0 80px;
    }

    .about-page .capabilities-sec .cap-header h2 {
      font-size: 1.9rem;
      line-height: 1.1;
      margin-bottom: 32px;
      margin-top: 40px !important;
      /* FIX: Pushes the title down, safely away from the badge */
      padding: 0 20px;
      text-align: center !important;
    }

    .about-page .capabilities-sec .cap-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      margin: 0 16px;
      gap: 0;
    }

    .about-page .capabilities-sec .cap-item {
      aspect-ratio: 0.85 / 1;
      min-height: 0;
      margin: 4px;
      padding: 18px 12px;
      background-color: #ebebeb;
    }

    .about-page .capabilities-sec .cap-number {
      top: 10px;
      right: 12px;
      font-size: 0.6rem;
    }

    .about-page .capabilities-sec .cap-logo {
      gap: 6px;
      text-align: center;
      word-break: break-word;
    }

    /* Shrink each variant logo size to suit the smaller tile */
    .about-page .capabilities-sec .cap-item:nth-child(1) .cap-logo {
      font-size: 0.78rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(2) .cap-logo {
      font-size: 1.15rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(3) .cap-logo {
      font-size: 1.45rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(4) .cap-logo {
      font-size: 1.05rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(5) .cap-logo {
      font-size: 1.05rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(6) .cap-logo {
      font-size: 0.78rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(7) .cap-logo {
      font-size: 1.05rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(8) .cap-logo {
      font-size: 1.45rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(9) .cap-logo {
      font-size: 1.1rem;
    }

    .about-page .capabilities-sec .cap-item:nth-child(10) .cap-logo {
      font-size: 1.1rem;
    }

    /* Join-us CTA spans the full 2-column row */
    .about-page .capabilities-sec .cap-item.join-us-card {
      grid-column: span 2 !important;
      aspect-ratio: auto;
      padding: 28px 22px;
      margin: 4px;
    }

    .about-page .capabilities-sec .cap-item.join-us-card h4 {
      font-size: 1.15rem;
      margin: 14px 0;
    }

    .about-page .capabilities-sec .cap-item.join-us-card .join-btn {
      font-size: 0.72rem;
      padding: 9px 16px;
    }

    .about-page .capabilities-sec .cap-item.join-us-card .rating {
      position: relative;
      bottom: auto;
      right: auto;
      margin-top: 16px;
      font-size: 0.72rem;
    }
  }

  /* ==================================================== */
  /* ===== MOBILE REFINEMENTS: FAQ & SINCE SECTION  ===== */
  /* ==================================================== */
  @media (max-width: 768px) {

    /* --- FAQ Section Mobile Fixes --- */
    .faq-title {
      font-size: clamp(2.2rem, 9vw, 3rem) !important;
      line-height: 0.95 !important;
      margin-bottom: 30px !important;
      padding-left: 0 !important;
      /* FIX: Removed left padding so it centers perfectly */
      text-align: center !important;
      /* FIX: Centers the title */
    }

    /* FIX: Centers the FAQ badge above the title */
    .faq-sec .horizontal-divider.divider-flex::before {
      display: none !important;
    }

    .faq-sec .horizontal-divider.divider-flex .line-seg:first-child,
    .faq-sec .horizontal-divider.divider-flex .line-seg:nth-child(3) {
      flex-grow: 1 !important;
      width: auto !important;
    }

    .faq-sec .horizontal-divider.divider-flex {
      justify-content: center !important;
    }

    .faq-split-layout {
      display: flex !important;
      flex-direction: column !important;
    }

    .faq-right {
      display: flex !important;
      /* Unhides the answers on mobile */
      background-color: #f4f4f4 !important;
      /* Light grey box from reference */
    }

    .faq-answer-display {
      padding: 30px 20px !important;
    }

    .faq-answer-text p {
      font-size: 0.9rem !important;
    }

    /* 6. Mobile CTA Section Gap Fix */
    .cta-react-translated-sec {
      padding-top: 130px !important;
      /* Increased from 80px to give the title more breathing room */
      padding-bottom: 40px !important;
      min-height: auto !important;
    }
  }

  .faq-question-item {
    padding: 16px 20px !important;
    /* Reduced vertical padding for a more compact card */
    font-size: 0.85rem !important;
    /* Reduced font size to help text fit onto two lines */
    line-height: 1.25 !important;
    /* Tightened line-height to fix the vertical gap between wrapped lines */
  }

  /* Active State matches reference (Black BG, White Text) */
  .faq-question-item.active {
    background-color: #111 !important;
    color: #fff !important;
  }

  .faq-question-item.active i {
    color: #fff !important;
  }

  /* --- "ZERO MISSED LEADS" Section Mobile Fixes --- */
  .since-top {
    align-items: flex-start !important;
    gap: 30px !important;
    padding-bottom: 40px !important;
  }

  /* Headline sized so "MISSED LEADS" fits on one line — 2-line layout like the reference */
  .massive-since {
    font-size: clamp(2.6rem, 12.5vw, 4.5rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.02em !important;
  }

  .massive-since .line-2 {
    padding-left: 0 !important;
    white-space: nowrap !important;
  }

  /* Right-align the quote block to match reference */
  .since-quote-box {
    align-items: flex-end !important;
    text-align: right !important;
    padding-right: 20px !important;
    /* FIX: Added space to pull the text and button away from the right edge */
    width: 100% !important;
  }

  .since-quote-box .logo-small {
    display: none !important;
    /* FIX: Hides the Innovaition logo entirely in this section */
  }

  .since-quote-box p {
    font-size: 1rem !important;
    margin: 15px 0 20px !important;
    line-height: 1.5 !important;
  }

  .since-quote-box .small-heading {
    text-align: right !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
    /* FIX: Brightened the text to pure white for readability */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
    /* FIX: Added a dark shadow so it pops against the glowing background */
  }

  /* 2-Column Stats Grid with internal borders */
  .since-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 !important;
    border-left: none !important;
  }

  .stat-col {
    padding: 30px 20px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .stat-col:nth-child(even) {
    border-right: none !important;
  }

  .stat-col h3 {
    font-size: 3.5rem !important;
    /* Massive numbers */
    margin-bottom: 8px !important;
  }

  /* --- "WHO WE ARE" / massive-statement — compact on mobile --- */
  .massive-statement {
    padding: 70px 0 50px !important;
  }

  .massive-statement .statement-container {
    padding: 0 20px !important;
    margin-bottom: 40px !important;
    margin-top: 40px !important;
    /* FIX: Pushes the text down, safely away from the badge */
  }

  .statement-text {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em !important;
  }
}

/* ============================================================= */
/* ===== SERVICES HERO — Mobile Fix (Stack instead of Pin) ===== */
/* ============================================================= */
@media (max-width: 768px) {
  #services-pin-wrapper {
    height: auto !important;
  }

  .services-hero-sec {
    height: auto !important;
    min-height: 100vh;
    padding: 140px 20px 80px !important;
    align-items: flex-start !important;
  }

  /* ADDED: Dark gradient overlay to restore contrast against the bright background */
  .services-hero-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 2;
    pointer-events: none;
  }

  .svc-content-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    height: auto !important;
    align-items: flex-start !important;
    text-align: left !important;
    z-index: 10 !important;
    /* Ensure content sits above the new overlay */
  }

  .content-section {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    padding: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .content-section .hero-title {
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* ADDED: Drop shadow for punchy contrast */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
  }

  .content-section .hero-subtitle p {
    font-size: 1rem !important;
    text-align: left !important;
    color: #ffffff !important;
    /* Brightened text */
    /* ADDED: Text shadow for legibility */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  }

  .svc-side-menu,
  .svc-scroll-progress {
    display: none !important;
  }
}

/* ============================================================= */
/* ===== MOBILE: Replace videos & canvases with static images === */
/* ============================================================= */
.canvas-mobile-bg,
.exc-mobile-bg,
.contact-mobile-bg {
  display: none;
}

@media (max-width: 768px) {

  /* Hide every animated canvas + the homepage video on mobile.
     JS init is also gated to skip on viewports ≤768px. */
  .excellence-section .exc-video-bg,
  #hero-canvas,
  #d3-globe-canvas,
  #cta-globe-canvas,
  #cta-liquid-canvas,
  #paper-shader-canvas,
  #shader-canvas,
  #hero-waves-canvas,
  #beams-canvas,
  #zero-limits-canvas,
  #about-dither-canvas,
  #cta-warp-canvas {
    display: none !important;
  }

  /* Universal absolute-fill background for any mobile image fallback. */
  .canvas-mobile-bg,
  .exc-mobile-bg,
  .contact-mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
  }
}

/* ============================================================== */
/* ===== SERVICES PAGE: MOBILE TOOLKIT GRID (About Match)   ===== */
/* ============================================================== */
@media (max-width: 768px) {
  .services-page .capabilities-sec {
    padding: 80px 0 80px !important;
  }

  .services-page .capabilities-sec .section-title {
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
    margin-bottom: 32px !important;
    margin-top: 40px !important;
    padding: 0 20px !important;
    text-align: center !important;
  }

  .services-page .capabilities-sec .cap-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 0 16px !important;
    gap: 0 !important;
  }

  .services-page .capabilities-sec .cap-item {
    aspect-ratio: 0.85 / 1 !important;
    min-height: 0 !important;
    margin: 4px !important;
    padding: 18px 12px !important;
    background-color: #ebebeb !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
  }

  .services-page .capabilities-sec .cap-number {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    font-size: 0.6rem !important;
    color: #999 !important;
    margin: 0 !important;
  }

  .services-page .capabilities-sec .cap-logo {
    gap: 6px !important;
    text-align: center !important;
    word-break: break-word !important;
    margin: 0 !important;
  }

  .services-page .capabilities-sec .cap-desc {
    display: none !important;
  }

  /* Perfect logo scaling to match the About page Toolkit */
  .services-page .capabilities-sec .cap-item:nth-child(1) .cap-logo {
    font-size: 0.78rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(2) .cap-logo {
    font-size: 1.15rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(3) .cap-logo {
    font-size: 1.45rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(4) .cap-logo {
    font-size: 1.05rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(5) .cap-logo {
    font-size: 1.05rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(6) .cap-logo {
    font-size: 0.78rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(7) .cap-logo {
    font-size: 1.05rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(8) .cap-logo {
    font-size: 1.45rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(9) .cap-logo {
    font-size: 1.1rem !important;
  }

  .services-page .capabilities-sec .cap-item:nth-child(10) .cap-logo {
    font-size: 1.1rem !important;
  }

  /* --- INDUSTRIES PAGE: Compact Pricing Grid --- */
}

/* Closes the mobile media query so this next part applies to desktop */

/* --- INDUSTRIES PAGE: Global Header (Visible on Desktop & Mobile) --- */
.industries-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-top: 80px;
  margin-bottom: 40px;
  padding: 0 var(--layout-pad);
  width: 100%;
  box-sizing: border-box;
}

.industries-header .section-title {
  margin-bottom: 16px;
  color: #fff;
}

.pricing-desc {
  font-size: 1.05rem;
  color: #aaa;
  line-height: 1.6;
  max-width: 600px;
  margin: 0;
}

@media (max-width: 768px) {

  /* --- INDUSTRIES PAGE: Compact Pricing Grid --- */
  .industries-header {
    align-items: center !important;
    text-align: center !important;
    margin-top: 60px !important;
    margin-bottom: -10px !important;
    padding: 0 20px !important;
  }

  .industries-header .section-title {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    margin-bottom: 12px !important;
  }

  .pricing-desc {
    font-size: 0.95rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* 1. Bento / Bottleneck Section - Compact Side-by-Side Mobile Grid */
  .bento-section {
    padding-top: 80px !important;
    padding-bottom: 20px !important;
  }

  .bento-header {
    margin-top: 50px !important;
    margin-bottom: 30px !important;
  }

  .bento-header p {
    font-size: 0.95rem !important;
  }

  /* Vertical stack on mobile — every card is full width */
  .bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .bento-col-left,
  .bento-col-mid-top,
  .bento-col-right-top,
  .bento-col-right-bot {
    width: 100% !important;
    order: unset !important;
  }

  /* Mini cards stay side-by-side inside their container */
  .bento-split-col {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Tighter padding and scaled text for the new half-width layout */
  .bento-card {
    min-height: auto !important;
    height: 100% !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .bento-card h3 {
    margin-bottom: 10px !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }

  .bento-card p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }

  .bento-list {
    margin-top: 16px !important;
  }

  /* 2. Tech Bridge / Architecture Section */
  .tech-bridge-sec {
    padding: 80px 0 !important;
  }

  .tech-bridge-sec .container {
    padding: 40px 20px 0 !important;
  }

  .tech-bridge-sec .section-title {
    font-size: clamp(1.8rem, 8vw, 2.2rem) !important;
    margin-bottom: 40px !important;
  }

  .tech-row {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .tech-text-block h3 {
    font-size: 1.25rem !important;
  }

  .tech-text-block p {
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
  }

  .tech-text-block .bento-list li {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  .tech-bridge-sec .container>div:last-child {
    margin-top: 50px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .tech-bridge-sec .container>div:last-child>div {
    width: 20px !important;
    /* Shrinks the decorative lines to save space */
  }

  .tech-bridge-sec .container>div:last-child>span {
    font-size: 0.65rem !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap !important;
    /* Prevents text from breaking */
  }

  .tech-bridge-sec .container>div:last-child>i {
    font-size: 1.2rem !important;
    /* Slightly scales down icons to fit */
  }

  /* 3. Pricing Section */
  .pricing-section {
    padding: 80px 0 60px !important;
  }

  .pricing-header-row {
    margin-top: 50px !important;
    /* Fixes overlap with section badge */
    margin-bottom: 40px !important;
  }

  .pricing-grid {
    gap: 16px !important;
    padding: 0 20px !important;
    border: none !important;
  }

  .pricing-grid .p-card {
    padding: 32px 24px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .p-plan-name {
    font-size: 1.25rem !important;
  }

  .p-plan-desc {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
  }

  .price-wrap {
    margin-bottom: 10px !important;
  }

  .price-wrap .amount {
    font-size: 3rem !important;
  }

  .p-card .included-title {
    margin-bottom: 16px !important;
  }

  .p-features {
    margin-bottom: 24px !important;
  }

  .p-features li {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* 4. Feature Comparison & Pricing Tabs */
  .compare-section {
    padding: 80px 0 40px !important;
  }

  .compare-title {
    font-size: clamp(1.8rem, 7vw, 2.2rem) !important;
    margin-top: 50px !important;
    /* Fixes overlap with section badge */
    margin-bottom: 30px !important;
  }

  /* Mobile Tab UI */
  .mobile-tab-container {
    display: flex !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 4px;
    margin: 0 20px 30px;
    justify-content: space-between;
    width: calc(100% - 40px);
  }

  .mobile-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 12px 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    transition: all 0.3s;
  }

  .mobile-tab-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  /* Table layout for tabbed view */
  .compare-table {
    min-width: 100% !important;
    display: table !important;
  }

  .compare-table thead {
    display: none !important;
    /* Hide column headers since tabs act as headers */
  }

  .compare-table tbody tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .compare-table td.feature-name {
    flex: 1 !important;
    text-align: left !important;
    font-size: 0.9rem !important;
    border: none !important;
    padding: 20px 0 !important;
  }

  .compare-table td:not(.feature-name) {
    width: 50px !important;
    text-align: center !important;
    border: none !important;
    padding: 20px 0 !important;
  }

  /* 5. Mobile FAQ Section Compaction */
  .faq-sec {
    padding: 60px 0 !important;
  }

  .faq-title {
    font-size: clamp(1.8rem, 7vw, 2.2rem) !important;
    margin-bottom: 30px !important;
  }

  .faq-question-item {
    padding: 16px 20px !important;
    font-size: 0.9rem !important;
  }

  .faq-answer-text {
    padding: 16px 20px !important;
  }

  .faq-answer-text p {
    font-size: 0.9rem !important;
  }
}

.industries-grid-wrapper {
  margin-top: 40px !important;
  gap: 16px !important;
  padding: 0 16px !important;
  border-top: none !important;
  border-bottom: none !important;
}

.industries-grid-wrapper .p-card {
  padding: 32px 24px !important;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.industries-grid-wrapper .p-plan-name {
  font-size: 1.3rem !important;
}

.industries-grid-wrapper .p-plan-desc {
  margin-bottom: 24px !important;
  min-height: auto !important;
  font-size: 0.9rem !important;
}

.industries-grid-wrapper .included-title {
  margin-bottom: 16px !important;
}

.industries-grid-wrapper .p-features {
  margin-bottom: 24px !important;
}

.industries-grid-wrapper .p-features li {
  font-size: 0.9rem !important;
  margin-bottom: 12px !important;
}

.industries-grid-wrapper .p-card-bot {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.industries-grid-wrapper .btn-custom-quote {
  margin-bottom: 0 !important;
}

/* ============================================================= */
/* ===== BLOG PAGE MOBILE FIX (MATCHES REFERENCE EXACTLY)  ===== */
/* ============================================================= */

@media (max-width: 768px) {
  body .blog-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: auto !important;
  }

  body .blog-main-grid .b-card {
    display: flex !important;
    flex-direction: column !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    padding: 30px 20px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 1. Force Image Visibility & Sizing */
  body .blog-main-grid .b-card .b-img-wrap {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 16px !important;
    position: relative !important;
  }

  body .blog-main-grid .b-card .b-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 2. Force Stacked Meta Text (Title on top, Date on bottom) */
  body .blog-main-grid .b-card .b-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body .blog-main-grid .b-card .b-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: left !important;
    color: #000 !important;
  }

  body .blog-main-grid .b-card .b-date {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 768px) {
  /* ============================================================= */
  /* ===== BLOG HERO MOBILE RESIZE                           ===== */
  /* ============================================================= */

  body .blog-hero-sec {
    min-height: auto !important;
    padding-top: 120px !important;
    padding-bottom: 40px !important;
  }

  body .blog-hero-title {
    font-size: clamp(3.5rem, 18vw, 5.5rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  body .blog-hero-title.right {
    margin-top: -5px !important;
  }
}

/* Target the pricing grid specifically on blog pages */
body.blog-page .pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  /* Forces 3 columns on desktop */
  gap: 40px !important;
  padding: 0 20px !important;
  border: none !important;
}

/* Tablet: 2 Columns */
@media (max-width: 1024px) {
  body.blog-page .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 Column */
@media (max-width: 768px) {
  body.blog-page .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Override the heavy inline styling on the cards */
body.blog-page .pricing-grid .p-card {
  padding: 0 0 32px 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
}

body.blog-page .pricing-grid .p-card:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Fix the image container (which is the first div inside the card) */
body.blog-page .pricing-grid .p-card>div:first-child {
  height: 220px !important;
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  width: 100% !important;
}

/* Format the Title */
body.blog-page .pricing-grid .p-card .p-plan-name {
  font-family: var(--font-heading) !important;
  font-size: 1.15rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

/* Format the Date */
body.blog-page .pricing-grid .p-card .p-plan-desc {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: #888888 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* Hide the "Read Article" button to match the clean reference look */
body.blog-page .pricing-grid .p-card .p-card-bot {
  display: none !important;
}

@media (max-width: 768px) {

  /* ============================================================= */
  /* ===== INSIGHTS & UPDATES (BOTTOM OF BLOG PAGES) MOBILE ===== */
  /* ============================================================= */

  body .blog-section .blog-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    border-top: none !important;
  }

  body .blog-section .blog-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 32px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    height: auto !important;
    width: 100% !important;
    border-right: none !important;
  }

  body .blog-section .blog-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  /* 1. Force Image Visibility & Sizing */
  body .blog-section .blog-card .blog-img-wrap {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  body .blog-section .blog-card .blog-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 2. Force Stacked Meta Text (Title top, Date bottom) */
  body .blog-section .blog-card .blog-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body .blog-section .blog-card .blog-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-align: left !important;
    color: #0a0a0a !important;
    text-transform: uppercase !important;
  }

  body .blog-section.dark-theme .blog-card .blog-title {
    color: #ffffff !important;
  }

  body .blog-section .blog-card .blog-date {
    font-size: 0.85rem !important;
    color: #555555 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body .blog-section.dark-theme .blog-card .blog-date {
    color: #888888 !important;
  }

  body .blog-section.light-theme .blog-card {
    border-bottom-color: rgba(0, 0, 0, 0.12) !important;
  }
}

@media (max-width: 768px) {
  /* ============================================================= */
  /* ===== CONTACT HERO MOBILE RESIZE & GAP FIX              ===== */
  /* ============================================================= */

  body .contact-hero-sec {
    min-height: auto !important;
    padding-top: 100px !important;
    /* Pulls the section up slightly */
    padding-bottom: 80px !important;
    /* Pushes the black box further down */
  }

  body .contact-hero-title {
    font-size: clamp(3.5rem, 18vw, 5.5rem) !important;
    /* Shrinks the text */
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 40px !important;
    /* Extra safety gap below the text */
  }

  body .contact-hero-title.right {
    margin-top: -5px !important;
  }
}

/* ========================================================== */
/* ===== STRICTLY LAPTOP HERO SIZING (1025px to 1920px) ===== */
/* ========================================================== */
@media (min-width: 1025px) and (max-width: 1920px) {

  .hero-title,
  .ai-text,
  .hero-lock-icon {
    font-size: clamp(2.5rem, 5vw, 75px) !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
  }

  .hero-title-row.indent {
    margin-top: 10px !important;
    font-size: clamp(2.5rem, 5vw, 75px) !important;
  }

  .hero-text-wrapper {
    max-width: 55% !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: -20vh !important;
  }
}

/* <--- This bracket was missing! */

/* ========================================================== */
/* SIMPLE STATIC CARDS (DESKTOP ONLY) — no expand, just fade   */
/* ========================================================== */

@media (min-width: 769px) {
  .services-accordion-section .accordion-wrapper {
    height: auto !important;
  }

  .services-accordion-section .accordion-item,
  .services-accordion-section .accordion-item.active {
    flex: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
    cursor: default !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    min-height: 380px !important;
    padding: 28px !important;
  }

  .services-accordion-section .accordion-item .tab-icon {
    display: none !important;
  }

  .services-accordion-section .accordion-item .tab-content {
    margin-top: auto !important;
  }

  .services-accordion-section .accordion-item .bg-image {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .services-accordion-section .accordion-item::after {
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.2) 0%, rgba(13, 13, 13, 0.85) 100%) !important;
    transition: none !important;
  }

  .services-accordion-section .accordion-item .tab-header h3 {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    color: #fff !important;
    transition: none !important;
  }

  .services-accordion-section .accordion-item .tab-icon {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: transparent !important;
    transform: none !important;
    transition: none !important;
  }

  .services-accordion-section .accordion-item .tab-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================== */
/* FIX: ABOUT PILLARS GRID DESKTOP LAYOUT OVERRIDE            */
/* ========================================================== */

.about-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  margin: 0 var(--grid-edge) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  width: auto !important;
}

.pillar-card {
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  height: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.pillar-card:last-child {
  border-right: none !important;
}

.pillar-img {
  height: 280px !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  flex-shrink: 0 !important;
}

.pillar-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: grayscale(30%) !important;
}

.pillar-content {
  padding: 30px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.pillar-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.5rem, 2vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.pillar-p {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #aaa !important;
  margin: 0 !important;
}

/* Restoring the internal layouts */
.mt-30 {
  margin-top: 30px !important;
}

.mt-auto {
  margin-top: auto !important;
}

.action-bottom {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.goal-stats h3 {
  font-family: var(--font-heading) !important;
  font-size: clamp(2.5rem, 3.5vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.goal-stats .stat-label {
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 10px !important;
  color: #aaa !important;
}

.vision-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vision-list li {
  padding: 12px 0 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
}

.vision-list li i {
  font-size: 0.65rem !important;
  color: #fff !important;
}

/* ========================================= */
/* TABLET RECOVERY                           */
/* ========================================= */
@media (max-width: 1024px) {
  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pillar-card:nth-child(even) {
    border-right: none !important;
  }

  .pillar-card:nth-child(1),
  .pillar-card:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
}

/* ========================================= */
/* MOBILE RECOVERY                           */
/* ========================================= */
@media (max-width: 768px) {
  .about-pillars-grid {
    display: block !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
    border-top: none !important;
    overflow: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  .pillars-marquee {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 0 16px !important;
    width: max-content !important;
  }

  .pillar-card {
    flex: 0 0 82vw !important;
    width: 82vw !important;
    height: 500px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    background: #111 !important;
    overflow: hidden !important;
  }

  .pillar-img {
    height: 220px !important;
    border-bottom: none !important;
  }

  .pillar-content {
    padding: 22px 22px 28px !important;
  }
}

/* ========================================================== */
/* FIX: FOOTER LOGO ALIGNMENT                                 */
/* ========================================================== */
.footer-framed-box .brand-col .fm-footer-logo {
  object-position: left center !important;
  /* Forces the image content to the left edge */
  margin-left: -5px !important;
  /* Tiny nudge to counter any built-in image padding */
}

/* ========================================================== */
/* FIX: BIGGER DESKTOP MENU LOGO                              */
/* ========================================================== */
@media (min-width: 769px) {
  .navbar .logo-img {
    height: 120px !important;
    /* Increase or decrease this number to dial in the perfect size */
    max-width: none !important;
  }
}

/* ========================================================== */
/* FIX: ABOUT TOOLKIT GENERIC NAMES & SUBTEXT                 */
/* ========================================================== */
.cap-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.cap-logo {
  margin-bottom: 0 !important;
}

.cap-subtext {
  font-family: var(--font-body), sans-serif !important;
  font-size: 0.85rem !important;
  color: #666 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  margin-top: 10px !important;
  max-width: 85% !important;
}

@media (max-width: 768px) {
  .cap-subtext {
    font-size: 0.75rem !important;
    margin-top: 6px !important;
    max-width: 95% !important;
  }
}

/* ============================================================= */
/* ===== BULLETPROOF MOBILE TIMELINE FIX (NATIVE SWIPE)    ===== */
/* ============================================================= */
@media (max-width: 768px) {
  .timeline-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .timeline-window {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    /* FIX: Prevents cards from being clipped and vanishing */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px 0 !important;
  }

  .timeline-window::-webkit-scrollbar {
    display: none !important;
  }

  .timeline-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    height: auto !important;
    transform: translate3d(0, 0, 0) !important;
    /* FIX: Safely neutralizes the broken JS sliding */
    gap: 16px !important;
    padding: 0 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .timeline-track .tl-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 85vw !important;
    width: 85vw !important;
    height: auto !important;
    min-height: 250px !important;
    scroll-snap-align: center !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    margin: 0 !important;
  }

  /* Ensures light/dark cards keep their styling */
  .timeline-track .tl-card.light {
    background: #fff !important;
    color: #111 !important;
  }

  .timeline-track .tl-card.dark {
    background: #111 !important;
    color: #fff !important;
  }

  /* Hides the broken Next/Prev buttons since users can naturally swipe now */
  .tl-controls {
    display: none !important;
  }
}

/* ============================================================= */
/* ===== BRUTE-FORCE: SHOW MOBILE PREV/NEXT BUTTONS        ===== */
/* ============================================================= */
@media (max-width: 768px) {
  .timeline-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
    /* FIX: Prevents the container from clipping the buttons */
  }

  .tl-controls {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 60px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 9999 !important;
    /* FIX: Forces buttons to the top layer */
    margin-top: 0 !important;
  }

  .tl-btn {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: none !important;
    cursor: pointer !important;
  }

  .tl-btn.prev {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .tl-btn i {
    color: #000000 !important;
  }
}

/* ============================================================= */
/* ===== FINAL BULLETPROOF MOBILE TIMELINE JS-SLIDER FIX   ===== */
/* ============================================================= */
@media (max-width: 768px) {
  .timeline-window {
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .timeline-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    transition: transform 0.5s ease-in-out !important;
    /* Restores smooth sliding */
    gap: 0 !important;
    padding: 0 !important;
  }

  .timeline-track .tl-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 calc(100vw - 40px) !important;
    /* Perfect fit for the padded mobile screen */
    width: calc(100vw - 40px) !important;
    min-width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    min-height: 250px !important;
    padding: 40px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ================================================================== */
/* ===== FINAL FIX: SERVICES PAGE "BUILD YOUR AUTOMATION" CARD  ===== */
/* ================================================================== */
@media (max-width: 768px) {

  /* Targets the exact card on the Services page */
  body.services-page .capabilities-sec .cap-item.join-us-card {
    grid-column: span 2 !important;
    /* Forces it to extend full width */
    background-color: #000000 !important;
    /* Forces solid black background */
    color: #ffffff !important;
    aspect-ratio: auto !important;
    /* Lets it naturally stretch to fit the text */
    padding: 32px 24px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    border: none !important;
  }

  /* Forces the main heading to be white and readable */
  body.services-page .capabilities-sec .cap-item.join-us-card h4 {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin: 16px 0 !important;
    text-align: left !important;
  }

  /* Formats the button */
  body.services-page .capabilities-sec .cap-item.join-us-card .join-btn {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 10px 20px !important;
    font-size: 0.8rem !important;
    background: transparent !important;
  }

  /* Dims the secondary text so the main text pops */
  body.services-page .capabilities-sec .cap-item.join-us-card .rating,
  body.services-page .capabilities-sec .cap-item.join-us-card .rating span,
  body.services-page .capabilities-sec .cap-item.join-us-card .logo-small {
    color: #aaaaaa !important;
  }

  /* Keeps the little security shield green */
  body.services-page .capabilities-sec .cap-item.join-us-card .rating i {
    color: #22c55e !important;
  }
}

/* ========================================================== */
/* ===== LAPTOP ONLY: UNIFIED LOGO SIZING (1025-1920px) ===== */
/* ========================================================== */
@media (min-width: 1025px) and (max-width: 1920px) {

  /* Forces the white section logo to match the standard 70px height */
  .navbar .logo-img[src*="white sections"] {
    height: 70px !important;
  }

  /* Ensures the standard logo is also exactly 70px */
  .navbar .logo-img {
    height: 70px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ============================================================== */
/* ===== FINAL FIX: MOBILE WHO WE ARE CARDS (ABOUT PAGE)    ===== */
/* ============================================================== */
@media (max-width: 768px) {
  .about-pillars-grid {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    /* Allows natural thumb swiping */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* Smooth iOS scrolling */
    scrollbar-width: none !important;
    padding: 0 0 40px 0 !important;
    margin: 0 !important;
    border-top: none !important;
  }

  .about-pillars-grid::-webkit-scrollbar {
    display: none !important;
  }

  .pillars-marquee {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }

  .about-pillars-grid .pillar-card {
    flex: 0 0 85vw !important;
    width: 85vw !important;
    min-width: 85vw !important;
    max-width: 85vw !important;
    height: auto !important;
    min-height: 480px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    background: #111 !important;
    display: flex !important;
    flex-direction: column !important;

    /* BRUTE FORCE VISIBILITY: Stops GSAP from keeping cloned cards hidden forever */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
  }

  /* Ensures internal images and padding stay intact */
  .about-pillars-grid .pillar-img {
    height: 220px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .about-pillars-grid .pillar-content {
    flex: 1 !important;
    padding: 24px !important;
  }
}

/* ============================================================== */
/* ===== FINAL FIX: MOBILE WHO WE ARE SWIPE CAROUSEL        ===== */
/* ============================================================== */
@media (max-width: 768px) {

  /* 1. Sets up the container for horizontal swiping */
  .about-pillars-grid {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    /* Enables horizontal scroll */
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    /* Enables the "swipe and snap" feel */
    -webkit-overflow-scrolling: touch !important;
    /* Smooth momentum scrolling on iOS */
    scrollbar-width: none !important;
    /* Hides scrollbar on Firefox */
    padding: 0 0 40px 0 !important;
    margin: 0 !important;
    border-top: none !important;
    touch-action: pan-x !important;
    /* Explicitly allows horizontal swiping */
  }

  .about-pillars-grid::-webkit-scrollbar {
    display: none !important;
    /* Hides scrollbar on Chrome/Safari */
  }

  /* 2. Forces the track created by your script to stay in a single row */
  .pillars-marquee {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }

  /* 3. Formats the cards to be swipe-friendly and visible */
  .about-pillars-grid .pillar-card {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    min-width: 78vw !important;
    max-width: 78vw !important;
    scroll-snap-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    background: #111 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .about-pillars-grid .pillar-img {
    height: 160px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .about-pillars-grid .pillar-content {
    flex: 1 !important;
    padding: 18px 20px 22px !important;
    overflow: hidden !important;
  }

  .about-pillars-grid .pillar-content .small-heading {
    margin-bottom: 10px !important;
  }

  .about-pillars-grid .pillar-content .pillar-p {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
  }

  .about-pillars-grid .pillar-content .vision-list {
    margin-top: 8px !important;
  }

  .about-pillars-grid .pillar-content .vision-list li {
    font-size: 0.85rem !important;
    padding: 4px 0 !important;
  }
}

/* ============================================================== */
/* ===== FINAL FIX: MOBILE MENU BACKGROUND SCROLL LOCK      ===== */
/* ============================================================== */
html.menu-locked,
body.menu-locked {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
  /* Stops the screen from rubber-band bouncing */
}

.menu-overlay {
  overscroll-behavior: contain !important;
  /* Traps all scrolling securely inside the menu */
}

/* ============================================================== */
/* ===== FINAL FIX: MOBILE HERO SPACING & FONT SIZE         ===== */
/* ============================================================== */
@media (max-width: 768px) {

  /* Shrinks the massive text so it stays away from the screen edges */
  .hero-title {
    font-size: clamp(2.5rem, 11vw, 4rem) !important;
    line-height: 1.05 !important;
  }

  /* Scales the lock icon down to match the new text size */
  .hero-lock-icon {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    margin: 0 0 0 12px !important;
    transform: translateY(-2px) !important;
  }

  /* Pushes the "A LEAD" row down slightly for better vertical breathing room */
  .hero-text-wrapper>.hero-title-row:nth-child(3) {
    margin-top: 8px !important;
  }
}

/* ============================================================== */
/* ===== NUKE-LEVEL FIX: FOOTER CTA BUTTONS (ALL PAGES)     ===== */
/* ============================================================== */
@media (max-width: 768px) {

  /* 1. Force the parent wrappers to allow full width */
  body .footer-section .book-call-wrap,
  body .footer-section .fm-frame {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Force both footer button variants to stretch full width */
  body .footer-section .fm-cta-btn,
  body .footer-section .footer-btn-modern {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    /* Forces it to ignore squished parents */
    justify-content: space-between !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
  }

  /* 3. Formats the text container */
  body .footer-section .fm-cta-btn span:first-child,
  body .footer-section .footer-btn-modern .btn-text {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    text-align: left !important;
    flex-grow: 1 !important;
    white-space: normal !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 4. Completely locks the square icon box from being squished */
  body .footer-section .fm-cta-arrow,
  body .footer-section .footer-btn-modern .btn-icon-box {
    width: 60px !important;
    min-width: 60px !important;
    /* CRITICAL: Stops the box from collapsing */
    max-width: 60px !important;
    background: #000000 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  body .footer-section .fm-cta-arrow i,
  body .footer-section .footer-btn-modern .btn-icon-box i {
    font-size: 1.1rem !important;
    color: #ffffff !important;
    transform: none !important;
    /* Stops the arrow from moving off-center */
  }
}

/* ============================================================== */
/* ===== CTA PILL — animated text + sliding icon              ===== */
/* ============================================================== */
.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 9999px;
  height: 48px;
  padding: 4px 56px 4px 24px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  width: fit-content;
  border: 1px solid transparent;
  background: #ffffff;
  color: #0a0a0a;
  box-sizing: border-box;
  transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-pill:hover {
  padding: 4px 24px 4px 56px;
}

.cta-pill .cta-pill-text {
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.cta-pill .cta-pill-icon {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  color: #ffffff;
  box-sizing: border-box;
  transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-pill:hover .cta-pill-icon {
  right: calc(100% - 44px);
  transform: translateY(-50%) rotate(45deg);
}

.cta-pill .cta-pill-icon i {
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}

.cta-pill .cta-pill-icon i::before {
  color: inherit;
}

.cta-pill .cta-pill-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  display: block;
}

/* Small variant for navbar */
.cta-pill.cta-pill-sm {
  height: 36px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 40px 3px 18px;
}

.cta-pill.cta-pill-sm:hover {
  padding: 3px 18px 3px 40px;
}

.cta-pill.cta-pill-sm .cta-pill-icon {
  width: 30px;
  height: 30px;
  right: 3px;
}

.cta-pill.cta-pill-sm:hover .cta-pill-icon {
  right: calc(100% - 33px);
}

.cta-pill.cta-pill-sm .cta-pill-icon svg {
  width: 12px;
  height: 12px;
}

/* Dark-section variant: black pill, white circle, black icon (opt-in only) */
.cta-pill.cta-pill-dark {
  background: #0a0a0a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.cta-pill.cta-pill-dark .cta-pill-icon {
  background: #ffffff;
  color: #0a0a0a;
}

/* Auto-darken navbar CTA on white-navbar pages (logo for white sections) */
.navbar:has(.logo-img[src*="white sections"]) .cta-pill {
  background: #0a0a0a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.navbar:has(.logo-img[src*="white sections"]) .cta-pill .cta-pill-icon {
  background: #ffffff;
  color: #0a0a0a;
}

@media (max-width: 768px) {
  .cta-pill {
    height: 46px;
    font-size: 0.85rem;
    padding: 4px 52px 4px 22px;
  }

  .cta-pill:hover {
    padding: 4px 22px 4px 52px;
  }

  .cta-pill .cta-pill-icon {
    width: 38px;
    height: 38px;
  }

  .cta-pill:hover .cta-pill-icon {
    right: calc(100% - 42px);
  }
}

/* ============================================================== */
/* ===== FINAL FIX: WHO WE ARE LOOP & VERTICAL SCROLL       ===== */
/* ============================================================== */
@media (max-width: 768px) {
  .about-pillars-grid {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 0 40px 0 !important;
    margin: 0 !important;
    border-top: none !important;
    /* FIX: Removed 'touch-action' so you can scroll down the page normally! */
    touch-action: auto !important;
    /* FIX: Removed scroll-snap so the automatic loop doesn't aggressively stutter */
    scroll-snap-type: none !important;
  }

  .about-pillars-grid::-webkit-scrollbar {
    display: none !important;
  }

  .pillars-marquee {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }

  .about-pillars-grid .pillar-card {
    flex: 0 0 85vw !important;
    width: 85vw !important;
    min-width: 85vw !important;
    max-width: 85vw !important;
    height: auto !important;
    min-height: 480px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    background: #111 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ========================================================== */
/* ===== LAPTOP ONLY: INCREASE WHITE SECTION LOGO SIZE  ===== */
/* ========================================================== */
@media (min-width: 1025px) and (max-width: 1920px) {

  /* Targets ONLY the logo used on light/white backgrounds */
  .navbar .logo-img[src*="white sections"] {
    height: 95px !important;
    /* Increase or decrease this number to dial in the perfect size */
    width: auto !important;
    max-width: none !important;
    transform: translateY(4px) !important;
    /* Optional: nudges it down slightly if the larger size makes it look too high */
  }
}

/* ============================================================== */
/* ===== FINAL FIX: MOBILE FOOTER LOGO SIZING               ===== */
/* ============================================================== */
@media (max-width: 768px) {

  .footer-section .fm-frame .fm-footer-logo,
  .footer-section .brand-col .fm-footer-logo {
    height: 70px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin-bottom: 20px !important;
  }
}

/* ============================================================== */
/* ===== FIX: SERVICES PAGE BENTO GRID BLOWOUT              ===== */
/* ============================================================== */

/* 1. Force grid tracks to strictly respect the 1/3 sizing */
@media (min-width: 1025px) {
  .bento-section .bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .bento-section .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .bento-section .bento-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2. Map the missing class from the HTML to the correct grid slots */
.bento-col-wide-top {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

@media (max-width: 1024px) {
  .bento-col-wide-top {
    grid-column: 1 / 2;
    grid-row: auto;
  }
}

/* 3. Allow all bento cards to shrink inside their forced columns */
.bento-card {
  min-width: 0 !important;
}

/* ============================================================== */
/* ===== FIX: SERVICES PAGE BENTO GRID BOUNDARY OVERFLOW    ===== */
/* ============================================================== */

/* 1. Lock the grid between the border lines AND push the cards inward */
.bento-section .bento-grid {
  width: calc(100% - (var(--grid-edge) * 2)) !important;
  max-width: none !important;
  margin: 0 var(--grid-edge) !important;
  padding: 0 40px !important;
  /* <--- PULLS CARDS AWAY FROM THE EDGE LINES */
  box-sizing: border-box !important;
  gap: 8px !important;
}

/* 2. Force columns to share space equally without blowing out */
@media (min-width: 1025px) {
  .bento-section .bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .bento-section .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 3. Ensure internal cards shrink cleanly inside their columns */
.bento-card,
.bento-split-col {
  min-width: 0 !important;
}

/* 4. Map the unmapped middle column so it doesn't overlap the right column */
.bento-col-wide-top {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

@media (max-width: 1024px) {
  .bento-col-wide-top {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
  }
}

/* 5. OPTIONAL: Reduce the inner padding to make the boxes themselves feel tighter */
.bento-section .bento-card,
.bento-section .bento-mini {
  padding: 50px !important;
  /* Reduces internal empty space (default was 40px) */
}

/* Hide specific elements on mobile devices */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* 1. Lock the grid near the vertical grid lines with a controlled gap */
.bento-section .bento-grid {
  width: auto !important;
  max-width: none !important;
  /* The + 24px creates the gap. Change 24px to 16px, 32px, etc., to dial it in */
  margin: 0 calc(var(--grid-edge) - var(--layout-pad) + 24px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  gap: 20px !important;
}

/* ============================================================== */
/* ===== UNIVERSAL BENTO GRID ALIGNMENT FIX                 ===== */
/* ============================================================== */

@media (min-width: 769px) {

  /* 1. Force the section to respect global padding, overriding inline HTML styles on industry pages */
  body .bento-section {
    padding-left: var(--layout-pad) !important;
    padding-right: var(--layout-pad) !important;
  }

  /* 2. Pull the grid outward from the safe content area to near the grid lines */
  body .bento-section .bento-grid {
    width: auto !important;
    max-width: none !important;
    /* var(--grid-buffer) is the exact distance between your content area and the line. 
       Subtracting 24px leaves a perfect 24px gap between the line and the cards. */
    margin-left: calc(-1 * (var(--grid-buffer) - 24px)) !important;
    margin-right: calc(-1 * (var(--grid-buffer) - 24px)) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    gap: 20px !important;
  }

  /* 3. Give the text inside the cards room to breathe */
  body .bento-section .bento-card,
  body .bento-section .bento-mini {
    padding: 40px !important;
  }
}

/* Creates a gap UNDER the CTA button in the mobile footer */
@media (max-width: 768px) {
  .footer-section .fm-frame .cta-pill {
    margin-bottom: 32px !important;
    /* Adjust this number for more or less gap */
  }
}

/* Aligns the Let's Connect CTA and text to the left on the About page */
.action-bottom {
  align-items: flex-start !important;
  text-align: left !important;
}

/* Restores the top and bottom horizontal frame lines on the Zero Missed Leads section */
body .since-sec .section-frame .sf-line.top,
body .since-sec .section-frame .sf-line.bottom {
  display: block !important;
}

/* Restores the frame lines on the Blog Hero and forces them to be dark so they are visible */
body .blog-hero-sec .section-frame .sf-line.top,
body .blog-hero-sec .section-frame .sf-line.bottom,
body .blog-hero-sec .sf-line.top,
body .blog-hero-sec .sf-line.bottom {
  display: block !important;
  background-color: rgba(0, 0, 0, 0.15) !important;
  /* Forces a dark grey line */
}

/* Restores the corner diamonds and forces them to be solid black */
body .blog-hero-sec .section-frame .sf-dia.tl,
body .blog-hero-sec .section-frame .sf-dia.tr,
body .blog-hero-sec .section-frame .sf-dia.bl,
body .blog-hero-sec .section-frame .sf-dia.br {
  display: block !important;
  background-color: #000000 !important;
  /* Forces black diamonds */
}

/* Fixes the vertical spacing on the Blog Hero so the text stays inside the frame lines */
@media (min-width: 769px) {
  body .blog-hero-sec {
    padding-top: 220px !important;
    /* Pushes the text safely below the top line */
    padding-bottom: 160px !important;
    /* Pushes the bottom line safely below the text */
  }
}

/* ============================================================== */
/* ===== UNIVERSAL BLOG HERO FIX (ALL PAGES & ARTICLES)     ===== */
/* ============================================================== */

/* 1. Fix the spacing so text doesn't overlap lines */
@media (min-width: 769px) {

  body.blog-page section:first-of-type,
  body .blog-hero-sec,
  body .article-hero-sec {
    padding-top: 220px !important;
    padding-bottom: 160px !important;
  }
}

/* 2. Force the horizontal lines to display in dark grey */
body.blog-page section:first-of-type .section-frame .sf-line.top,
body.blog-page section:first-of-type .section-frame .sf-line.bottom {
  display: block !important;
  background-color: rgba(0, 0, 0, 0.15) !important;
}

/* 3. Force the diamonds to display in black */
body.blog-page section:first-of-type .section-frame .sf-dia.tl,
body.blog-page section:first-of-type .section-frame .sf-dia.tr,
body.blog-page section:first-of-type .section-frame .sf-dia.bl,
body.blog-page section:first-of-type .section-frame .sf-dia.br {
  display: block !important;
  background-color: #000000 !important;
}

/* ============================================================== */
/* ===== HIDE BLOG HERO BORDERS ON MOBILE (SPECIFICITY FIX) ===== */
/* ============================================================== */

@media (max-width: 768px) {

  /* Hide the entire frame wrapper so the lines and diamonds inside instantly vanish */
  body.blog-page .section-framed:first-of-type .section-frame,
  body.blog-page .blog-hero-sec .section-frame,
  body.blog-page .article-hero-sec .section-frame {
    display: none !important;
  }
}

/* ============================================================== */
/* ===== FIX: CONTACT HERO MOBILE BOTTOM SPACING            ===== */
/* ============================================================== */

@media (max-width: 768px) {

  /* Shrink the padding at the bottom of the hero background */
  body .contact-hero-sec {
    padding-bottom: 30px !important;
  }

  /* Remove the extra margin pushing down from the title */
  body .contact-hero-title {
    margin-bottom: 0 !important;
  }

  /* Tighten the top padding of the white quote box below it */
  body .contact-split-left {
    padding-top: 30px !important;
  }
}

/* ============================================================== */
/* ===== FIX: "LET'S GET STARTED" CARD RATING (ABOUT & SERVICES) ===== */
/* ============================================================== */

@media (max-width: 768px) {

  body.about-page .capabilities-sec .cap-item.join-us-card .rating,
  body.services-page .capabilities-sec .cap-item.join-us-card .rating {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* ============================================================== */
/* ===== FIX: PRIVACY POLICY TEXT COLOR ON DARK BACKGROUND  ===== */
/* ============================================================== */

@media (max-width: 768px) {

  body.privacy-policy .policy-content h2,
  body.privacy-policy .policy-content h3 {
    color: #000000 !important;
    /* Forces black headings */
  }
}