/* Projects list: ensure uniform card heights and baseline-aligned actions
     Applies only to the project grid on the homepage (container `.projects-list`). */
.projects-list .tilt-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.projects-list .tilt-card > .p-6 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Ensure the media area keeps a consistent height */
.projects-list .tilt-card > .h-48 {
    height: 200px; /* slightly larger and consistent */
}
.projects-list .tilt-card .card-actions {
    margin-top: auto; /* push action row to the bottom */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Smooth tilt hover for homepage project cards (match main tilt timing/curve)
   Use the same transform style (subtle rotateX/rotateY) and a longer duration
   so the hover feels deliberate and consistent with other tilt cards. */
.projects-list .tilt-card {
    transition: transform 900ms cubic-bezier(0.18, 0.9, 0.32, 1), box-shadow 600ms ease, filter 600ms ease;
    will-change: transform, box-shadow, filter;
    transform-style: preserve-3d;
    perspective: 1200px;
}
.projects-list .tilt-card:hover,
.projects-list .tilt-card:focus-within {
    transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 22px 40px rgba(4, 4, 36, 0.25);
    z-index: 2;
}

/* Ensure hover transform overrides entrance animation transforms smoothly */
.projects-list .tilt-card.hero-intro-item.is-visible {
    /* Make visible state neutral so hover transform can take effect smoothly */
    transform: translate3d(0,0,0);
    transition: transform 900ms cubic-bezier(0.18, 0.9, 0.32, 1);
    will-change: transform, box-shadow, filter;
    animation: none !important;
    opacity: 1 !important;
}

/* Ensure `.projects-list` uses the exact same tilt-card settings so its
   hover behaviour matches the rest of the site (smooth, non-instant). */
.projects-list .tilt-card,
.projects-list .tilt-card.hero-intro-item,
.projects-list .tilt-card.reveal-on-scroll {
    transition: transform 0.9s cubic-bezier(0.18, 0.9, 0.32, 1), box-shadow 0.6s ease, filter 0.6s ease;
    transform-style: preserve-3d;
    will-change: transform, box-shadow, filter;
    perspective: 1200px;
    position: relative;
    backface-visibility: hidden;
    transform-origin: center center;
}

.projects-list .tilt-card:hover,
.projects-list .tilt-card:focus-within {
    transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 22px 40px rgba(4, 4, 36, 0.25);
    z-index: 2;
}

/* Ensure hover wins even if the element is also a hero-intro-item / reveal-on-scroll */
.projects-list .tilt-card.hero-intro-item:hover,
.projects-list .tilt-card.reveal-on-scroll:hover {
    transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) !important;
    transition: transform 0.9s cubic-bezier(0.18, 0.9, 0.32, 1) !important;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/*
  Galano Grotesque: local @font-face declarations.
  Place your licensed font files in `styles/fonts/` with these exact names:
    - GalanoGrotesque-Regular.woff2 (or .woff)
    - GalanoGrotesque-Bold.woff2 (or .woff)
  If those files are not present the site will gracefully fall back to Inter/system fonts.
*/
@font-face {
    font-family: 'Galano Grotesque';
    src: url('fonts/GalanoGrotesque-Regular.woff2') format('woff2'),
         url('fonts/GalanoGrotesque-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Galano Grotesque';
    src: url('fonts/GalanoGrotesque-Bold.woff2') format('woff2'),
         url('fonts/GalanoGrotesque-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-primary: 'Galano Grotesque', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: var(--font-primary);
    scroll-behavior: smooth;
}

/* Site color variables (house colors) - defined here so pages without inline Tailwind config
   can still rely on the brand palette. These are the defaults used across the project. */
:root {
    --primary: #B7BF96;
    --secondary: #040424;
    --accent: #edaf1b;
    --third: #309d99;
    --innovation: #309d99;
    --collaboration: #b74521;
    --fourth: #b74521;
    --fifth: #040424;
}

/* Lightweight helpers so non-Tailwind pages can use the brand colors in markup/CSS */
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.text-secondary { color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.bg-third { background-color: var(--third); }
.text-third { color: var(--third); }
.bg-fourth { background-color: var(--fourth); }
.text-fourth { color: var(--fourth); }
.bg-fifth { background-color: var(--fifth); }
.text-fifth { color: var(--fifth); }

/* Simple utility for semi-transparent variants used in some markup (approx 80%/70%) */
.text-primary-80 { color: rgba(183,191,150,0.8); }
.text-secondary-70 { color: rgba(4,4,36,0.7); }

/* Compatibility helpers for Tailwind-like opacity classes used in markup
    These map classes like `text-primary/70` or `bg-primary/10` to concrete colors
    so pages render correctly even if Tailwind's generated utilities are not present. */
.text-primary\/70 { color: rgba(183,191,150,0.7); }
.text-primary\/80 { color: rgba(183,191,150,0.8); }
.text-secondary\/70 { color: rgba(4,4,36,0.7); }
.text-secondary\/80 { color: rgba(4,4,36,0.8); }

.bg-primary\/10 { background-color: rgba(183,191,150,0.1); }
.bg-fourth\/10 { background-color: rgba(183,69,33,0.1); }
.bg-third\/10 { background-color: rgba(48,157,153,0.1); }
.bg-innovation\/10 { background-color: rgba(48,157,153,0.1); }
.bg-collaboration\/10 { background-color: rgba(183,69,33,0.1); }

.text-innovation { color: #309d99; }
.text-collaboration { color: #b74521; }

/* Fallbacks for classes like bg-primary used without Tailwind available */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.text-secondary { color: var(--secondary) !important; }

/* CTA icon sizing: make icons inside primary call-to-action buttons 20% larger
     Scoped to `.dynamic-button` so other icons remain unchanged. */
.dynamic-button svg.feather,
.dynamic-button .feather,
.dynamic-button svg {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    display: inline-block;
}

/* Fixed slot for expertise icons so list text aligns regardless of icon size */
.expertise-icon-slot {
    width: 31px; /* match largest icon width used */
    flex: 0 0 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.expertise-icon-slot img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #040424;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #040424;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.slide-up {
    animation: slideUp 0.8s ease-out;
}

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

/* Above-the-fold hero entrance animation (fire once on page load) */
.hero-intro {
    opacity: 0;
    transform: translateY(36px) scale(0.985);
    transform-origin: center;
    filter: blur(6px);
    will-change: opacity, transform, filter;
}

body.hero-ready .hero-intro {
    animation: heroIntro 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--hero-intro-delay, 0.1s);
}

/* Ensure hero intro can coexist with reveal-on-scroll helpers */
.hero-intro.reveal-on-scroll {
    opacity: 0;
    transform: translateY(36px) scale(0.985);
    filter: blur(6px);
}

/* Child-level hero intro items for staggered elements (e.g., cards) */
.hero-intro-item {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(4px);
    will-change: opacity, transform, filter;
}

body.hero-ready .hero-intro-item {
    animation: heroIntroItem 0.5s cubic-bezier(0.2, 0.95, 0.35, 1) forwards;
    animation-delay: calc(var(--hero-intro-delay, 0s) + 0.2s);
}

@keyframes heroIntroItem {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.99);
        filter: blur(3px);
    }
    65% {
        opacity: 1;
        transform: translateY(-4px) scale(1.005);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

body.hero-ready .hero-intro.reveal-on-scroll {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

@keyframes heroIntro {
    0% {
        opacity: 0;
        transform: translateY(36px) scale(0.985);
        filter: blur(6px);
    }
    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Project card hover effect */
.project-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Dynamic button helper with animated glint */
.dynamic-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
    will-change: transform, box-shadow;
}

.dynamic-button::before,
.dynamic-button::after {
    content: '';
    position: absolute;
    inset: -30%;
    pointer-events: none;
    z-index: -1;
}

.dynamic-button::before {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), transparent 55%);
    opacity: 0;
    transform: scale(0.25);
    transition: opacity 0.75s ease, transform 0.65s cubic-bezier(0.2, 0.95, 0.35, 1);
}

.dynamic-button::after {
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 45%, transparent 90%);
    transform: translateX(-140%) skewX(-15deg);
    opacity: 0;
}

.dynamic-button:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 18px 35px rgba(4, 4, 36, 0.2);
}

.dynamic-button:hover::before {
    opacity: 0.85;
    transform: scale(1);
}

.dynamic-button:hover::after {
    opacity: 1;
    animation: button-glint 1.1s forwards;
}

.dynamic-button:focus-visible {
    outline: 2px solid rgba(237, 175, 27, 0.65);
    outline-offset: 3px;
}

.dynamic-button:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 10px 18px rgba(4, 4, 36, 0.2);
}

@keyframes button-glint {
    0% { transform: translateX(-140%) skewX(-15deg); }
    100% { transform: translateX(140%) skewX(-15deg); }
}

/* Scroll-triggered reveal helpers */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
    transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1), transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), filter 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform, filter;
}

.reveal-on-scroll.animate-slideLeft {
    transform: translateX(36px);
}

.reveal-on-scroll.animate-slideRight {
    transform: translateX(-36px);
}

.reveal-on-scroll.animate-fadeIn {
    transform: none;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* Reusable tilt-card helper for adventurous hover depth */
.tilt-card {
    transition: transform 0.9s cubic-bezier(0.18, 0.9, 0.32, 1), box-shadow 0.6s ease, filter 0.6s ease;
    transform-style: preserve-3d;
    will-change: transform, filter, box-shadow;
    perspective: 1200px;
    position: relative;
    backface-visibility: hidden;
    transform-origin: center center;
}

.tilt-card:hover,
.tilt-card:focus-visible {
    transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 22px 40px rgba(4, 4, 36, 0.25);
    outline: none;
}

/* Ensure tilt effect wins over entrance animations (higher specificity + !important) */
.tilt-card.hero-intro-item:hover,
body.hero-ready .tilt-card.hero-intro-item:hover,
.tilt-card.reveal-on-scroll:hover {
    transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) !important;
    box-shadow: 0 22px 40px rgba(4, 4, 36, 0.25) !important;
    transition: transform 0.9s cubic-bezier(0.18, 0.9, 0.32, 1) !important;
}

/* Solutions page: slower, more relaxed tilt for project cards */
.solutions-page .tilt-card,
.solutions-page .tilt-card.hero-intro-item,
.solutions-page .tilt-card.reveal-on-scroll {
    /* Much slower, relaxed transition for solutions project cards */
    transition: transform 2.2s cubic-bezier(0.22, 0.9, 0.36, 1) !important;
    box-shadow: 0 26px 46px rgba(4,4,36,0.22) !important;
    will-change: transform, box-shadow, filter;
    /* Prevent entrance animation from animating transform which causes snaps on hover */
    animation: none !important;
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    filter: none !important;
}

/* Hover state for solutions page - long duration so tilt feels deliberate and smooth */
.solutions-page .tilt-card:hover,
.solutions-page .tilt-card:focus-visible,
.solutions-page .tilt-card.hero-intro-item:hover,
body.hero-ready .solutions-page .tilt-card.hero-intro-item:hover,
.solutions-page .tilt-card.reveal-on-scroll:hover {
    transform: translateY(-8px) rotateX(2.2deg) rotateY(-2.2deg) !important;
    transition: transform 2.2s cubic-bezier(0.22, 0.9, 0.36, 1) !important;
    box-shadow: 0 26px 46px rgba(4,4,36,0.22) !important;
}

/* Make solution project cards visually uniform: fixed image area, flexible body */
.solutions-page .tilt-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 340px; /* ensure a comfortable baseline */
}

/* Normalize the image area: cover and fixed height so cards match */
.solutions-page .tilt-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Ensure the content area takes remaining space and keeps the 'lees meer' link at bottom */
.solutions-page .tilt-card > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    flex: 1 1 auto;
}

.solutions-page .tilt-card > div:last-child p {
    margin: 0;
    flex: 1 1 auto; /* summary grows to fill space so actions align */
    color: rgba(4,4,36,0.8);
}

/* Push the action/link row to the bottom for consistent placement */
.solutions-page .tilt-card > div:last-child .mt-3 {
    margin-top: auto !important;
}

/* Small visual tweak: consistent padding for image wrappers that use h-36/h-48 classes */
.solutions-page .tilt-card > .h-36,
.solutions-page .tilt-card > .h-48,
.solutions-page .tilt-card > .rounded-2xl {
    overflow: hidden;
}

/* If cards are links, ensure link stretches full height inside grid */
.solutions-page .grid > a.tilt-card {
    display: flex;
    flex-direction: column;
}

.tilt-card:focus-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 3px rgba(237, 175, 27, 0.5);
    pointer-events: none;
}

/* Form input focus */
.form-input:focus {
    border-color: #edaf1b;
    box-shadow: 0 0 0 2px rgba(237, 175, 27, 0.2);
}

/* Lightbox image centering and positioning */
#project-lightbox-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-position: center center;
}

/* Ensure the lightbox overlay provides consistent top/bottom spacing
   so large images are visually centered but do not touch the navbar. */
#project-lightbox {
    padding-top: 3.25rem; /* increases space under navbar */
    padding-bottom: 3.25rem;
}

#project-lightbox-img {
    max-height: calc(80vh - 56px);
    margin-top: 0; /* image itself should not offset vertically */
}

/* CTA Section Gradient - Responsive sizing */
.cta-gradient-bg {
    background: radial-gradient(circle at center, #B7BF96 0%, #B7BF96 40%, #040424 85%);
}

@media (min-width: 768px) {
    .cta-gradient-bg {
        background: radial-gradient(circle at center, #B7BF96 0%, #B7BF96 15%, #040424 65%);
    }
}