@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Oswald:wght@500;700&display=swap');

/* ==========================================================================
   TFG MASTER STYLESHEET (Optimized & Responsive)
========================================================================== */

/* -----------------------------
   1. VARIABLES & BASE TYPOGRAPHY
------------------------------ */
:root {
    --tfg-primary-yellow: #ffd100;
    --tfg-dark-bg: #0f172a; 
    --tfg-light-bg: #f8fafc; 
    --tfg-text-dark: #1e293b; 
    --tfg-text-light: #f1f5f9; 
    --tfg-primary-red:#dc2626;
    --tfg-primary-blue:#4e1c79;
    
    --tfg-hero-height: min(550px, calc(100vh - 80px)); 
    
    /* Typography */
    --tfg-font-body: 'Barlow', sans-serif;
    --tfg-font-heading: 'Oswald', sans-serif;
}

/* Modern Base Sizing - 1rem = 16px by default */
html {
    font-size: 100%; 
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Strict Reset for SEO layout stability */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; }

body {
    font-family: var(--tfg-font-body);
    font-size: 1rem;
    color: var(--tfg-text-dark);
    background-color: var(--tfg-light-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

/* SEO Image Fix: Prevents images from breaking mobile layouts */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Responsive Container */
.tfg-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }


/* -----------------------------
   2. TYPOGRAPHY & GLOBAL COMPONENTS
------------------------------ */
h1, h2, h3, h4, .tfg-brand, .tfg-badge-title { 
    font-family: var(--tfg-font-heading); 
    text-transform: uppercase; 
    line-height: 1.2;
}

/* Fluid Typography for main titles */
.tfg-section-title { 
    font-size: clamp(1.75rem, 4vw, 2.5rem); 
    font-weight: 700; 
    margin-bottom: 3rem; 
    color:var(--tfg-primary-blue);
}
.tfg-hero-title { 
    color: #fff; 
    font-size: clamp(1.75rem, 4.5vw, 2.75rem); 
    font-weight: 700; 
    margin-bottom: 2rem; 
    /*transform: skew(-20deg);*/
}
.tfg-hero-subtitle {
    /* The Glassmorphism Effect */
    background: rgba(100, 100, 100, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Ensures it works on Safari */
    /*border: 1px solid rgba(255, 209, 0, 0.3); */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); /* Deep shadow for floating effect */
    
    /* Text and Layout */
    color: var(--tfg-primary-yellow); 
    padding: 6px 16px;
    font-family: var(--tfg-font-heading);
    font-size: 0.575rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: inline-block;
    margin-bottom: 16px;
    /*transform: skew(-20deg);*/
    /*border-radius: 4px;*/
    /*font-style:italic;*/
}

/* --- GLOBAL INDUSTRIAL SUBTITLE (Custom Flag Design) --- */
.tfg-section-subtitle { 
    display: inline-block;
    color: #dc2626; 
    color: var(--tfg-primary-blue); 
    font-family: var(--tfg-font-heading);
    font-size: 0.875rem; 
    font-weight: 400;
    text-transform: uppercase;
    /*font-style: italic;*/
    letter-spacing: 0.15em;
    margin-bottom: 1.25rem;
    position: relative;
    padding: 6px 16px 6px 20px;
    background-color: var(--tfg-primary-yellow);        
    width: auto;
    box-shadow: 3px 3px 10px rgba(100,100,100,0.3);
    transform:skew(-10deg);
}
.tfg-section-subtitle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 8px;
    height: 16px; 
    background-color: var(--tfg-primary-yellow); 
    display:none;
    opacity:0   ;
}
.tfg-section-subtitle::after {
    content: '//';
    color: #64748b;
    margin-left: 12px;
    font-family: var(--tfg-font-body);
    font-weight: 900;
    letter-spacing: 2px;
}

/* Base Primary Button */
.tfg-btn-primary {
    display: inline-flex; 
    align-items: center; 
    gap: 8px;
    background-color: var(--tfg-primary-yellow); 
    background-color: var(--tfg-primary-yellow); 
    color:var(--tfg-primary-red) ;
    padding: 12px 24px; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 0.875rem;
    border: none; 
    cursor: pointer; 
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease-in-out;
    transform:skew(-10deg);
}

/* Modern Button Hover Sweep */
.tfg-btn-primary:hover { color: var(--tfg-primary-yellow); }
.tfg-btn-primary::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background-color: var(--tfg-dark-bg);
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1;
}
.tfg-btn-primary:hover::before { transform: translateX(100%); }
.tfg-btn-primary:active { transform: scale(0.98); }
.tfg-btn-primary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.3s ease-in-out; }
.tfg-btn-primary:hover svg { transform: translateX(4px); }

/* Stand-alone Text Links */
.tfg-text-link {
    position: relative; display: inline-block; padding-bottom: 2px;
    color: var(--tfg-text-dark); font-weight: 700; font-size: 0.875rem; 
    text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s;
}
.tfg-text-link:hover { color: var(--tfg-primary-yellow); }
.tfg-text-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; height: 3px;
    background-color: var(--tfg-primary-yellow); transition: width 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
.tfg-text-link:hover::after { width: 100%; }

/* --- GLOBAL SPLIT LAYOUT --- */
.tfg-split-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1024px) { 
    .tfg-split-layout { grid-template-columns: 1fr 1fr; gap: 64px; } 
}

/* SCROLL ANIMATIONS */
.tfg-fade-up { 
    opacity: 0; transform: translateY(40px); filter: blur(8px); 
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
    will-change: transform, opacity, filter;
}
.tfg-fade-up.tfg-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
h2.tfg-section-title.tfg-fade-up { transform: translateY(20px); letter-spacing: 0.1em; transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
h2.tfg-section-title.tfg-fade-up.tfg-visible { letter-spacing: normal; }


/* -----------------------------
   3. HEADER & NAVIGATION
------------------------------ */
.tfg-top-bar { background-color: var(--tfg-dark-bg); color: #cbd5e1; font-size: 0.75rem; padding: 8px 0; display: none; }
@media (min-width: 1024px) { .tfg-top-bar { display: block; } }
.tfg-top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.tfg-contact-info { display: flex; gap: 24px; }
.tfg-info-item { display: flex; align-items: center; gap: 8px; }
.tfg-info-item svg { width: 14px; height: 14px; color: var(--tfg-primary-yellow); stroke: currentColor; stroke-width: 2; fill: none; }
.tfg-lang-selector { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tfg-lang-selector svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none;}

.tfg-site-header { background: #fff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 50; height: 80px; }
.tfg-header-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }
/*.tfg-logo img { margin-top:50px;height: 70px; mix-blend-mode: multiply; filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.3));}*/

.tfg-desktop-nav { display: none; height: 100%; align-items: center; gap: 8px; font-weight: 600; font-size: 0.875rem; }
@media (min-width: 1024px) { .tfg-desktop-nav { display: flex; } }
.tfg-nav-link { padding: 5px 15px; transition: color 0.3s; display: flex; align-items: center; gap: 4px; height: 100%; text-transform:uppercase;color:var(--tfg-primary-blue); }
.tfg-nav-link:hover { color: var(--tfg-primary-yellow); }
.tfg-nav-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Dropdown */
.tfg-dropdown-wrapper { position: relative; height: 100%; display: flex; align-items: center; cursor: pointer; }
.tfg-dropdown-menu {
    position: absolute; top: 100%; left: 0; width: 250px; background: #fff;
    border-top: 2px solid var(--tfg-primary-yellow); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 50;
}
.tfg-dropdown-wrapper:hover .tfg-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.tfg-dropdown-menu a { display: block; padding: 12px 24px; color: #475569; border-bottom: 1px solid #f1f5f9; transition: all 0.2s; }
.tfg-dropdown-menu a:hover { background: #f8fafc; color: var(--tfg-primary-yellow); }

.tfg-header-actions { display: flex; align-items: center; gap: 16px; }
.tfg-mobile-toggle { display: block; background: none; border: none; cursor: pointer; }
.tfg-mobile-toggle svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (min-width: 1024px) { .tfg-mobile-toggle { display: none; } }


/* -----------------------------
   4. HERO SECTION
------------------------------ */
.tfg-hero-section { position: relative; width: 100%; height: var(--tfg-hero-height); background: var(--tfg-dark-bg); overflow: hidden; display: flex; align-items: center;}
.tfg-hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px); opacity: 0; transition: opacity 1s ease-in-out; }
.tfg-active-bg { 
    opacity: 0.8 !important; 
    z-index: 2; 
}
.tfg-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 100%); z-index: 10; }

.tfg-hero-base-content, .tfg-hero-slices-container, .tfg-hero-slice { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; }
.tfg-hero-base-content { z-index: 20; transition: opacity 0.3s; }
.tfg-hero-slices-container { z-index: 30; pointer-events: none; }
.tfg-hero-slice { opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(0.25, 1, 0.3, 1); transition-duration: 800ms; }

.tfg-hero-content-split { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 40px; width: 100%; }
@media (min-width: 1024px) { .tfg-hero-content-split { flex-direction: row; gap: 64px; } }

.tfg-hero-text-area { width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) { .tfg-hero-text-area { width: 40%; margin-left: 6%; transform: translateX(20%); } }

.tfg-hero-image-area { width: 100%; position: relative; aspect-ratio: 16/9; background: var(--tfg-dark-bg); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden;}
@media (min-width: 1024px) { .tfg-hero-image-area { width: 50%; } }
.tfg-hero-image-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tfg-hero-image-area::after {
    content: '';
    position: absolute;
    inset: 0;
    /* This creates a dark slate gradient that fades into a very faint industrial yellow */
    /*background: linear-gradient(to top right, rgba(15, 23, 42, 0.5) 0%, rgba(0, 00, 50, 0.03) 100%);*/
    background: rgba(0, 0, 50, .1);
    z-index: 5;
    pointer-events: none; /* Ensures the overlay doesn't block any accidental clicks */
}

.tfg-hero-dots { position: absolute; bottom: 50px; right: 20%; display: flex; gap: 12px; z-index: 100; }
.tfg-dot { width: 40px; height: 8px; background: rgba(255,255,255,0.3); border: none; cursor: pointer; transition: background 0.3s; border-radius: 2px; }
.tfg-dot:hover { background: rgba(255,255,255,0.6); }
.tfg-active { background: var(--tfg-primary-yellow); }


/* -----------------------------
   5. TRUST & STATS SECTIONS
------------------------------ */
.tfg-trust-bar { background: var(--tfg-dark-bg); padding: 16px 0; border-top: 2px solid var(--tfg-primary-yellow); }
.tfg-trust-bar .tfg-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (min-width: 768px) { .tfg-trust-bar .tfg-container { flex-direction: row; justify-content: center; gap: 32px; } }
.tfg-trust-label { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; }
.tfg-trust-bar .tfg-badge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 4px 8px; border-radius: 2px; color: #fff; font-size: 0.75rem; font-weight: 600; }

.tfg-stats-section { background: #fff; margin: -40px 24px 0; position: relative; z-index: 40; padding: clamp(24px, 5vw, 40px); border-radius: 4px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border-bottom: 1px solid #e2e8f0;}
@media (min-width: 1280px) { .tfg-stats-section { max-width: 1280px; margin: -40px auto 0; } }
.tfg-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; text-align: center; }
@media (min-width: 768px) { .tfg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.tfg-stat-box { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; /* Aligns from the top down */
    padding: 24px; 
    height: 100%;
}
.tfg-stat-number { 
    font-size: clamp(2rem, 4vw, 3rem); 
    font-weight: 700; 
    color: var(--tfg-primary-blue); 
    display: block; 
    font-family: var(--tfg-font-heading); 
}
.tfg-stat-label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; }
/* -----------------------------
   5. VISION SECTION
------------------------------ */
.tfg-vision-section {
    position: relative;
    padding: clamp(64px, 10vw, 120px) 0 clamp(32px, 5vw, 64px) 0; 
    background: #ffffff; /* Matches your About section */
    z-index: 1;
    overflow: hidden;
}

/* Layout for the Container */
.tfg-vision-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    z-index: 2;
}

/* -----------------------------
   HEADING & ANIMATED DOTS
------------------------------ */
.tfg-vision-heading {
    position: relative;
    padding: 24px; /* Gives the dots room to breathe around the text */
}

/* The Dotted Background - Now restricted to the heading */
.tfg-vision-pattern-local {
    position: absolute;
    inset: 0;
    /* Denser pattern: 20px instead of 32px */
    background-image: radial-gradient(#94a3b8 2px, transparent 2px);
    background-size: 20px 20px; 
    opacity: 0.3;
    z-index: -1;
    border-radius: 4px;
    
    /* Animation 1: Slow, infinite panning effect */
    animation: tfg-pan-grid 20s linear infinite;
}

/* Keyframes for the panning blueprint grid */
@keyframes tfg-pan-grid {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

/* -----------------------------
   CONTENT & ANIMATED BORDER
------------------------------ */
.tfg-vision-content {
    position: relative;
    padding-left: 24px;
}

/* The Heavy Red Line - Rebuilt as an animated element */
.tfg-vision-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    background: #dc2626; /* Industry Red */
    border-radius: 2px;
    
    /* Animation 2: Draws the line downwards */
    animation: tfg-draw-line 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    /* Starts at 0 height so it's invisible before animating */
    height: 0; 
}

/* Keyframes for the drawing red line */
@keyframes tfg-draw-line {
    0% { height: 0; }
    100% { height: 100%; }
}

/* Typography for the statement */
.tfg-vision-text {
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--tfg-text-dark);
    margin: 0;
}

/* Desktop Layout Adjustments */
@media (min-width: 1024px) {
    .tfg-vision-container {
        flex-direction: row;
        align-items: center;
        gap: 64px;
    }
    .tfg-vision-heading {
        width: 35%;
        padding: 40px 40px 40px 0; /* Extends dots slightly to the right */
    }
    .tfg-vision-pattern-local {
        /* Bleeds the dots slightly to the left on big screens */
        inset: -20px 0 -20px -40px; 
    }
    .tfg-vision-content {
        width: 65%;
        padding-left: 48px;
    }
}


/* -----------------------------
   5. VISION & VALUES SECTION (Unified)
------------------------------ */
.tfg-vision-section {
    position: relative;
    padding: clamp(64px, 10vw, 120px) 0;
    background: #ffffff;
    z-index: 1;
    overflow: hidden;
}

/* --- THE CENTRAL VISION HEADER --- */
.tfg-vision-header-integrated {
    position: relative;
    max-width: 900px;
    margin: 0 auto 64px auto; /* Centers the block and adds space before the grid */
    text-align: center;
    padding: 40px 24px;
    
    /* --- THE GLASS EFFECT --- */
    background: rgba(255, 255, 255, 0.59); /* Semi-transparent white */
    /*backdrop-filter: blur(6px);*/
    -webkit-backdrop-filter: blur(12px); /* Required for Safari support */
    border: 1px solid rgba(255, 255, 255, 0.6); /* Reflective edge */
    border-radius: 8px; /* Slightly rounded corners for a premium look */
    box-shadow: 0 8px 22px rgba(100, 100, 100, 0.2); /* Soft shadow to lift it off the page */
}

.tfg-vision-pattern-local {
    position: absolute; inset: 0;
    background-image: radial-gradient(var(--tfg-primary-blue) 2px, transparent 2px);
    background-size: 20px 20px; opacity: 0.25; z-index: -1; border-radius: 4px;
    /* This mask fades the dots out at the edges so they look like a cloud behind the text */
    mask-image: radial-gradient(circle, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 100%);
    animation: tfg-pan-grid 20s linear infinite;
}
@keyframes tfg-pan-grid { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } }

.tfg-vision-header-integrated .tfg-section-title {
    margin-bottom: 24px;
}

.tfg-vision-text {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 400;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* --- THE VALUES GRID --- */
.tfg-values-grid {
    display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .tfg-values-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .tfg-values-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.tfg-value-card {
    background: #fff;
    padding: 32px;
    border-radius: 2px;
    /* Subtle grey line on the left side of every card */
    border-left: 3px solid #e2e8f0; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

/* Hover Effect: Card slides right, left border turns red, icon turns red */
.tfg-value-card:hover {
    transform: translateX(8px); 
    border-left-color: #dc2626; /* Heavy Industry Red */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.tfg-value-icon {
    width: 40px; height: 40px; margin-bottom: 20px;
}
.tfg-value-icon svg {
    width: 100%; height: 100%;
    stroke: var(--tfg-text-dark); /* Dark grey by default */
    transition: stroke 0.4s;
}
.tfg-value-card:hover .tfg-value-icon svg {
    stroke: #dc2626; /* Icon turns red on hover */
}

.tfg-value-title {
    color: var(--tfg-primary-blue);
    font-size: 1.15rem; margin-bottom: 12px;
    font-family: var(--tfg-font-heading);
    font-weight: 700;
}

.tfg-value-text {
    color: #64748b;
    font-size: 0.9rem; line-height: 1.6; margin: 0; flex-grow: 1;
}

/* -----------------------------
   6. ABOUT SECTION
------------------------------ */
.tfg-about-section { padding: clamp(48px, 8vw, 96px) 0; background: #fff; overflow: hidden; }
.tfg-about-section .tfg-split-layout { align-items: flex-start; }

.tfg-about-visuals { position: relative; padding-bottom: 40px; padding-right: clamp(16px, 4vw, 40px); }
.tfg-about-pattern { position: absolute; top: -20px; right: 0; width: 70%; height: 80%; background-image: radial-gradient(var(--tfg-text-dark) 2px, transparent 2px); background-size: 16px 16px; opacity: 0.1; z-index: 1; }
.tfg-about-img-main { width: 100%; height: auto; min-height: 400px; object-fit: cover; position: relative; z-index: 2; border-radius: 2px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }

.tfg-about-badge { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background: rgba(220, 38, 38, 0.9); 
    color: #fff; 
    padding: 24px; 
    z-index: 4; 
    display: flex; 
    flex-direction: column; /* Stacks logo above the text */
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    text-align: center;
    gap: 16px; 
    width: 200px; /* Fixed width */
    aspect-ratio: 1 / 1; /* Magic rule that forces a perfect square */
    border-radius: 2px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* New rule for the logo image */
.tfg-badge-logo {
    width: auto;
    height: auto;
    max-height: 64px; /* Slightly larger since it has more vertical room now */
    object-fit: contain;
}

/* New rule to stack the text on the right */
.tfg-badge-text {
   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}.tfg-badge-year { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }

/* Smooth Accordion Styling */
.tfg-accordion { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.tfg-accordion-item { background: var(--tfg-light-bg); border-radius: 2px; overflow: hidden; }
.tfg-accordion-header { width: 100%; padding: 16px 20px; font-weight: 700; font-family: var(--tfg-font-body); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1rem; color: var(--tfg-text-dark); background: transparent; border: none; text-align: left; transition: color 0.3s; }
.tfg-accordion-icon { width: 36px; height: 36px; background: var(--tfg-dark-bg); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 400; border-radius: 2px; flex-shrink: 0; margin-left: 16px; transition: all 0.3s ease; }
.tfg-accordion-icon::before { content: '+'; }

.tfg-accordion-item.tfg-active .tfg-accordion-header { color: #dc2626; }
.tfg-accordion-item.tfg-active .tfg-accordion-icon { transform: rotate(180deg); background: #dc2626; }
.tfg-accordion-item.tfg-active .tfg-accordion-icon::before { content: '−'; }

.tfg-accordion-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease-out; }
.tfg-accordion-item.tfg-active .tfg-accordion-collapse { grid-template-rows: 1fr; }
.tfg-accordion-body { overflow: hidden; padding: 0 20px; color: #475569; font-size: 0.875rem; line-height: 1.6; }
.tfg-accordion-item.tfg-active .tfg-accordion-body { padding-bottom: 20px; }

.tfg-about-actions { display: flex; align-items: center; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.tfg-signature { height: 50px; object-fit: contain; opacity: 0.8; }


/* -----------------------------
   7. SERVICES CARDS (3x2 Grid Layout with Title Block)
------------------------------ */
.tfg-services-v2-section { padding: clamp(48px, 8vw, 96px) 0; background: var(--tfg-light-bg); }

/* Custom narrower container to give the section more breathing room */
.tfg-services-container { max-width: 1140px; margin: 0 auto; }

/* The Title Block inside the grid */
.tfg-services-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-right: 24px;
    margin-bottom: 24px;
}
@media (min-width: 1024px) { .tfg-services-title-block { margin-bottom: 0; } }

/* Grid Layout */
.tfg-services-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .tfg-services-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; } }
@media (min-width: 1024px) { .tfg-services-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card Sizing Logic */
.tfg-svc-card-wrapper { position: relative; z-index: 1; cursor: pointer; height: 100%; }
.tfg-svc-card-wrapper::before, .tfg-svc-card-wrapper::after { content: ''; position: absolute; width: 150px; height: 100px; background: #dc2626; z-index: -1; transition: transform 0.3s ease; }
.tfg-svc-card-wrapper::before { top: 0; right: 0; }
.tfg-svc-card-wrapper::after { bottom: 0; left: 0; }
.tfg-svc-card-wrapper:hover::before { transform: translate(16px, -16px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }
.tfg-svc-card-wrapper:hover::after { transform: translate(-16px, 16px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; }

.tfg-svc-card { position: relative; background: #fff; padding: 48px 32px; border: 1px solid #e2e8f0; z-index: 2; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: border-color 0.4s ease; }
.tfg-svc-bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.4s ease, transform 0.8s ease; background-size: cover; background-position: center; }
.tfg-svc-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,23,42,0.65), rgba(15,23,42,0.85)); }

.tfg-svc-content { position: relative; z-index: 10; display: flex; flex-direction: column; height: 100%; }
.tfg-svc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.tfg-svc-icon svg { width: 56px; height: 56px; stroke: #dc2626; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.tfg-svc-number { font-family: var(--tfg-font-heading); font-size: 4.5rem; font-weight: 700; color: #f1f5f9; line-height: 0.75; transition: color 0.4s; }

.tfg-svc-title { font-size: clamp(1.25rem, 1.5vw, 1.5rem); color: var(--tfg-text-dark); margin-bottom: 16px; transition: color 0.4s; }
.tfg-svc-desc { color: #475569; font-size: .85rem; margin-bottom: 0; flex-grow: 1; transition: color 0.4s; line-height: 1.6; }

/* Service Hover States */
.tfg-svc-card-wrapper:hover .tfg-svc-card { border-color: transparent; }
.tfg-svc-card-wrapper:hover .tfg-svc-bg { opacity: 1; transform: scale(1.05); }
.tfg-svc-card-wrapper:hover .tfg-svc-icon svg { transform: translateY(-4px); }
.tfg-svc-card-wrapper:hover .tfg-svc-number { color: rgba(255,255,255,0.05); }
.tfg-svc-card-wrapper:hover .tfg-svc-title { color: #fff; }
.tfg-svc-card-wrapper:hover .tfg-svc-desc { color: #cbd5e1; }


/* -----------------------------
   8. CASE STUDY SLIDER SECTION
------------------------------ */
.tfg-case-study-section { margin-top:150px;padding: clamp(48px, 8vw, 96px) 0; background: var(--tfg-light-bg); overflow: hidden; }
.tfg-cs-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: stretch; }
@media (min-width: 1024px) { .tfg-cs-layout { grid-template-columns: 1fr 1.2fr; gap: 64px; } }

.tfg-cs-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tfg-cs-intro { font-size: 1.125rem; color: #475569; margin-bottom: 40px; max-width: 90%; }
.tfg-cs-dynamic-area { padding-top: 32px; border-top: 2px solid #e2e8f0; display: flex; gap: 24px; flex-direction: column; }
@media (min-width: 640px) { .tfg-cs-dynamic-area { flex-direction: row; align-items: flex-start; } }

/* Counter & Controls */
.tfg-cs-meta { display: flex; flex-direction: column; gap: 16px; min-width: 100px; flex-shrink: 0; }
.tfg-cs-counter { font-family: var(--tfg-font-heading); font-size: 3rem; font-weight: 700; line-height: 1; color: #dc2626; display: flex; align-items: baseline;}
.tfg-cs-slash { color: var(--tfg-text-dark); opacity: 0.15; margin: 0 4px; font-size: 2rem; }
#tfg-cs-total { font-size: 1.25rem; color: #94a3b8; }

.tfg-cs-controls { display: flex; gap: 8px; }
.tfg-cs-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 2px solid #dc2626; cursor: pointer; transition: all 0.3s; border-radius: 2px; }
.tfg-cs-btn svg { width: 24px; height: 24px; stroke: currentColor; transition: stroke 0.3s; }
.tfg-cs-btn:hover { background: var(--tfg-dark-bg); border-color: #dc2626; }

#tfg-cs-prev { background: #fff; color: #dc2626; }
#tfg-cs-prev:hover { background: #dc2626; color: #fff; }
#tfg-cs-next { background: #dc2626; color: #fff; }
#tfg-cs-next:hover { background: #fff; color: #dc2626; }

/* Slide Info text */
.tfg-cs-slide-info { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(0); opacity: 1; }
.tfg-cs-slide-title { font-size: 1.75rem; margin-bottom: 12px; line-height: 1.2; }
.tfg-cs-slide-desc { color: #475569; font-size: 1rem; line-height: 1.6; font-family: var(--tfg-font-body); }
.tfg-cs-slide-info .tfg-text-link { transition: 0.3s ease; color: #dc2626; font-family: var(--tfg-font-body) !important; display: inline-block; margin-top: 16px; font-size: 0.95rem; }
.tfg-cs-slide-info .tfg-text-link::after { background-color: #dc2626; }
.tfg-cs-slide-info .tfg-text-link:hover { transform: translateX(10px); }

/* Visuals & Thumbnails */
.tfg-cs-visual { min-width: 0; width: 100%; height: 100%; min-height: 300px; position: relative; background: #cbd5e1; border-radius: 4px; display: flex; overflow: hidden; }
.tfg-cs-visual img { width: 100%; height: 100%; object-fit: cover; }

.tfg-cs-thumbnails-container { display: flex; gap: 24px; margin-top: 48px; overflow-x: auto; padding-bottom: 24px; scrollbar-width: none; width: 100%; }
.tfg-cs-thumbnails-container::-webkit-scrollbar { display: none; }

.tfg-cs-thumb-card { width: clamp(200px, 40vw, 260px); height: clamp(120px, 25vw, 160px); flex-shrink: 0; position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; opacity: 0.6; transition: all 0.3s ease; border: 2px solid transparent; background: #cbd5e1; }
.tfg-cs-thumb-card img { width: 100%; height: 100%; object-fit: cover; }
.tfg-cs-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,0.95), rgba(15,23,42,0.1)); display: flex; align-items: flex-end; padding: 16px; }
.tfg-cs-thumb-overlay h4 { color: #fff; font-size: 0.85rem; font-family: var(--tfg-font-body); font-weight: 600; margin: 0; line-height: 1.3; }
.tfg-cs-thumb-card:hover { opacity: 0.9; }
.tfg-cs-thumb-card.tfg-active-thumb { opacity: 1; border-color: var(--tfg-primary-yellow); transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

/* Animation Utils */
.tfg-cs-fading-img { opacity: 0; transform: scale(0.98); transition: all 0.4s ease; }
.tfg-slide-out-left { transform: translateX(-40px) !important; opacity: 0 !important; }
.tfg-slide-in-right { transform: translateX(40px) !important; opacity: 0 !important; transition: none !important; }


/* -----------------------------
   9. MARKET DIAGRAM IMAGE & SEO
------------------------------ */
.tfg-market-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:100px 0;
}

.tfg-market-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* Optional: Adds a subtle shadow to make the image pop like a document */
    filter: drop-shadow(0 20px 25px rgba(0,0,0,0.1)); 
}

/* SEO Optimization Class - Hides text visually but keeps it in the DOM for Google */
.tfg-seo-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* -----------------------------
   8. COMBINED LEADERSHIP & TEAM SECTION
------------------------------ */
.tfg-leadership-section { 
    padding: clamp(64px, 5vw, 120px) 0; 
    background: #fff; 
    border-top: 1px solid #e2e8f0; 
}

/* --- Top Spotlight: Director --- */
.tfg-director-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    /* Adds a nice large gap before the 3-column team grid starts */
    margin-bottom: clamp(64px, 10vw, 96px); 
}
@media (min-width: 1024px) {
    .tfg-director-wrapper { 
        grid-template-columns: 5fr 7fr; /* Gives slightly more room to the text */
        align-items: center; 
        gap: 80px; 
    }
}

.tfg-director-img-wrapper { position: relative; padding-left: 24px; padding-bottom: 24px; max-width: 500px; margin: 0 auto; width: 100%; }
.tfg-director-img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.15); filter: grayscale(20%); }
.tfg-director-accent { position: absolute; bottom: 0; left: 0; width: 60%; height: 60%; background: var(--tfg-primary-yellow); z-index: 1; border-radius: 2px; }

.tfg-director-quote { font-size: clamp(1.5rem, 4vw, 2.25rem); font-family: var(--tfg-font-body); font-style: italic; font-weight: 600; line-height: 1.3; color: var(--tfg-text-dark); margin-bottom: 24px; position: relative; }
.tfg-director-quote::before { content: '"'; position: absolute; top: -40px; left: -20px; font-family: var(--tfg-font-heading); font-size: 6rem; color: #dc2626; opacity: 0.15; z-index: -1; line-height: 1; }

.tfg-director-text { font-size: 1.125rem; color: #475569; margin-bottom: 32px; line-height: 1.8; }
.tfg-director-name { font-family: var(--tfg-font-heading); font-size: 1.5rem; text-transform: uppercase; color: var(--tfg-text-dark); margin-bottom: 4px; }
.tfg-director-title { font-size: 0.875rem; color: var(--tfg-primary-blue); font-weight: 500; letter-spacing: 0.05em; }

/* --- Bottom Grid: Core Team --- */
.tfg-team-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .tfg-team-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.tfg-team-card { position: relative; background: var(--tfg-light-bg); border-radius: 4px; overflow: hidden; transition: transform 0.3s; }
.tfg-team-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.tfg-team-img-wrapper { position: relative; overflow: hidden; aspect-ratio: 4/5; }

/* Grayscale Hover Effect */
.tfg-team-photo { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: all 0.5s ease; }
.tfg-team-card:hover .tfg-team-photo { filter: grayscale(0%); transform: scale(1.05); }

/* Red Social Overlay */
.tfg-team-socials { position: absolute; inset: 0; background: rgba(220, 38, 38, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; }
.tfg-team-card:hover .tfg-team-socials { opacity: 1; transform: translateY(0); }
.tfg-team-socials a { color: #fff; font-family: var(--tfg-font-heading); text-transform: uppercase; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; border-bottom: 2px solid #fff; }

.tfg-team-info { padding: 24px; text-align: left; border-top: 4px solid var(--tfg-primary-yellow); }
.tfg-team-name { font-size: 1.25rem; font-weight: 700; color: var(--tfg-text-dark); margin-bottom: 4px; }
.tfg-team-role { font-size: 0.875rem; color: #64748b; font-weight: 600; text-transform: uppercase; }


/* -----------------------------
   12. EVENT GALLERY SECTION
------------------------------ */
.tfg-gallery-section { padding: clamp(48px, 8vw, 96px) 0; background: var(--tfg-light-bg); }
.tfg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 250px; gap: 16px; }
.tfg-gallery-item { position: relative; overflow: hidden; border-radius: 4px; }
.tfg-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.tfg-gallery-item:hover img { transform: scale(1.1); }

@media (min-width: 768px) {
    .tfg-gallery-tall { grid-row: span 2; }
    .tfg-gallery-wide { grid-column: span 2; }
}


/* ==========================================
   CLIENT MARQUEE - PREMIUM DARK EDITION
========================================== */
.tfg-clients-slider {
    background-color: #0a0f1d; /* Deep slate to match your footer */
    background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #0a0f1d 80%);
    padding: 80px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 6px solid var(--tfg-primary-yellow);
    position: relative;
    overflow: hidden;
}

/* Subtle industrial grid overlay for background texture */
.tfg-clients-slider::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Brighten the section title for the dark background */
.tfg-clients-slider .tfg-section-header h4 {
    color: #cbd5e1 !important; 
    font-weight: 600;
    position: relative;
    z-index: 2;
}

/* Framing the JPEG logos perfectly in floating cards */
.tfg-client-item {
    width:auto;
    height: 150px;
    background: #ffffff; 
    background: transparent; 
    border-radius: 8px;
   /* Gives the logo breathing room */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    position: relative;
    z-index: 2;
    /*ojject-fit:contain;*/
}

.tfg-client-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    filter: grayscale(70%) opacity(75%);
    transition: filter 0.4s ease, transform 0.4s ease;
    padding:10px;
    /*background: rgba(200,200,200,.2);*/
    backdrop-filter:blur(10px);
    border-radius: 8px;

    /*box-shadow: 0 12px 30px rgba(0, 242, 254, 0.15); */
}

/* High-End Hover Effects */
.tfg-client-item:hover {
    transform: translateY(-8px); /* Card lifts up toward the user */
    /* Subtle Cyan glow matching your developer credit in the footer */
    box-shadow: 0 20px 50px rgba(0, 242, 254, 0.15); 
}

.tfg-client-item:hover img {
    filter: grayscale(0%) opacity(100%); /* Snaps to full brand color */
    transform: scale(1.08); /* Logo pops slightly inside the card */
}
/* ==========================================
   MARQUEE SCROLLING ANIMATION (THE FIX)
========================================== */
.tfg-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Premium touch: Fades the logos out smoothly at the left and right edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.tfg-marquee-track {
    display: flex;
    /* This forces all 20 logos into a single horizontal line */
    width: max-content; 
    /* Runs the scroll animation for 30 seconds, looping forever */
    animation: scrollMarquee 60s linear infinite;
}

/* Pauses the slider when someone hovers over a logo */
.tfg-marquee-container:hover .tfg-marquee-track {
    animation-play-state: paused;
}

/* The actual scrolling math */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Scrolls exactly halfway (past the first 10 logos) then instantly resets to create a perfect loop */
        transform: translateX(-50%);
    }
}


/* -----------------------------
   12. CLIENT TESTIMONIALS SLIDER
------------------------------ */
.tfg-testimonials-section {
    padding: clamp(64px, 10vw, 120px) 0;
    background: #f8fafc; /* Very light slate background for contrast */
}

.tfg-testimonials-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 1024px) {
    .tfg-testimonials-split {
        grid-template-columns: 5fr 7fr; /* Gives the slider slightly more room */
        gap: 80px;
    }
}

/* --- Left Side: Static Intro --- */
.tfg-testimonials-static .tfg-section-title {
    margin-bottom: 24px;
}
.tfg-testimonials-desc {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* --- Right Side: Slider Wrapper --- */
.tfg-slider-wrapper {
    position: relative;
    width: 100%;
    /* Dark Slate Glass Effect */
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #dc2626; /* Heavy Industry Red */
    border-radius: 4px;
    padding: 48px 32px 32px 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
@media (min-width: 768px) {
    .tfg-slider-wrapper { padding: 64px 48px 40px 48px; }
}

/* --- The Slider Track & Animation --- */
.tfg-slider-track {
    position: relative;
    min-height: 280px; 
    /* Added overflow hidden so slides don't bleed outside the box while moving */
    overflow: hidden; 
}

.tfg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    /* Default state: Waits off-screen to the right */
    transform: translateX(100px); 
    /* Smooth, cinematic easing */
    transition: all 0.7s cubic-bezier(0.25, 1, 0.2, 1);
    pointer-events: none;
}

/* The visible slide */
.tfg-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    position: relative; 
}

/* Pushes the old slide out to the left */
.tfg-slide.exit-left {
    transform: translateX(-100px);
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

/* Used when clicking 'Previous' to reverse the animation */
.tfg-slide.enter-left {
    transform: translateX(-100px);
}
.tfg-slide.exit-right {
    transform: translateX(100px);
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

/* --- Testimony Content --- */
.tfg-quote-mark {
    position: absolute;
    top: -10px; /* Brought down into the visible area */
    left: 0px;  /* Brought right into the visible area */
    font-family: var(--tfg-font-heading);
    font-size: 4rem; /* Slightly smaller so it fits perfectly */
    color: var(--tfg-primary-yellow);
    opacity: 0.3;
    line-height: 1;
    z-index: 0;
    pointer-events: none; /* Ensures it doesn't block the text from being clicked/selected */
}

.tfg-testimony-text {

    position: relative;
    top: 20px;
    left:20px;
    z-index: 2;
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    color: #ffffff;
    font-family: var(--tfg-font-body);
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 32px;
    text-transform: capitalize;
}

.tfg-testimony-author {
    position: relative;
    z-index: 2;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.tfg-author-name {
    font-family: var(--tfg-font-heading);
    color: var(--tfg-primary-yellow);
    font-size: 1.15rem;
    margin-bottom: 4px;
}
.tfg-author-role {
    color: #94a3b8;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Controls (Arrows & Dots) --- */
.tfg-slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    position: relative;
    z-index: 10;
}

.tfg-slider-nav { display: flex; gap: 12px; }
.tfg-slider-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tfg-slider-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
}
.tfg-slider-btn svg { width: 20px; height: 20px; }

.tfg-slider-dots { display: flex; gap: 8px; }
.tfg-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none; padding: 0;
}
.tfg-dot.active {
    background: var(--tfg-primary-yellow);
    transform: scale(1.3);
}
/* -----------------------------
   15. CONTACT & MAP
------------------------------ */
.tfg-contact-section { padding: clamp(48px, 8vw, 96px) 0; background: var(--tfg-dark-bg); border-top: 1px solid rgba(255,255,255,0.1); }
.tfg-contact-section .tfg-split-layout { align-items: stretch; }
.tfg-contact-form-wrapper { background: rgba(255,255,255,0.03); padding: 40px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05); }

.tfg-contact-form { display: flex; flex-direction: column; gap: 16px; }
.tfg-contact-form input, .tfg-contact-form select, .tfg-contact-form textarea { width: 100%; padding: 16px; background: rgba(255,255,255,0.05); color: #fff; font-family: var(--tfg-font-body); font-size: 1rem; border: 1px solid transparent; transition: all 0.3s; border-radius: 2px; }
.tfg-contact-form input::placeholder, .tfg-contact-form textarea::placeholder { color: #64748b; }
.tfg-contact-form input:focus, .tfg-contact-form select:focus, .tfg-contact-form textarea:focus { outline: none; border-color: var(--tfg-primary-yellow); background: rgba(255,255,255,0.1); }
.tfg-contact-form select { appearance: none; color: #64748b; }
.tfg-contact-form select:valid { color: #fff; }

.tfg-map-container { width: 100%; height: 100%; min-height: 400px; border-radius: 4px; overflow: hidden; filter: grayscale(100%) contrast(1.2); transition: filter 0.5s; }
.tfg-map-container:hover { filter: grayscale(0%) contrast(1); }


/* ==========================================
   17. REFINED INDUSTRIAL FOOTER
========================================== */
.tfg-site-footer {
    background-color: #0a0f1d; 
    color: #f1f5f9;
    padding: 6.25rem 0 2.5rem; 
    border-top: 8px solid var(--tfg-primary-yellow);
    font-family: var(--tfg-font-body);
}

/* --- MOBILE-FIRST GRID: 2 Columns Per Row --- */
.tfg-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forces 2 columns side-by-side on mobile */
    gap: 2.5rem 1.5rem; /* Vertical gap 2.5rem, Horizontal gap 1.5rem */
    margin-bottom: 2.5rem;
}

/* Brand Column: Centered and spans full width on mobile */
.tfg-footer-brand {
    grid-column: span 2; /* Takes up both columns on mobile */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the logo and text */
}

/* Center the social icons on mobile */
.tfg-footer-brand .tfg-social-links {
    justify-content: center;
    width: 100%;
}

@media (min-width: 768px) {
    /* Tablet: Align brand back to the left */
    .tfg-footer-brand {
        text-align: left;
        align-items: flex-start;
    }
    .tfg-footer-brand .tfg-social-links {
        justify-content: flex-start;
    }
}

@media (min-width: 1024px) {
    /* Desktop: 5-Column Grid */
    .tfg-footer-grid { 
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.5fr); 
        gap: 2rem; 
    }
    .tfg-footer-brand {
        grid-column: span 1; /* Reset the span so it fits in the 5-column layout */
    }
}

/* Brand Logo & Name */
.tfg-footer-brand img,
.tfg-footer-logo {
    height: 75px;
    width: auto;
    margin-bottom: 1.5rem;
    display: block;
}

.tfg-footer-company-name {
    font-family: var(--tfg-font-heading);
    color: var(--tfg-primary-yellow);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.tfg-footer-mission {
    color: #94a3b8;
    font-size: 0.75rem; /* User Request Applied */
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 300px;
}

/* Typography & Links */
.tfg-footer-title {
    font-family: var(--tfg-font-heading);
    color: #ffffff;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    position: relative;
}

.tfg-footer-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--tfg-primary-red);
}

.tfg-footer-links li {
    margin-bottom: 0.875rem;
}

.tfg-footer-links a {
    color: #94a3b8;
    font-size: 0.75rem; /* User Request Applied */
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.tfg-footer-links a:hover {
    color: var(--tfg-primary-yellow);
    padding-left: 0.5rem;
}

/* Contact Details */
.tfg-footer-contact-item {
    margin-bottom: 1.5rem;
}

.tfg-footer-contact-item strong {
    display: block;
    color: #ffffff;
    font-size: 0.65rem; /* User Request Applied */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.tfg-footer-contact-item p, 
.tfg-footer-contact-item a {
    color: #94a3b8;
    font-size: 0.75rem; /* User Request Applied */
    line-height: 1.6;
    word-break: break-word;
}

.tfg-footer-contact-item a:hover {
    color: #ffffff;
}

/* Social Icons */
.tfg-social-links {
    display: flex;
    gap: 1rem;
}

.tfg-social-links a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.tfg-social-links a:hover {
    background-color: var(--tfg-primary-red);
    transform: translateY(-3px);
}

.tfg-social-links svg {
    width: 20px;
    height: 20px;
}

/* Footer Bottom Bar */
.tfg-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    color: #64748b;
    font-size: 0.75rem; /* User Request Applied */
    padding-bottom: 5rem; /* Generous bottom padding for mobile */
}
.tfg-footer-bottom p, .tfg-footer-bottom a {
    font-size: 0.75rem; /* User Request Applied */
}

@media (min-width: 768px) {
    .tfg-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding-top: 2.5rem;
        padding-bottom: 0;
    }
}

/* ==========================================
   DEVELOPER CREDIT (RH DIGITAL) HOVER EFFECT
========================================== */
.tfg-dev-credit {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.rh-credit-link {
    color: #00f2fe; /* Bright Cyan */
    text-decoration: none;
    font-weight: 800;
    position: relative;
    padding-bottom: 2px;
    display: inline-block;
    transition: all 0.3s ease;
}

/* The animated underline */
.rh-credit-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #ffb300; /* RH Orange */
    transition: width 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

/* Hover States: Snaps to Orange with a subtle glow */
.rh-credit-link:hover {
    color: #ffb300; /* RH Orange */
    filter: drop-shadow(0 0 8px rgba(255, 122, 0, 0.5));
}

.rh-credit-link:hover::after {
    width: 100%;
}

/* -----------------------------
   17. UTILITIES (Back to Top)
------------------------------ */
.tfg-scroll-top { position: fixed; bottom: -60px; right: 32px; width: 48px; height: 48px; background: var(--tfg-primary-yellow); color: var(--tfg-primary-blue); border: none; border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 999; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2); }
.tfg-scroll-top.tfg-visible { bottom: 32px; opacity: 1; }
.tfg-scroll-top:hover { transform: translateY(-4px); background: #fff; }


/* -----------------------------
   18. OUR APPROACH SECTION
------------------------------ */
.tfg-approach-section {
    padding: clamp(64px, 5vw, 120px) 0;
    background: var(--tfg-light-bg); 
    border-top: 1px solid #e2e8f0;
}

.tfg-approach-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

/* Responsive Grid Adjustments */
@media (min-width: 768px) { .tfg-approach-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (min-width: 1024px) { .tfg-approach-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } }

.tfg-approach-card {
    position: relative;
    background: #fff;
    padding: 48px 32px 40px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    border-bottom: 4px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hover Effect: The bottom border turns primary yellow, card lifts slightly */
.tfg-approach-card:hover {
    border-bottom-color: var(--tfg-primary-yellow);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
}

/* Giant Faded Background Number */
.tfg-approach-number {
    position: absolute;
    top: -20px;
    right: -10px;
    font-family: var(--tfg-font-heading);
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tfg-text-dark);
    opacity: 0.03; /* Barely visible */
    z-index: -1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Number turns red and slides up slightly on hover */
.tfg-approach-card:hover .tfg-approach-number {
    color: #dc2626; /* Heavy Industry Red */
    opacity: 0.08;
    transform: translateY(-10px);
}

.tfg-approach-title {
    font-size: 1.5rem;
    color: var(--tfg-primary-blue);
    margin-bottom: 16px;
    position: relative;
}

.tfg-approach-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    flex-grow: 1; /* Pushes the content evenly if cards are different heights */
}


/* -----------------------------
   6. PROJECT SHOWCASE INTRO (Cinematic Bridge)
------------------------------ */
.tfg-project-intro-section {
   position: relative; /* Required for z-index to work */
    padding: clamp(64px, 10vw, 120px) 0 0 0; 
    background: #ffffff; 
    
    /* THE FIX: Forces this section to sit ABOVE the next section */
    z-index: 50; 
    
    /* THE FIX: Prevents the hanging box from being cut off */
    overflow: visible !important;
}

.tfg-showcase-wrapper {
    position: relative;
    width: 100%;
}

/* The Image Container */
.tfg-showcase-image-box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Taller on mobile */
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Deep premium shadow */
}

/* Swaps to a super-wide cinematic ratio on desktops */
@media (min-width: 1024px) {
    .tfg-showcase-image-box { aspect-ratio: 21 / 8; } 
}

/* The Image with a slow, premium zoom on hover */
.tfg-showcase-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tfg-showcase-wrapper:hover .tfg-showcase-image-box img {
    transform: scale(1.05); 
}

/* Subtle dark gradient at the bottom of the image */
.tfg-showcase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,0.6) 0%, rgba(15,23,42,0) 40%);
    pointer-events: none;
}

/* --- The Overlapping Intro Box (Ultra-Compact & Hanging) --- */
.tfg-showcase-content {
    position: relative;
    /* Dark Slate Glass Effect */
    background: rgba(15, 23, 42, 0.65); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #dc2626; /* Heavy Industry Red */
    
    color: #fff;
    padding: 20px; /* Very tight padding for a compact look */
    margin-top: -32px; /* Overlaps the image slightly on mobile */
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 32px; /* Creates space below so it doesn't hit the next section */
    z-index: 10;
    border-radius: 4px;
}

/* On Desktop, it becomes a tiny, hanging glass panel */
@media (min-width: 1024px) {
    .tfg-showcase-content {
        position: absolute;
        bottom: -24px; /* Pulls the box down so it hangs completely off the bottom edge */
        left: 48px;
        width: 100%;
        max-width: 320px; /* Shrunk down significantly (was 400px) */
        margin: 0;
        padding: 24px; /* Tighter desktop padding */
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }
}

.tfg-showcase-subtitle {
    color: var(--tfg-primary-yellow);
    font-family: var(--tfg-font-heading);
    font-size: 0.7rem; /* Shrunk font */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

.tfg-showcase-title {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem); /* Much smaller, compact title */
    color: #fff;
    line-height: 1.3;
    margin-bottom: 10px;
}

.tfg-showcase-desc {
    color: #e2e8f0; 
    font-size: 0.8rem; /* Smaller text to fit the tight box */
    line-height: 1.5;
    margin: 0;
}