/* ═══════════════════════════════════════════════════════════
   TECHBRIKS CONSULTING - PREMIUM STYLES
   Enterprise-Grade Professional Styling
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══ BRAND COLOR SYSTEM ═══ */
  --brand-blue: #0B3A5A;          /* Primary Brand Blue - Deep Tech Navy */
  --brand-blue-dark: #082d47;     /* Darker Blue for hover states */
  --brand-blue-light: #0d4a73;    /* Lighter Blue for accents */
  --brand-green: #3FA34D;         /* Secondary Brand Green - Fresh Technology Green */
  --brand-green-dark: #358a42;    /* Darker Green for hover states */
  --brand-green-light: #4db85c;   /* Lighter Green */
  --brand-green-tint: #e8f5ea;    /* Light green tint for backgrounds */
  --text-primary: #1F2937;        /* Neutral Text - Dark Gray */
  --bg-white: #FFFFFF;            /* Background White */
  --bg-light: #F8FAFC;            /* Background Light Gray */
  
  /* Legacy color mappings for compatibility */
  --brand-50: #e8f5ea;
  --brand-600: #0B3A5A;
  --brand-700: #082d47;
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════
   BRAND TYPOGRAPHY SYSTEM
   ═══════════════════════════════════════════════════════════ */

h1, h2, h3 {
  color: var(--brand-blue);
}

.text-brand-blue {
  color: var(--brand-blue) !important;
}

.text-brand-green {
  color: var(--brand-green) !important;
}

.bg-brand-blue {
  background-color: var(--brand-blue) !important;
}

.bg-brand-green {
  background-color: var(--brand-green) !important;
}

/* Logo Text Split Colors */
.logo-tech {
  color: var(--brand-blue);
}

.logo-briks {
  color: var(--brand-green);
}

/* ═══════════════════════════════════════════════════════════
   BRAND BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════ */

/* Primary Button - Enterprise Style with Brand Blue Only */
.btn-brand-primary,
.btn-primary {
  background-color: var(--brand-blue);
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-brand-primary:hover,
.btn-primary:hover {
  background-color: var(--brand-blue-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(11, 58, 90, 0.35);
}

.btn-brand-primary:active,
.btn-primary:active {
  background-color: var(--brand-blue) !important;
  transform: translateY(0) scale(0.98);
}

/* Secondary Button */
.btn-brand-secondary {
  background-color: transparent;
  border: 2px solid var(--brand-green);
  color: var(--brand-blue);
  transition: var(--transition-smooth);
}

.btn-brand-secondary:hover {
  background-color: var(--brand-green-tint);
  border-color: var(--brand-green);
}

/* ═══════════════════════════════════════════════════════════
   BRAND LINK SYSTEM
   ═══════════════════════════════════════════════════════════ */

a:hover {
  color: var(--brand-green);
}

/* Section divider using brand blue */
.section-divider {
  border-color: var(--brand-blue);
  opacity: 0.2;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* Critical fallbacks in case Tailwind CDN utilities fail to load in production
   - Keeps header spacing, page padding and mobile menu hidden by default so that
     the layout does not break when utility classes like pt-[72px], h-[72px],
     or lg:hidden are not available (common in strict CSP or blocked CDN cases). */
#main-content {
  padding-top: 72px; /* fallback for Tailwind's pt-[72px] */
}

.navbar nav > div {
  min-height: 72px; /* fallback for h-[72px] */
  display: flex;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════
   NAVIGATION - Enterprise Consulting Style
   ═══════════════════════════════════════════════════════════ */

.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* Desktop Nav Links - Professional Underline Effect */
.nav-link {
  position: relative;
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--brand-green) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--brand-green);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link:focus::after {
  width: calc(100% - 32px);
}

.nav-link.active {
  color: var(--brand-blue);
}

.nav-link.active::after {
  width: calc(100% - 32px);
  background: var(--brand-green);
}

/* ═══════════════════════════════════════════════════════════
   HEADER NAV FIXES - Alignment, spacing, wrapping (DESKTOP ONLY)
   Keeps existing colors, fonts, and hover effects unchanged.
   Uses flexbox to vertically center and enforce nowrap.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Ensure consistent spacing between top nav items */
  .navbar ul[role="menubar"] {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* consistent spacing between items */
  }

  /* Prevent any nav link from wrapping and vertically center text */
  .navbar .nav-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  /* Ensure CTA group items are aligned and do not wrap */
  .navbar > nav .ml-6 {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* Contact button - keep style but prevent wrapping and vertically center */
  .navbar .contact-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  /* Make row height consistent and center children vertically */
  .navbar > nav .flex.items-center {
    height: 72px; /* matches the header height class h-[72px] */
    align-items: center;
  }
}

/* Mobile Menu Slide Animation */
#mobile-menu {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: none; /* ensure hidden by default if Tailwind 'hidden' classes are missing */
}

/* When the script toggles .menu-open, explicitly show the menu */
#mobile-menu.menu-open {
  display: block;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop hidden by default; becomes visible when not .opacity-0 (script toggles this) */
#mobile-menu-backdrop {
  display: none;
}
#mobile-menu-backdrop:not(.opacity-0) {
  display: block;
}


/* Ensure mobile menu items are always clickable when menu is open */
#mobile-menu a {
  position: relative;
  z-index: 41;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Ensure backdrop handles clicks properly */
#mobile-menu-backdrop {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Hamburger Animation - X Transform */
#hamburger-top,
#hamburger-middle,
#hamburger-bottom {
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

.menu-open #hamburger-top {
  transform: translateY(6px) rotate(45deg);
}

.menu-open #hamburger-middle {
  opacity: 0;
  transform: scaleX(0);
}

.menu-open #hamburger-bottom {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobile-menu nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ═══════════════════════════════════════════════════════════
   GRADIENTS & EFFECTS
   ═══════════════════════════════════════════════════════════ */

.gradient-text {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Brand accent highlight */
.brand-accent {
  color: var(--brand-green);
}

/* Icon styling with brand green */
.brand-icon {
  color: var(--brand-green);
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-animate-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animate-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animate-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-animate.delay-100 { transition-delay: 0.1s; }
.scroll-animate.delay-200 { transition-delay: 0.2s; }
.scroll-animate.delay-300 { transition-delay: 0.3s; }
.scroll-animate.delay-400 { transition-delay: 0.4s; }
.scroll-animate.delay-500 { transition-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════
   CARDS & INTERACTIONS
   ═══════════════════════════════════════════════════════════ */

.service-card {
  transition: var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.service-card .icon-wrapper {
  transition: var(--transition-spring);
}

.service-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

/* ═══════════════════════════════════════════════════════════
   TEAM CARDS - Enhanced Enterprise Styling
   (Image movement disabled on hover - visuals limited to card container)
   ═══════════════════════════════════════════════════════════ */

.team-member {
  /* Keep layout stable - no translate on hover */
  transition: none;
}

/* Prevent any vertical translation or position shift on hover */
.team-member:hover {
  transform: none !important;
}

/* Ensure images do not move or scale on hover */
.team-member img,
.team-photo {
  transition: none !important;
  transform: none !important;
}

/* Explicitly override any hover rules that previously scaled images */
.team-member:hover img,
.team-card:hover .team-photo,
.team-photo:hover {
  transform: none !important;
  transition: none !important;
}

/* Hover styling should be limited to container (shadow/border-color) only */
.team-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  /* Optional subtle border color change retained from original design */
  border-color: rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

.scroll-animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Subtle fade-in with slide */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-in {
  animation: fadeSlideIn 0.6s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVE ELEMENTS - Enterprise Polish
   ═══════════════════════════════════════════════════════════ */

/* Card hover lift effect */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Subtle shadow grow on hover */
.hover-shadow-grow {
  transition: box-shadow 0.3s ease;
}

.hover-shadow-grow:hover {
  box-shadow: 0 8px 30px rgba(11, 58, 90, 0.12);
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-blue);
  border-radius: 6px;
  opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-green);
}

::selection {
  background-color: var(--brand-blue);
  color: white;
}

/* ═══════════════════════════════════════════════════════════
   IMAGE SECTIONS - Enhanced Responsive Styling
   ═══════════════════════════════════════════════════════════ */

/* Image hover base effect */
.image-hover {
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-hover:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(-4px);
}

/* Image zoom on hover */
.image-hover-zoom {
  overflow: hidden;
}

.image-hover-zoom img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-hover-zoom:hover img {
  transform: scale(1.03);
}

/* About section image fade-in */
.scroll-animate-left img {
  animation: fadeInImage 0.8s ease-out forwards;
}

@keyframes fadeInImage {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Philosophy section smooth fade */
.scroll-animate-right img {
  animation: fadeInImageRight 0.8s ease-out forwards;
}

@keyframes fadeInImageRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Respect prefers-reduced-motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .image-hover,
  .image-hover img,
  .image-hover-zoom img,
  .scroll-animate-left img,
  .scroll-animate-right img {
    transition: none;
    animation: none;
  }
  
  .image-hover:hover,
  .image-hover-zoom:hover img {
    transform: none;
  }
}

/* Responsive image sizing for different breakpoints */
@media (max-width: 1024px) {
  .image-hover img {
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 640px) {
  .image-hover {
    border-radius: 1rem;
  }
  
  .image-hover-zoom:hover img {
    transform: scale(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════
   CLIENT LOGO SECTION - VALUE DELIVERED FOR - MARQUEE CAROUSEL
   ═══════════════════════════════════════════════════════════ */

/* Carousel Container - Hides overflow for seamless loop */
.carousel-container {
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
  margin: 2rem 0 0 0;
  background: linear-gradient(to right, transparent 0%, white 10%, white 90%, transparent 100%);
}

/* Carousel Track - True marquee animation with duplicated items */
.carousel-track {
  display: flex;
  gap: 2rem;
  animation: carouselScroll 60s linear infinite;
  width: fit-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Pause animation on hover (container or track) */
.carousel-container:hover .carousel-track,
.carousel-track:hover {
  animation-play-state: paused;
}

/* Infinite scrolling animation - LEFT TO RIGHT motion (continuous) */
@keyframes carouselScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Individual carousel item - fixed sizing to prevent stretching */
.carousel-item {
  flex: 0 0 200px; /* fixed card width to prevent stretching */
  max-width: 220px;
  box-sizing: border-box;
  height: auto;
  padding: 0 0.5rem;
}

/* Tablet: show 2-3 logos */
@media (max-width: 1023px) {
  .carousel-item {
    flex: 0 0 180px;
    max-width: 200px;
    padding: 0 0.5rem;
  }
}

/* Mobile: show 1-2 logos */
@media (max-width: 767px) {
  .carousel-item {
    flex: 0 0 160px;
    max-width: 180px;
    padding: 0 0.375rem;
  }
  
  .carousel-track {
    gap: 1.25rem;
    animation-duration: 45s;
  }
}

/* Client logo card styles */
.client-logo-item {
  border: 1px solid rgba(11, 58, 90, 0.1);
  background-color: #FFFFFF;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1.75rem;
  border-radius: 0.875rem;
  height: 180px;
  width: 100%;
  will-change: box-shadow, border-color, transform;
  box-shadow: 0 2px 8px rgba(11, 58, 90, 0.06);
}

.client-logo-item:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(11, 58, 90, 0.15);
  border-color: rgba(63, 163, 77, 0.25);
}

.client-logo-item img {
  transition: opacity 0.3s ease-in-out;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.client-logo-item:hover img {
  opacity: 0.95;
}

/* Responsive logo card heights */
@media (max-width: 1024px) {
  .client-logo-item {
    height: 160px;
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .client-logo-item {
    height: 140px;
    padding: 1.75rem 1.25rem;
  }
}

/* Accessibility - Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    animation: none;
    transform: translateX(0);
  }
}

/* Navigation Links - Change text color to Brand Blue */
.nav-link {
  color: var(--brand-blue) !important;
}

.nav-link:hover {
  color: var(--brand-green) !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER COPYRIGHT TEXT - VISIBILITY FIX
   ═══════════════════════════════════════════════════════════ */

/* Ensure footer copyright paragraph and its inline children are pure white for optimal contrast */
footer p.text-gray-400 {
  color: #FFFFFF !important;
}

/* Keep broader fallback for other footer text that may use the utility class */
footer .text-gray-400 {
  color: #FFFFFF !important;
}

/* Specifically override any inline color applied to spans inside the copyright paragraph
   (targets the bottom-bar copyright paragraph and its children only) */
footer .mt-12.pt-8 > p.text-gray-400,
footer .mt-12.pt-8 > p.text-gray-400 * {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════
   TEAM CARD STYLING - MINIMAL CLEAN DESIGN
   ═══════════════════════════════════════════════════════════ */

/* Team card container with subtle shadow */
.team-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Soft hover effect for subtle interactivity */
.team-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Team image container - portrait aspect ratio to avoid head cropping */
.team-image {
  position: relative; /* container is relative per requirement */
  width: 100%;
  aspect-ratio: 4 / 5; /* consistent portrait ratio */
  display: flex;
  align-items: flex-start; /* align image to top so head remains visible */
  justify-content: center; /* center horizontally */
  background-color: transparent;
}

.team-photo {
  position: static; /* image must be static, not absolute */
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain; /* ensure entire head & shoulders visible */
  object-position: center top; /* keep head aligned to top center */
  display: block;
}

/* Ensure card body does not stretch and keeps consistent layout */
.team-card > .p-6 {
  flex: 0 0 auto;
}

/* Team member article styling */
.team-member {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════
   FULL TEAM PAGE GRID - RESPONSIVE LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* Full team grid container */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Desktop: 3 cards per row */
  gap: 2rem;
  width: 100%;
  grid-auto-rows: 1fr; /* ensure equal-height rows so cards in same row match height */
  align-items: start; /* align items to top to avoid uneven vertical stretching */
  justify-items: start; /* left-align items in partially-filled rows */
}

/* Team grid item */
.team-grid-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-self: stretch; /* ensure item stretches to fill grid row height */
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Staggered animation delays for grid items */
.team-grid-item:nth-child(1) { animation-delay: 0s; }
.team-grid-item:nth-child(2) { animation-delay: 0.1s; }
.team-grid-item:nth-child(3) { animation-delay: 0.2s; }
.team-grid-item:nth-child(4) { animation-delay: 0.3s; }
.team-grid-item:nth-child(5) { animation-delay: 0.4s; }
.team-grid-item:nth-child(6) { animation-delay: 0.5s; }

/* Team card hover animation */
.team-card-full {
  background-color: #F8FAFC;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
}

/* Hover animation - subtle lift and enhanced shadow */
.team-card-full:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-8px);
}

/* Team image wrapper with rounded corners */
.team-image-full {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: transparent;
  overflow: hidden;
}

/* Image rounded corners for aesthetic */
.team-image-full img {
  position: static;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  border-radius: 0.5rem 0.5rem 0 0;
}

/* Team info section */
.team-info {
  padding: 1.5rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Team member name */
.team-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0B3A5A;
  margin-bottom: 0.5rem;
}

/* Team member title */
.team-title {
  font-size: 0.875rem;
  color: #6B7280;
}

/* LinkedIn-style team card - circular photo, soft shadow, rounded corners */
.linkedin-card {
  background: var(--bg-white);
  border-radius: 0.75rem;
  padding: 3.5rem 1.75rem 1.75rem;
  box-shadow: 0 8px 24px rgba(11, 58, 90, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.linkedin-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(11, 58, 90, 0.12);
}

/* Circular profile photo - improved cross-browser, fixed square container */
.linkedin-photo-wrapper {
  --profile-size: 128px;
  margin-top: -64px;
  width: var(--profile-size);
  height: var(--profile-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e8f5ea; /* subtle neutral fallback when image fails to load */
  box-shadow: 0 6px 18px rgba(11, 58, 90, 0.12);
  position: relative; /* for pseudo-element ring and fallback handling */
}

/* White ring effect (visual boundary for circular image) */
.linkedin-photo-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Image fills square container, maintains aspect ratio with object-fit:cover */
.linkedin-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -o-object-fit: cover; /* Opera */
  object-position: center;
  border-radius: 0; /* radius applied to wrapper only */
  background-color: transparent;
}

/* Responsive profile image sizes */
@media (max-width: 767px) {
  .linkedin-photo-wrapper { --profile-size: 112px; }
}
@media (max-width: 420px) {
  .linkedin-photo-wrapper { --profile-size: 96px; }
}

/* Fallback for older browsers that don't support object-fit */
@supports not (object-fit: cover) {
  .linkedin-photo-wrapper { position: relative; }
  .linkedin-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
  }
}

/* Handle missing/broken images gracefully (non-JS): keep the wrapper's background visible */
.linkedin-photo-wrapper:empty { background-color: #e8f5ea; }

/* Ensure any JS-applied .image-fallback remains visible */
.linkedin-photo.image-fallback { opacity: 0.95; }

/* Card content */
.linkedin-body { margin-top: 0.5rem; width: 100%; text-align: center; padding: 0 0.25rem; }
.linkedin-name { font-size: 1.125rem; font-weight: 700; color: var(--brand-blue); margin: 0.25rem 0; }
.linkedin-title { color: #6b7280; font-size: 0.95rem; margin-bottom: 0.25rem; }
.linkedin-experience { color: #374151; font-size: 0.9rem; font-weight:600; margin-bottom: 0.75rem; }
.linkedin-desc { color: #4b5563; font-size: 0.95rem; margin-bottom: 0.75rem; line-height:1.4; }

/* Core Expertise chips */
.linkedin-expertise { margin-top: 0.5rem; }
.linkedin-expertise strong { display:block; color:var(--brand-blue); margin-bottom: 0.5rem; font-weight:700; }
.linkedin-expertise ul { list-style: none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; }
.linkedin-expertise li { background: rgba(63,163,77,0.08); color:var(--brand-blue); padding:0.35rem 0.6rem; font-size:0.85rem; border-radius:999px; }

/* Minimal location pin icon - inline and vertically centered with slight spacing */
.location-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle; /* ensure vertical centering with text */
  margin-right: 6px; /* slight spacing between icon and location text */
}
.location-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Responsive tweaks for photo and spacing */
@media (max-width: 767px) {
  /* Use the wrapper variable so image keeps aspect ratio and is cropped, not squashed */
  .linkedin-photo-wrapper { --profile-size: 112px; }
  .team-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Responsive team grid - Tablet: 2 columns */
@media (max-width: 1023px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------
   LAYOUT FIX: Treat .team-grid as a semantic wrapper and use the
   section's inner container as a single responsive CSS Grid so that
   ALL .team-grid-item elements (even those placed after the .team-grid
   in the HTML) participate in the same 3/2/1 column flow. This lets
   the first item of the last row move up to fill the previous row,
   ensuring rows contain exactly 3 items where possible.

   - No HTML changes
   - CSS Grid + display:contents for modern browsers
   - Header and Back-to-Home are forced to span full width so they
     don't interfere with the grid flow
   -------------------------------------------------------------------- */

/* Make the wrapper transparent to layout so its children become direct children
   of the parent for grid placement (keeps semantic grouping in DOM) */
.team-grid { display: contents; }

/* Turn the section inner container (keeping it scoped to #full-team) into a grid */
#full-team > .max-w-7xl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Make header and back link span across all columns so the grid is limited to items */
#full-team > .max-w-7xl > div:first-child,
#full-team > .max-w-7xl > .mt-16 {
  grid-column: 1 / -1;
}

/* Ensure team items use full column width and maintain existing visual styling */
#full-team > .max-w-7xl > .team-grid-item {
  width: 100%;
  box-sizing: border-box;
}

/* Responsive behavior: 2 columns on tablet, 1 column on mobile */
@media (max-width: 1023px) {
  #full-team > .max-w-7xl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 767px) {
  #full-team > .max-w-7xl {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  /* Center single-column cards and cap width to match existing mobile style */
  #full-team > .max-w-7xl > .team-grid-item {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop fallback: keep linkedin-card min-height consistent */
@media (min-width: 1024px) {
  .linkedin-card { min-height: 480px; }
}

/* Desktop: When there are exactly two team cards, center them as before */
@media (min-width: 1024px) {
  .team-grid:has(> :nth-child(2):nth-last-child(1)) {
    grid-template-columns: repeat(2, minmax(320px, 360px));
    gap: 2rem;

    justify-content: center;
    max-width: calc(360px * 2 + 2rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  #team .max-w-5xl:has(> .team-member:nth-child(2):nth-last-child(1)) {
    display: grid; /* ensure grid behavior */
    grid-template-columns: repeat(2, minmax(320px, 360px));
    gap: 2rem;
    justify-content: center;
    max-width: calc(360px * 2 + 2rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}


/* Responsive team grid - Mobile: 1 column */
@media (max-width: 767px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Responsive team page - mobile version */
@media (max-width: 767px) {
  /* Mobile: 1 card per row, centered */
  .team-member {
    flex-basis: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Responsive team grid layout - original for Leadership section on index */
@media (max-width: 1023px) {
  /* Tablet: 2 cards per row */
  .team-member {
    flex-basis: calc(50% - 1.5rem);
  }
}

/* --------------------------------------------------------------------
   FIX: Ensure any .team-grid-item elements that sit outside the
   main .team-grid (e.g., due to accidental closing tags) visually match
   the inside-grid items in width, height, spacing, and alignment.

   - CSS-only fix (no HTML changes)
   - Targets all siblings after .team-grid using the general sibling selector
   - Mimics 3/2/1 column behavior (desktop/tablet/mobile) for consistency
   - Forces consistent min-heights to avoid layout shifts
   -------------------------------------------------------------------- */

/* Desktop (3 columns) */
.team-grid ~ .team-grid-item {
  display: inline-flex;         /* behave like grid columns */
  vertical-align: top;
  align-items: stretch;
  margin: 0 2rem 2rem 0;        /* match .team-grid gap (2rem) */
  width: calc((100% - 4rem) / 3); /* column width matching grid */
  box-sizing: border-box;
}
/* Prevent trailing gap on the last of this sibling group */
.team-grid ~ .team-grid-item:last-of-type {
  margin-right: 0;
}

/* Ensure the inner card matches other cards in height and padding */
.team-grid ~ .team-grid-item .linkedin-card {
  height: 100%;
  min-height: 480px;            /* consistent visual height on desktop */
}

/* Tablet (2 columns) */
@media (max-width: 1023px) {
  .team-grid ~ .team-grid-item {
    width: calc((100% - 1.5rem) / 2); /* grid gap becomes 1.5rem */
    margin: 0 1.5rem 1.5rem 0;
  }
  /* Ensure every 2nd item does not carry extra right margin */
  .team-grid ~ .team-grid-item:nth-of-type(2n) { margin-right: 0; }

  .team-grid ~ .team-grid-item .linkedin-card {
    min-height: 420px;
  }
}

/* Mobile (1 column) - center the group and make items full-width like others */
@media (max-width: 767px) {
  .team-grid ~ .team-grid-item {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 1.5rem;
  }
  .team-grid ~ .team-grid-item .linkedin-card {
    min-height: auto; /* let content set height on very small screens */
  }
}

/* Small visual tweak: make all linkedin-card min-height consistent on desktop */
@media (min-width: 1024px) {
  .linkedin-card { min-height: 480px; }
}


/* ═══════════════════════════════════════════════════════════
   SERVICES GRID - EQUAL HEIGHT CARDS LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* Services grid container using CSS Grid for equal height cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
}

/* Service card flex layout for proper content alignment */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure flex-1 content area grows to fill available space */
.service-card > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

@media (max-width: 767px) {
  /* Mobile: 1 column */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}