/* Logo Gallery Section: Horizontal auto-scrolling logos */
.logo-gallery-section {
    width: 100vw;
    background: #fff;
    padding: 2.5rem 0 2rem;
    overflow: hidden;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin: 5rem 0 2rem;
}
.logo-gallery-scroll {
    width: 100%;
    overflow: hidden;
}
.logo-gallery-track {
    display: flex;
    align-items: center;
    gap: 6rem;
    animation: logo-scroll 28s linear infinite;
    width: max-content;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.logo-gallery-img {
    height: 56px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0.2) brightness(0.95) contrast(1.1);
    opacity: 0.92;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.logo-gallery-img:hover {
    filter: grayscale(0) brightness(1.1) contrast(1.2) drop-shadow(0 2px 8px #e0e0e0);
    opacity: 1;
    transform: scale(1.07);
}
@keyframes logo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* FAQ accordion content */
.accordion-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0.5rem 0;
    transition: none;
}

@media (max-width: 767px) {
    .logo-gallery-img {
        height: 36px;
    }
    .logo-gallery-section {
        padding: 1.2rem 0 1rem;
    }
    .logo-gallery-track {
        gap: 3rem;
    }
}
/* Go Digital navbar button */
.go-digital-btn {
    background: var(--accent, #1a73e8);
    color: #fff !important;
    border: none;
    border-radius: 2em;
    padding: 0.5em 1.4em;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 2px 8px rgba(26,115,232,0.08);
    margin-left: 1.2em;
    display: flex;
    align-items: center;
    height: 2.5rem;
    position: relative;
    top: -6px;
}
.go-digital-btn:hover {
    background: #1558b0;
    color: #fff;
}
/* Hero subtitle (homepage) - smaller and gray */
#typing-effect {
    font-size: 1.25rem !important;
    color: #888 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-family: inherit !important;
    line-height: 1.8 !important;
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
}
/* Hero animation: luxurious layered animated gradient + floating orbs */
.hero {
    position: relative;
    overflow: hidden;
}

/* Subtle light-gray grid overlay for hero (uses ::before so it doesn't affect layout)
   - thin lines forming equal squares
   - very low opacity so content remains clearly readable
   - placed below hero content (container has z-index:2) */
.hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1; /* below content (hero .container uses z-index:2) */
    /* Much larger grid squares per user request. Slightly thicker, slightly stronger lines so large squares remain visible. */
    background-image:
        linear-gradient(rgba(26,26,26,0.12) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(26,26,26,0.12) 1.5px, transparent 1.5px);
    background-size: 160px 160px; /* quite large squares on desktop */
}

/* Slightly denser grid on small screens for perceived scale */
@media (max-width: 767px) {
    .hero::before {
        /* mobile: scale down the large square for smaller screens */
        background-size: 96px 96px;
    }
}

/* Soft white fade from all four edges so grid lines disappear toward page edges */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* above the grid (::before z-index:1) but below hero content (ensure content z-index > 1) */
    /* Four white->transparent gradients on the edges so grid lines fade toward white edges.
       Use explicit background shorthand with position/size for broad browser support. */
            background:
                /* top: slightly reduced so upper-right is weaker */
                linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0) 100%) no-repeat top/100% 8%,
                /* bottom: significantly increased so bottom-left is much stronger */
                linear-gradient(to top,    #ffffff 0%, rgba(255,255,255,0) 100%) no-repeat bottom/100% 40%,
                /* left: increase horizontal reach a lot to make left fades much stronger */
                linear-gradient(to right,  #ffffff 0%, rgba(255,255,255,0) 100%) no-repeat left/65% 100%,
                /* right: decrease horizontal reach so right/upper-right is weaker */
                linear-gradient(to left,   #ffffff 0%, rgba(255,255,255,0) 100%) no-repeat right/15% 100%;
    mix-blend-mode: normal;
}

@media (max-width: 767px) {
    .hero::after {
        /* slightly wider fades on small screens for perceived scale */
        /* Mobile: increase left/bottom fades, reduce right/top fades per request */
        background-size: 100% 30%, 100% 40%, 72% 100%, 18% 100%;
    }
}

.hero-animation {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    display: none; /* hidden for clean white background */
}

/* Canvas for index hero particle background */
.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* behind orbs/gradient */
    pointer-events: none;
    display: block;
}

/* Ribbons-specific styling: soft blur and blend for a luxurious glow */
.hero-canvas {
    filter: blur(36px) saturate(120%);
    mix-blend-mode: screen;
    opacity: 0.96;
    will-change: transform;
}

.hero-gradient {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(600px 420px at 18% 28%, rgba(255,140,66,0.15), transparent 20%),
        radial-gradient(520px 360px at 82% 72%, rgba(59,130,246,0.12), transparent 18%);
    background-size: 180% 180%, 180% 180%;
    background-position: 0% 50%, 100% 50%;
    filter: blur(48px) saturate(115%);
    transform-origin: center;
    animation: shiftGradient 4s ease-in-out infinite;
    mix-blend-mode: multiply;
    opacity: 0.5;
    z-index: 0;
    will-change: transform, background-position;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes rotateGradient {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes shiftGradient {
    0% { background-position: 0% 50%, 100% 50%; transform: rotate(0deg); }
    50% { background-position: 18% 42%, 82% 58%; transform: rotate(4deg); }
    100% { background-position: 0% 50%, 100% 50%; transform: rotate(0deg); }
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px) saturate(120%);
    mix-blend-mode: multiply;
    opacity: 0.3;
    transform: translate3d(0,0,0);
    z-index: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-orb.orb-1 {
    width: 360px; height: 360px;
    left: 6%; top: 10%;
    background: radial-gradient(circle at 30% 30%, rgba(255,140,66,0.18), rgba(255,120,60,0.06));
    animation: float1 3s ease-in-out infinite;
    will-change: transform;
}
.hero-orb.orb-2 {
    width: 240px; height: 240px;
    right: 8%; top: 20%;
    background: radial-gradient(circle at 40% 40%, rgba(59,130,246,0.14), rgba(30,90,200,0.04));
    animation: float2 4s ease-in-out infinite;
    will-change: transform;
}
.hero-orb.orb-3 {
    width: 300px; height: 300px;
    left: 20%; bottom: -4%;
    background: radial-gradient(circle at 35% 35%, rgba(100,200,150,0.12), rgba(60,150,100,0.03));
    animation: float3 4s ease-in-out infinite;
    will-change: transform;
}
.hero-orb.orb-4 {
    width: 180px; height: 180px;
    right: 22%; bottom: -6%;
    background: radial-gradient(circle at 25% 25%, rgba(255,180,120,0.12), rgba(200,120,80,0.02));
    animation: float4 2.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes float1 {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(36px,-56px,0) scale(1.04); }
    100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes float2 {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-44px,-32px,0) scale(1.03); }
    100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes float3 {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(28px,-72px,0) scale(1.05); }
    100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes float4 {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-20px,-44px,0) scale(1.03); }
    100% { transform: translate3d(0,0,0) scale(1); }
}

/* Ensure hero content sits above decorative layers */
.hero > .container,
.hero .hero-content {
    position: relative;
    z-index: 120;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Bottom gradient to blend hero into page background */
.hero-bottom-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    pointer-events: none;
    z-index: 3; /* sits above animation but below hero content */
    /* Blend from transparent to page background for a smooth bottom edge */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 100%);
    transition: opacity 0.35s ease;
    display: none; /* not needed without animation */
}
.hero-canvas {
    display: none; /* using CSS-only hero animation for a simpler, lighter effect */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Enable momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
    /* Force GPU acceleration for smooth scrolling */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    /* Optimize rendering */
    text-rendering: optimizeSpeed;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* GPU acceleration for smooth transforms */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: calc(2rem - 7.5px) 0; /* responsive reduction */
    width: 100%;
    /* height: 100%; Make nav fill header height */
}
.navbar-cta-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 2rem;
    padding: 0.7em 1.6em;
    background: var(--accent,#1a73e8);
    color: #fff;
    border-radius: 2em;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(26,115,232,0.08);
    z-index: 10;
    white-space: nowrap;
}
.navbar-cta-btn:hover {
    background: #1558b0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: opacity 0.3s;
}

.logo img {
    width: 96px;
    height: 96px;
    display: inline-block;
    vertical-align: middle;
}

.logo:hover {
    opacity: 0.8;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    font-size: 1.0rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

.nav-menu a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.nav-menu a.active {
    color: var(--text);
    font-weight: 600;
}

.nav-menu a:hover {
    color: var(--text);
}

.nav-menu li a {
  position: relative;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
    bottom: -8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #1a1a1a 0%, #666 100%);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.2s, transform 0.2s;
}
.nav-menu li a:hover::after,
.nav-menu li a:focus::after,
.nav-menu li a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu {
    display: none;
    background: #f5f5f5;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu.active {
    display: block;
}

.mobile-menu ul {
    list-style: none;
    padding: 1rem 0;
}

.mobile-menu a {
    display: block;
    padding: 0.75rem 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s;
}

.mobile-menu a:hover {
    color: var(--text);
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 130; /* ensure inner content stacks above hero overlays */
}

/* Ensure hero text remains dark and is not altered by decorative gradients/overlays
   Force normal blending and explicit text color for all elements inside hero content. */
.hero .hero-content,
.hero .hero-content * {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important; /* Safari/WebKit */
    mix-blend-mode: normal !important;
}

.hero-left {
    animation: fadeInUp 0.8s ease;
}

.services-list {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3rem;
    margin-bottom: 2rem;
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: center;
}

.services-list span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.services-list span span {
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    display: inline-block;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.scroll-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
}

.scroll-indicator svg {
    transition: transform 0.4s cubic-bezier(.4,1.6,.6,1), stroke 0.3s;
}
}

.scroll-indicator:hover {
    color: #3b82f6;
}

.scroll-indicator:hover svg {
    transform: translateY(8px) scale(1.15);
    stroke: #3b82f6;
    filter: drop-shadow(0 4px 12px rgba(59,130,246,0.18));
}
}

.hero-right {
    position: relative;
    height: 500px;
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-image {
    position: relative;
    height: 100%;
    background: linear-gradient(135deg, #ff6b35, #ff8c42, #3b82f6);
    border-radius: 1.5rem;
    overflow: hidden;
}

.section {
    padding: 5rem 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.section-number {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.case-study-card {
    position: relative;
    height: 20rem;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s cubic-bezier(.22,.61,.36,1);
}

.case-study-card:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.15), 0 1.5px 8px 0 rgba(0,0,0,0.08);
}

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

.case-study-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(20,20,20,0.18) 0%, rgba(0,0,0,0.32) 80%, rgba(0,0,0,0.08) 100%);
    transition: opacity 0.3s, background 0.3s;
}

.case-study-card:hover .case-study-overlay {
    opacity: 1;
    background: linear-gradient(120deg, rgba(30,30,30,0.28) 0%, rgba(0,0,0,0.42) 80%, rgba(0,0,0,0.18) 100%);
}

.case-study-tag {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.case-study-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.case-study-icon {
    display: none;
}

.case-study-card:hover .case-study-icon {
    opacity: 1;
}

.capabilities {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.capability-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 1.5rem 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.capability-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 500;
    transition: color 0.3s;
    user-select: none;
    width: 100%;
}

.capability-header:hover {
    color: #ccc;
}

.capability-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s;
    display: inline-block;
    transform: rotate(0deg);
}

.capability-item.active .capability-icon {
    transform: rotate(90deg); /* Rotates arrow down when active */
}

.capability-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    text-align: center;
    width: 100%;
}

.capability-item.active .capability-content {
    max-height: 500px;
}

.capability-text {
    padding-top: 1rem;
    color: #666;
    line-height: 1.7;
    text-align: center;
}

.experience-section {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
}

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

.experience-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.experience-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ffffff, transparent, #ffffff);
}

.experience-content {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.experience-label {
    font-size: 0.875rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.experience-number {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
}

.experience-number span {
    color: #ff6b35;
}

.experience-years {
    font-size: 2rem;
    font-weight: 500;
    color: #000;
}

.experience-description {
    font-size: 1.125rem;
    color: #000;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.experience-est {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.contact-section {
    max-width: 64rem;
    margin: 0 auto;
}

.contact-intro {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    line-height: 1.8;
}

.form-group {
    margin-bottom: 2rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.form-input,
.form-textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.75rem 0;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--text);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-light);
}

.form-textarea {
    resize: none;
}

.form-submit {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
    background: white;
    color: black;
    padding: 1rem 2rem;
    border: none;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.4s cubic-bezier(.22,.61,.36,1), transform 0.3s cubic-bezier(.22,.61,.36,1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 2px 8px 0 rgba(60,60,60,0.10);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.form-submit::before {
    display: none;
}

.form-submit:hover {
    background: linear-gradient(90deg, #ff8c42 0%, #ff6b35 60%, #3b82f6 100%);
    color: white;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.12);
    transform: translateY(-2px) scale(1.04);
}

.form-submit svg {
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
}

.form-submit:hover svg {
    transform: translateX(4px) scale(1.1);
}

.form-submit span, .form-submit svg {
    position: relative;
    z-index: 1;
    margin-left: 0.5em;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}

footer {
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    padding: 3rem 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s;
}

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

.footer-social {
    text-align: right;
}

.footer-copyright {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.footer-copyright a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-copyright a:hover {
    color: var(--text-secondary);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Premium Capabilities Section Styles */
.premium-capabilities {
    background: linear-gradient(120deg, #f9f9f9 60%, #f0f0f0 100%);
    border-radius: 2rem;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.06), 0 1.5px 8px 0 rgba(0,0,0,0.04);
    margin-top: 5rem;
    margin-bottom: 5rem;
    padding: 4rem 0 4rem 0;
}
.premium-capabilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    justify-items: center;
}
@media (min-width: 768px) {
    .premium-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1200px) {
    .premium-capabilities-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.premium-capability-card {
    background: rgba(255,255,255,0.98);
    border-radius: 1.5rem;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.06);
    padding: 2.5rem 2rem 2rem 2rem;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e0e0e0;
    position: relative;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.premium-capability-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 12px 36px 0 rgba(0,0,0,0.12);
    border-color: #ff8c42;
}
.testimonial-mini {
    background: rgba(0,0,0,0.02);
    border-radius: 0.75rem;
    transition: transform 0.28s cubic-bezier(.22,.61,.36,1), box-shadow 0.28s cubic-bezier(.22,.61,.36,1), border-color 0.28s;
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.testimonial-mini:hover,
.testimonial-mini:focus {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.10);
    border-color: var(--accent);
    outline: none;
}
.testimonial-mini:focus {
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.10), 0 0 0 4px rgba(255,140,66,0.12);
}

/* Make sure mini testimonials are keyboard-focusable when needed */
.testimonial-mini[tabindex] { cursor: pointer; }
.premium-capability-icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.premium-capability-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
}
.premium-capability-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .experience-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hero-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-title {
        font-size: 5rem;
    }
    .hero-right {
        height: 600px;
    }
    .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .section-title {
        font-size: 3.5rem;
    }
    .experience-number {
        font-size: 8rem;
    }
}

/* Make form fields inside premium cards left-aligned (labels and inputs start at row start) */
.premium-capability-card form,
.premium-capability-card .form-group,
.premium-capability-card .form-label,
.premium-capability-card .form-input,
.premium-capability-card .form-textarea {
    text-align: left;
}

/* Ensure inputs inside cards stretch full width */
.premium-capability-card .form-input,
.premium-capability-card .form-textarea {
    width: 100%;
}

@media (max-width: 767px) {
    /* Show the same navbar on mobile: make links touch-friendly and allow wrapping */
    .nav-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        padding: 0.25rem 0;
    }
    /* hide the hamburger so mobile shows same nav */
    .mobile-menu-btn {
        display: none;
    }
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.15;
        padding: 0 0.5rem;
        word-break: break-word;
    }
    .section-title {
        font-size: 2rem;
    }
    .experience-number {
        font-size: 4rem;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-social {
        text-align: left;
    }
    .hero-content {
        padding: 0 0.5rem;
    }
    .services-list {
        flex-wrap: wrap;
        gap: 1rem;
        font-size: 0.9rem;
        margin-top: 2rem;
    }
    .hero {
        padding: 6rem 0 2rem;
    }
    .hero-right {
        height: 300px;
        min-width: 0;
    }

    /* Tighter header/nav on small screens */
    nav {
        /* reduce mobile nav height proportionally (total -15px) */
        padding: calc(1rem - 7.5px) 0;
        align-items: center;
        gap: 0.5rem;
    }
    .logo img {
        width: 48px;
        height: 48px;
    }
    .logo { font-size: 1rem; }

    /* Position mobile menu as an overlay/dropdown under the fixed header */
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none; /* default hidden, toggled via .active */
        z-index: 999; /* sit under header but above page content */
        background: #ffffff; /* match header/background */
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .mobile-menu.active {
        display: block;
    }

    .mobile-menu .container {
        padding: 1rem 1.25rem;
    }
    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    .mobile-menu a {
    color: var(--text-secondary);
    padding: 0.75rem 0;
    display: block;
}
    .mobile-menu a:hover { color: var(--text); }
}

:root{
    --bg: #ffffff;
    --text: #1a1a1a;
    --text-secondary: #4a4a4a;  /* Replaces #666 on light bg - WCAG AA compliant */
    --text-muted: #6b6b6b;      /* Replaces #999 on light bg - WCAG AA compliant */
    --text-light: #8a8a8a;      /* For subtle text on light bg */
    --text-dark-bg: #e8e8e8;    /* Replaces #ccc on dark bg - better contrast */
    --text-dark-muted: #b8b8b8; /* Replaces #999/#bbb on dark bg */
    --muted: #666666;
    --border: #e0e0e0;
    --accent: #ff8c42;
    --accent-50: #f9f9f9;
    --bg-dark: #0a0a0a;         /* Darkest sections */
    --bg-dark-1: #0f0f0f;       /* Dark sections */
    --bg-dark-2: #181818;       /* Card backgrounds on dark */
    --bg-dark-3: #232323;       /* Lighter dark cards */
    --radius: 16px;
    --container-max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }

    /* Section spacing */
    .section {
      padding: 6rem 1rem; /* ~py-24 */
    }

    /* Container center and responsive paddings */
    .container {
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;  /* base px-4 */
      padding-right: 1rem;
    }
    @media (min-width: 640px) { /* sm */
      .container{ padding-left:1.5rem; padding-right:1.5rem; }
    }
    @media (min-width: 1024px) { /* lg */
      .container{ padding-left:2rem; padding-right:2rem; }
    }

    /* Heading */
    .section .heading-wrap { margin-bottom: 4rem; } /* mb-16 */
    .faq-title {
      font-size: 2.25rem;            /* text-4xl */
      line-height: 3.25rem;          /* leading-[3.25rem] */
      font-weight: 800;              /* font-bold */
      text-align: center;
      margin: 0;
      color: var(--text);
    }

    /* Accordion group */
    .accordion-group { max-width: 900px; margin: 0 auto; }

    .accordion {
      border: 1px solid var(--border);
      padding: 1rem;                /* p-4 */
      border-radius: var(--radius);
    background: var(--bg);
      transition: all 0.25s ease;
      margin-bottom: 2rem;          /* mb-8 */
      overflow: visible;
    }



    .accordion.active {
        background: var(--bg);
        border-color: var(--border);
        box-shadow: none;
    }

    .accordion:hover {
        border-color: var(--accent);
    }

    .accordion-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      text-align: left;
    }

    .accordion-toggle h5 {
      font-size: 1.125rem;      /* text-lg */
      margin: 0;
      font-weight: 600;
      color: var(--text);
      line-height: 1.5;         /* leading-8 equivalent */
      transition: color .2s ease, font-weight .2s ease;
    }

    /* When accordion is active, make the title accent colored and slightly bolder */

    /* Remove accent color and bold for active question */

    /* Icon group (plus/minus) */
    .icon {
      width: 1.5rem;
      height: 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 1rem;
      flex-shrink: 0;
    }
    /* Two svg states inside .icon: show/hide handled by CSS */
    .icon .plus { display: block; }
    .icon .minus { display: none; }

    .accordion.active .icon .plus { display: none; }
    .accordion.active .icon .minus { display: block; }

    /* Content area with smooth height/overflow animation */
    .accordion-content {
      width: 100%;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.25s ease;
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      margin-top: 0.75rem;
    }

    /* When active expand to a comfortable size; since we don't know exact content height use large max-height */
    .accordion.active .accordion-content {
      max-height: 400px; /* large enough for content */
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .accordion-content p {
      margin:0;
      font-size: 1rem; /* text-base */
    color: var(--text);
      line-height: 1.5; /* leading-6 */
    }

    /* Hover states */
    .accordion-toggle:hover h5 { color: var(--accent); }

    /* small visual tweaks for large screens */
    @media(min-width:1024px){
      .accordion { padding: 1.25rem; } /* lg:p-4 similar */
    }

/* ========================================
   COLOR UTILITIES & DARK SECTION OVERRIDES
   Optimized for WCAG AA contrast compliance
   ======================================== */

/* Dark section text colors for optimal contrast */
[style*="background:#0f0f0f"],
[style*="background:#0a0a0a"],
[style*="background:#121212"],
[style*="background:linear-gradient(120deg,#121212"],
[style*="background:linear-gradient(120deg,#181818"],
.dark-section {
    color: var(--text-dark-bg);
}

/* Dark section secondary text */
[style*="background:#0f0f0f"] [style*="color:#999"],
[style*="background:#0f0f0f"] [style*="color:#ccc"],
[style*="background:#0f0f0f"] [style*="color:#bbb"],
[style*="background:#121212"] [style*="color:#999"],
[style*="background:#181818"] [style*="color:#999"],
[style*="background:linear-gradient"] [style*="color:#999"],
.dark-section .text-muted {
    color: var(--text-dark-muted) !important;
}

/* Ensure accent color remains vibrant on all backgrounds */
[style*="color:#ff8c42"],
.text-accent {
    color: var(--accent) !important;
}

/* White text on dark backgrounds (e.g., case study titles, CTA buttons) */
[style*="color:white"],
.text-white-on-dark {
    color: #ffffff !important;
}

/* Light background - ensure adequate contrast */
.section:not([style*="background:#0f0f0f"]):not([style*="background:#121212"]) [style*="color:#666"] {
    color: var(--text-secondary) !important;
}

.section:not([style*="background:#0f0f0f"]):not([style*="background:#121212"]) [style*="color:#999"] {
    color: var(--text-muted) !important;
}

.section:not([style*="background:#0f0f0f"]):not([style*="background:#121212"]) [style*="color:#ccc"] {
    color: var(--text-light) !important;
}

/* Testimonials page - optimize card text */
.testimonial-stars {
    color: var(--accent) !important;
}

.premium-capability-card [style*="color:#999"] {
    color: var(--text-secondary) !important;
}

.premium-capability-card [style*="color:#ccc"] {
    color: var(--text-secondary) !important;
}

/* Dark card containers */
.testimonial-mini [style*="color:#999"] {
    color: var(--text-dark-muted) !important;
}

/* Form inputs on dark backgrounds */
[style*="background:#0a0a0a"].form-input,
[style*="background:#0a0a0a"] .form-input {
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Contact info links - maintain readability */
a[style*="color:#999"] {
    color: var(--text-dark-muted) !important;
}

a[style*="color:#999"]:hover {
    color: var(--text-dark-bg) !important;
}

/* Hover states for links on light backgrounds */
.section:not([style*="background:#0f0f0f"]) a[style*="color:#999"]:hover {
    color: var(--text) !important;
}

/* Blog/Careers meta information */
[style*="color:#666"] {
    color: var(--text-secondary) !important;
}

/* Experience/about sections on image backgrounds */
.experience-section [style*="color:#ccc"],
.experience-section [style*="color:#bbb"] {
    color: var(--text-dark-bg) !important;
}

/* Ensure proper button contrast */
.form-submit {
    background: var(--bg);
    color: var(--text);
}

.form-submit:hover {
    background: linear-gradient(90deg, #ff8c42 0%, #ff6b35 60%, #3b82f6 100%);
    color: #ffffff;
}

/* Dark theme button variants */
[style*="background:#333"].form-submit {
    background: #333 !important;
    color: #ffffff !important;
}

[style*="background:#333"].form-submit:hover {
    background: var(--accent) !important;
}