/* ============================================================
   THINKAMIGO HOME PORTAL - FULL STABLE RESTORE (v1.65)
   Covers: Branding Bar, Stone/Sand Grids, Card Engine
   Architecture: 1250px Wide Horizon | 15px Universal Rhythm
   ============================================================ */

/* --- 1. THE BRANDING INTRO BAR --- */
.branding-intro-bar { 
    background-color: var(--brand-blue); 
    padding: 40px 0; 
    width: 100%; 
    clear: both; 
    display: block;
}

.branding-flex { 
    display: grid !important; 
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 15px; 
    align-items: center; 
    max-width: 1250px; 
    margin: 0 auto; 
    padding: 0 20px;
    box-sizing: border-box;
}

.hero-logotype { grid-column: span 2 !important; }
.hero-logotype img { width: 100%; height: auto; display: block; }
.hero-statement { grid-column: span 2 !important; text-align: center; padding: 0 10px; }
.hero-action { grid-column: span 1 !important; display: flex; justify-content: flex-end; }

.hero-statement h1, .branding-text { 
    font-family: 'Poppins', sans-serif;
    font-size: 19px; 
    line-height: 1.2; 
    color: #ffffff; 
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pill-contact-btn { 
    display: inline-block; 
    padding: 10px 35px; 
    border: 4px solid #ffffff; 
    border-radius: 50px; 
    color: #ffffff; 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
    font-size: 16px; 
    font-weight: 500;
    background-color: transparent;
    transition: background-color 0.4s ease;
    white-space: nowrap;
}

.pill-contact-btn:hover { 
    background-color: rgba(255, 255, 255, 0.15) !important; 
    color: #ffffff !important;
}

/* --- 2. THE DUAL GRID WRAPPERS (UNIVERSAL 15PX RHYTHM) --- */
.hero-full-width-wrapper { 
    background-color: #f5f5ef; 
    /* 15px top to branding | 15px bottom to Story grid */
    padding: 15px 0; 
    width: 100%; 
    clear: both; 
}

.blog-full-width-wrapper { 
    background-color: #f1ebe7; 
    /* SYNCED: 15px top from Feature grid | 15px bottom to Awards */
    padding: 15px 0; 
    width: 100%; 
    clear: both; 
}

.home-hero-grid, .blog-grid { 
    display: grid !important; 
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 15px; 
    max-width: 1250px; 
    margin: 0 auto; 
    padding: 0; 
    box-sizing: border-box;
    align-items: stretch;
}

/* --- 3. THE CARD ENGINE (ALIGNED & STATIC) --- */
.home-hero-grid a, .blog-grid a { 
    display: flex !important; 
    flex-direction: column !important; 
    background: #ffffff; 
    text-decoration: none; 
    color: inherit; 
    height: 100% !important; 
    border-radius: 4px; 
    overflow: hidden;
}

.featured-card img, .service-card img, .blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.card-content { 
    padding: 15px; 
    flex-grow: 1 !important; 
    display: flex;
    flex-direction: column;
}

/* --- 4. SPECIFIC CARD TYPOGRAPHY --- */
.featured-card .card-content h2 { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 500;color: var(--brand-blue); margin: 0 0 10px 0; }
.featured-card .card-content h3 { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 300;
margin: 0 0 15px 0; color: #333; }
.featured-card .card-content p { font-family: 'Poppins', sans-serif; font-size: 16px; margin: 0 0 15px 0; color: #333; line-height: 1.5; }

.service-card h3, .blog-card h3 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 10px 0; color: var(--brand-blue); }
.service-card p, .blog-card p { font-family: 'Poppins', sans-serif; font-size: 16px; margin: 0 0 15px 0; color: #333; line-height: 1.4; }

/* --- 5. GRID SPAN LOCKS --- */
.featured-card { 
    grid-column: span 2 !important; 
    grid-row: span 2 !important; 
}

/* --- 6. AWARDS PANEL (15PX SYNC) --- */
.awards-full-width-wrapper { 
    background-color: #f5f5ef; 
    padding: 60px 0; /* Maintains breathing room for the footer logos */
    width: 100%; 
    clear: both; 
}

.awards-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px; 
    max-width: 1150px; 
    margin: 0 auto; 
    padding: 0 20px; 
    align-items: center; 
    justify-items: center; 
}

.award-item img { width: 100%; max-width: 180px; height: auto; display: block; opacity: 0.5; }

/* --- 7. BACK TO TOP / SCROLL UI --- */
.scroll-up, #back-to-top, .back-to-top, .scroll-to-top {
    position: fixed !important;
    right: 10px !important;
    bottom: 200px !important;
    z-index: 9999;
}

/* --- 8. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1280px) {
    .home-hero-grid, .blog-grid { padding: 0 20px; }
}

@media (max-width: 1024px) {
    .branding-intro-bar { padding: 30px 0; }
    .branding-flex { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px; padding: 0 20px; }
    .hero-logotype { width: 100%; max-width: 320px; } 
    .hero-statement h1, .branding-text { white-space: normal; font-size: 18px; text-align: center; }
    .hero-action { display: none !important; }

    /* MOBILE SYNC: Consistent 15px vertical spacing */
    .hero-full-width-wrapper { padding: 15px 0; }
    .blog-full-width-wrapper { padding: 15px 0; }

    .home-hero-grid, .blog-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px; 
        padding: 0; 
    }
    .featured-card { grid-column: span 2 !important; }
    .awards-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 15px; }

    .scroll-up, #back-to-top, .back-to-top, .scroll-to-top { right: 5px !important; }
}

@media (max-width: 600px) {
    .home-hero-grid, .blog-grid { grid-template-columns: 1fr !important; }
    .featured-card { grid-column: span 1 !important; }
    .awards-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 10px; }
}