/* =============================
   GLOBAL STYLES
============================= */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', 'Roboto', sans-serif;
    background: #ffffff;
    color: #111111;
    * {
    box-sizing: border-box;
}

}

a {
    text-decoration: none;
    color: inherit;
}

/* =============================
   NAVIGATION BAR
============================= */
.navbar {
    width: 100%;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #eee;
}

.nav-container {
    max-width: 1250px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
}

/* Logo */
.nav-logo img {
    height: 48px;
    width: auto;
}

/* Desktop Navigation */
.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 15px;
    font-weight: 500;
}

.nav-links a {
    padding: 6px 0;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #0073e6; /* Subtle professional blue highlight */
}

/* =============================
   DROPDOWN (DESKTOP)
============================= */
.dropdown {
    position: relative;
}

/* Make the button and content inside the same hover zone */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Remove hover on button itself */
.dropbtn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0; /* optional for spacing */
}

.dropbtn .arrow {
    font-size: 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: #ffffff;
    min-width: 210px;
    top: 100%; /* directly below the button */
    left: 0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 10px 0;
    border: 1px solid #eee;
    z-index: 1000; /* ensure it’s above other content */
}

.dropdown-content a {
    padding: 10px 18px;
    display: block;
    font-size: 14px;
    color: #222;
}

.dropdown-content a:hover {
    background: #f5f7fa;
}

/* =============================
   CONTACT BUTTON (DESKTOP)
============================= */
.contact-btn {
    padding: 10px 20px;
    background: #000;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.contact-btn:hover {
    background: #333;
}

/* =============================
   MOBILE MENU
============================= */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 26px;
    height: 3px;
    background: #000;
    border-radius: 3px;
    transition: 0.3s ease;
}

/* Mobile menu container */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    padding: 20px;
    border-top: 1px solid #eee;
}

.mobile-menu a {
    padding: 12px 0;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu .contact-btn {
    margin-top: 15px;
    display: inline-block;
}

/* Mobile Dropdown */
.mobile-dropdown button {
    background: none;
    border: none;
    padding: 12px 0;
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

#mobileDropdownContent {
    display: none;
    flex-direction: column;
}

#mobileDropdownContent a {
    padding-left: 15px;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
}

/* =============================
   RESPONSIVE BEHAVIOUR
============================= */
@media (max-width: 900px) {

    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: none;
    }
}



/* =============================
   HERO SECTION
============================= */
.hero {
    position: relative;
    width: 100%;
    height: 85vh;
    background: url('../assets/img/hero.jpg') center/cover no-repeat;
    display: flex;
    align-items: flex-end; /* 👈 anchor content to bottom */
    padding: 0 8% 120px;   /* 👈 bottom spacing */
}

/* Dark overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* Vertical text container */
.hero-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #ffffff;
    max-width: 900px;
}

/* Individual words – LARGE HERO STATEMENT */
.hero-text span {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}

/* Styled ampersand */
.hero-text em {
    font-style: normal;
    font-weight: 400;
    font-size: 0.7em;
    opacity: 0.75;
    margin-left: 6px;
    position: relative;
    top: -4px;
}

/* =============================
   RESPONSIVE HERO
============================= */
@media (max-width: 900px) {
    .hero {
        height: 60vh;
        padding: 0 24px 60px;
    }

    .hero-text {
        gap: 10px;
    }

    .hero-text span {
        font-size: 38px;
        letter-spacing: -0.5px;
    }
}





/* =============================
   CORE CAPABILITIES (MINIMAL)
============================= */
.core-pillars {
    padding: 80px 20px;
    background: #f9f9f9;
}

.section-header {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 16px;
    color: #555;
    font-weight: 300;
}

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

/* Individual item */
.pillar-item {
    border-bottom: 1px solid #ddd;
}

/* Header */
.pillar-header {
    width: 100%;
    background: none;
    border: none;
    padding: 22px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    color: #111;
    cursor: pointer;
}

.pillar-header .icon {
    font-size: 26px;
    transition: transform 0.3s ease;
}

/* Content (collapsed by default) */
.pillar-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* Inner content */
.pillar-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 25px;
    padding: 25px 10px 35px;
}

.pillar-inner img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
}

.pillar-text h4 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #111;
}

.pillar-text p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* Active state */
.pillar-item.active .pillar-content {
    max-height: 600px;
}

.pillar-item.active .icon {
    transform: rotate(45deg);
}

/* Responsive */
@media (max-width: 768px) {
    .pillar-inner {
        grid-template-columns: 1fr;
    }

    .pillar-inner img {
        height: 200px;
    }
}





/* =============================
   IMPACT METRICS
============================= */
.impact-metrics {
    background: #000;
    padding: 80px 20px;
    text-align: center;
}

.metrics-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
    gap: 40px;
}

.metric h2 {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.metric p {
    font-size: 16px;
    font-weight: 400;
    color: #555;
    max-width: 250px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 900px) {
    .metrics-container {
        flex-direction: column;
        gap: 40px;
    }
}


/* =============================
   FEATURED CASE STUDIES (MINIMAL)
============================= */
.case-studies-preview {
    padding: 90px 20px;
    background: #f8f7f7;
}

.case-studies-preview .container {
    max-width: 900px;
    margin: auto;
}

/* Header */
.case-header {
    text-align: center;
    margin-bottom: 50px;
}

.case-header h2 {
    font-size: 30px;
    font-weight: 600;
    color: #111;
}

/* List */
.case-list {
    display: flex;
    flex-direction: column;
}

/* Row (Link) */
.case-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    padding: 24px 10px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #e6e6e6;
    transition: all 0.25s ease;
}

/* Hover */
.case-row:hover {
    background: #ffffff;
}

/* Index */
.case-index {
    font-size: 14px;
    font-weight: 500;
    color: #aaa;
}

/* Title */
.case-title {
    font-size: 20px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.2px;
}

/* Responsive */
@media (max-width: 768px) {
    .case-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 18px 0;
    }

    .case-index {
        font-size: 13px;
    }

    .case-title {
        font-size: 17px;
    }
}



/* =============================
   CTA STRIP
============================= */
.cta-strip {
    background: #000;
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.cta-strip .container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cta-strip p {
    font-size: 22px;
    font-weight: 500;
}

.cta-strip .btn-primary {
    padding: 14px 36px;
    background: #fff;
    color: #000 !important;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.2s ease;
}

.cta-strip .btn-primary:hover {
    background: #e6e6e6;
}

/* =============================
   RESPONSIVE CASE STUDIES + CTA
============================= */
@media (max-width: 900px) {
    .case-studies-preview h2 {
        font-size: 26px;
    }

    .case-tile h3 {
        font-size: 18px;
    }

    .case-tile p {
        font-size: 13px;
    }

    .cta-strip p {
        font-size: 18px;
    }
}




/* =============================
   GLOBAL RESET
============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================
   ABOUT HERO (VISUAL ONLY)
============================= */
.about-hero {
    position: relative;
    height: 40vh;
    background: url('../assets/img/28.jpeg') center/cover no-repeat;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

/* =============================
   ABOUT OVERVIEW
============================= */
.about-overview {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 20px 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

/* Section header (acts like title before content) */
.about-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 30px;
}

.about-header h1 {
    font-size: 36px;
    font-weight: 600;
    color: #111;
    margin-bottom: 12px;
}

.about-header p {
    font-size: 17px;
    font-weight: 300;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Overview blocks */
.overview-item {
    text-align: center;
}

.overview-item h3 {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin-bottom: 14px;
}

.overview-item p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #444;
}

/* Our Approach – no bullets, clean lines */
.approach-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15.5px;
    color: #444;
    line-height: 1.6;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 900px) {
    .about-overview {
        grid-template-columns: 1fr;
        padding: 80px 20px;
        gap: 40px;
    }

    .about-header h1 {
        font-size: 30px;
    }
}


/* =============================
   ABOUT SECTIONS (GENERAL)
============================= */
.about-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    text-align: center;
}

.about-section h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #111;
}

/* =============================
   CORE VALUES
============================= */
.values-grid {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.value-item {
    flex: 0 0 280px;
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.value-item img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    margin-bottom: 16px;
    background: #f1f1f1;
    border-radius: 6px;
}

.value-item h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.value-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* =============================
   FOUNDER SECTION
============================= */
.founder-section {
    text-align: left;
}

.founder-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 50px;
    align-items: start;
}

.founder-image img {
    width: 100%;
    border-radius: 10px;
}

.founder-text h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.founder-text p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #444;
    margin-bottom: 16px;
}

/* =============================
   FOOTER CTA
============================= */
.footer-cta {
    background: #000;
    color: #fff;
    padding: 50px 20px;
    text-align: center;
}

.footer-cta h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
}

.footer-cta p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 900px) {

    /* Hero */
    .about-hero-content h1 {
        font-size: 28px;
    }

    /* Overview stacks vertically */
    .about-overview {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 60px 20px;
    }

    /* Founder stacks */
    .founder-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .founder-text {
        text-align: left;
    }
}

@media (max-width: 600px) {

    .about-section {
        padding: 60px 20px;
    }

    .overview-item h3 {
        font-size: 20px;
    }

    .overview-item p,
    .overview-item li {
        font-size: 15px;
    }
}







/* =============================
   SERVICE HERO SECTION
============================= */
.service-hero {
    position: relative;
    width: 100%;
    height: 50vh; /* slightly taller hero for impact */
    background-image: url('../assets/img/amazing-balance-blur-boulder.png'); /* update with your local image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.service-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.service-hero .hero-content {
    position: relative;
    color: #fff;
    text-align: center;
    max-width: 900px;
}

.service-hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}

.service-hero p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .service-hero h1 {
        font-size: 32px;
    }
    .service-hero p {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .service-hero {
        height: 45vh;
    }
    .service-hero h1 {
        font-size: 26px;
    }
    .service-hero p {
        font-size: 14px;
    }
}


/* =============================
   SERVICE CONTENT (Minimalist & Interactive)
============================= */
.service-content {
    padding: 60px 20px;
    background: #fff;
    color: #111;
}

.service-content .container {
    max-width: 1200px;
    margin: auto;
}

/* Each service section as a card */
.service-section {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.service-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.service-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-section h2 .toggle-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.service-section.collapsed h2 .toggle-icon {
    transform: rotate(-90deg);
}

.service-section p,
.service-section li,
.service-section ol li ul li {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 12px;
    text-align: left;
}

.service-section ul,
.service-section ol {
    margin-left: 20px;
    padding-left: 0;
}

/* Hide content when collapsed */
.service-section .content {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.service-section.collapsed .content {
    max-height: 0;
    padding: 0;
    margin: 0;
}

/* CTA Button */
.service-cta {
    text-align: center;
    margin: 50px 0;
}

.service-cta .btn-primary {
    padding: 16px 36px;
    background: #000;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.3s ease;
    font-size: 16px;
    text-decoration: none;
}

.service-cta .btn-primary:hover {
    background: #333;
    transform: translateY(-2px);
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 1200px) {
    .service-section h2 {
        font-size: 26px;
    }
}

@media (max-width: 900px) {
    .service-content {
        padding: 40px 15px;
    }
    .service-section h2 {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .service-section h2 {
        font-size: 22px;
    }
    .service-section p,
    .service-section li,
    .service-section ol li ul li {
        font-size: 15px;
    }
}




/* =============================
   SERVICE FULL-WIDTH IMAGE
============================= */

.service-image-full {
    width: 100%;
    margin: 120px 0; /* space above & below */
}

.service-image-full img {
    width: 100%;
    height: auto;          /* let image keep its natural height */
    max-height: 80vh;      /* prevents it from becoming too tall */
    object-fit: contain;  /* 👈 no cropping */
    display: block;
    background: #000;     /* optional frame if image doesn’t fill width */
}





/* =============================
   EXPERTISE PAGE HERO
============================= */
.expertise-hero {
    position: relative;
    width: 100%;
    height: 45vh;
    background: url('https://i.pinimg.com/1200x/38/23/0d/38230d89ba6693f84b505605e08c0647.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.expertise-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.expertise-hero .hero-content {
    position: relative;
    color: #fff;
    max-width: 900px;
    padding: 0 20px;
}

.expertise-hero h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.expertise-hero p {
    font-size: 18px;
    font-weight: 300;
}

/* =============================
   MAIN CONTENT
============================= */
.expertise-main {
    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;
    text-align: center;
}

.expertise-section {
    margin-bottom: 60px;
}

.expertise-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #111;
}

/* =============================
   EXPERTISE CAROUSEL
============================= */
.expertise-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

.expertise-carousel::-webkit-scrollbar {
    height: 8px;
}

.expertise-carousel::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.expertise-tile {
    flex: 0 0 280px;
    background: #f9f9f9;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    scroll-snap-align: start;
}

.expertise-tile h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #000;
}

.expertise-tile p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #444;
}

.expertise-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    cursor: pointer;
}

/* =============================
   CHALLENGES & WHY SYGNIA
============================= */
.expertise-section.challenges ul,
.expertise-section.why-sygnia ul {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.expertise-section.challenges ul li,
.expertise-section.why-sygnia ul li {
    margin-bottom: 18px;
    font-size: 16px;
    position: relative;
    padding-left: 26px;
    line-height: 1.6;
}

.expertise-section.challenges ul li::before,
.expertise-section.why-sygnia ul li::before {
    content: "\2713"; /* checkmark symbol */
    position: absolute;
    left: 0;
    color: #0073e6;
    font-weight: bold;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 1200px) {
    .expertise-tile {
        flex: 0 0 220px;
    }
}

@media (max-width: 992px) {
    .expertise-tile {
        flex: 0 0 45%;
    }
}

@media (max-width: 700px) {
    .expertise-tile {
        flex: 0 0 100%;
    }
}






/* =============================
   CASE STUDIES HERO SECTION
============================= */
.case-studies-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin-bottom: 40px;
}

.case-studies-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.case-studies-hero .hero-content {
    position: relative;
    color: #fff;
    text-align: center;
    max-width: 900px;
}

.case-studies-hero h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}

.case-studies-hero p {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
}

/* =============================
   CASE STUDIES HEADER
============================= */
.case-studies-header {
    text-align: center;
    margin-bottom: 60px;
}

.case-studies-header h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.case-studies-header p {
    font-size: 18px;
    font-weight: 300;
    color: #555;
}

/* =============================
   CASE STUDY CARDS
============================= */
.case-studies-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.case-studies-cards {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.case-card {
    display: flex;
    flex-direction: row;
    gap: 40px;
    background: #fdfdfd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 30px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    align-items: flex-start;
}

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

.case-card .case-image {
    width: 350px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.case-card .case-content {
    flex: 1;
}

.case-card .case-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.case-card .case-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 8px;
}

.case-card .case-content p,
.case-card .case-content ul {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: #333;
    margin-bottom: 10px;
}

.case-card .case-content ul {
    list-style: disc;
    padding-left: 20px;
}

.case-card .client-type {
    font-weight: 500;
    margin-bottom: 15px;
    color: #555;
}

/* Handle case cards without images */
.case-card.no-image {
    flex-direction: column;
}

.case-card.no-image .case-image {
    display: none;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 900px) {
    .case-card {
        flex-direction: column;
        padding: 20px;
    }

    .case-card .case-image {
        width: 100%;
        height: auto;
    }

    .case-studies-hero h1 {
        font-size: 30px;
    }

    .case-studies-hero p {
        font-size: 16px;
    }

    .case-studies-header h1 {
        font-size: 28px;
    }

    .case-studies-header p {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .case-studies-hero {
        height: 40vh;
    }

    .case-studies-hero h1 {
        font-size: 26px;
    }

    .case-studies-hero p {
        font-size: 14px;
    }

    .case-studies-header h1 {
        font-size: 24px;
    }

    .case-studies-header p {
        font-size: 14px;
    }
}



/* =============================
   HERO SECTION — INSIGHTS (VISUAL ONLY)
============================= */
.hero-insights {
    position: relative;
    width: 100%;
    height: 50vh;
    background: url('/assets/img/insight.png') center/cover no-repeat;
}

.hero-insights .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

/* =============================
   INSIGHTS SECTION
============================= */
.insights-articles {
    padding: 100px 20px 60px;
    background: #f9f9f9;
}

/* Header under hero */
.insights-header {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.insights-header h1 {
    font-size: 36px;
    font-weight: 600;
    color: #111;
    margin-bottom: 14px;
}

.insights-header p {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: #555;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 900px) {
    .hero-insights {
        height: 35vh;
    }

    .insights-articles {
        padding: 80px 20px 50px;
    }

    .insights-header h1 {
        font-size: 30px;
    }

    .insights-header p {
        font-size: 16px;
    }
}


.articles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.articles-list li a {
    display: block;
    background: #fff;
    padding: 18px 20px;
    border-radius: 8px;
    color: #111;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: 0.2s ease;
    text-decoration: none;
}

.articles-list li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}


/* =============================
   ARTICLES GRID
============================= */

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.article-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #111;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.article-card h3 {
    font-size: 1.05rem;
    padding: 16px 16px 8px;
}

.article-card p {
    font-size: 0.95rem;
    padding: 0 16px 18px;
    color: #555;
    line-height: 1.5;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.1);
}



/* =============================
   CTA SECTION
============================= */
.insights-cta {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

.insights-cta h2 {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 600;
}

.insights-cta .btn-primary {
    padding: 14px 32px;
    background: #fff;
    color: #000 !important;
    font-weight: 600;
    border-radius: 6px;
    transition: 0.2s ease;
}

.insights-cta .btn-primary:hover {
    background: #e6e6e6;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 900px) {
    .hero-insights h1 {
        font-size: 28px;
    }

    .hero-insights p {
        font-size: 16px;
    }

    .articles-list {
        grid-template-columns: 1fr;
    }
}





/* =============================
   HERO SECTION
============================= */
.hero-contact {
    background: url('/assets/img/contact.jpg') center/cover no-repeat;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 0 20px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.hero-content {
    position: relative;
}

.hero-content h1 {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.hero-content p {
    font-size: 18px;
    color: #fff;
    font-weight: 300;
}

/* =============================
   CONTACT SECTION
============================= */
.contact-section {
    padding: 80px 20px;
    background: #f9f9f9;
}

.contact-container {
    display: flex;
    max-width: 1200px;
    margin: auto;
    gap: 60px;
    flex-wrap: wrap;
}

/* LEFT FORM */
.contact-form {
    flex: 1;
    min-width: 300px;
}

.contact-form h2 {
    font-size: 28px;
    margin-bottom: 25px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
}

.btn-primary {
    padding: 14px 32px;
    background: #000;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background: #333;
}

/* RIGHT INFO */
.contact-info {
    flex: 1;
    min-width: 300px;
}

.contact-info h2 {
    font-size: 28px;
    margin-bottom: 25px;
}

.info-card {
    background: #fff;
    padding: 18px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.map-container iframe {
    width: 100%;
    border-radius: 6px;
    border: none;
}

/* SOCIAL ICONS */
.contact-socials {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

.contact-socials a {
    width: 42px;
    height: 42px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.contact-socials a:hover {
    background: #333;
}

/* =============================
   FINAL CTA
============================= */
.contact-cta {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

.contact-cta h2 {
    font-size: 32px;
    margin-bottom: 25px;
}

.contact-cta .btn-primary {
    background: #fff;
    color: #000;
}

.contact-cta .btn-primary:hover {
    background: #e6e6e6;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 900px) {
    .contact-container {
        flex-direction: column;
    }

    .hero-content h1 {
        font-size: 28px;
    }

    .hero-content p {
        font-size: 16px;
    }
}






/* =============================
   RESPONSIBLE USE OF AI
============================= */
.ai-responsibility {
    background: #ffffff;
    padding: 90px 20px;
}

.ai-container {
    max-width: 900px;
    margin: auto;
}

/* Header */
.ai-header {
    text-align: center;
    margin-bottom: 50px;
}

.ai-header h2 {
    font-size: 30px;
    font-weight: 600;
    color: #111;
    margin-bottom: 16px;
}

.ai-intro {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}

/* =============================
   KEY AI STATEMENT
============================= */
.ai-statement {
    background: #f8f8f8;
    padding: 36px 32px;
    border-left: 4px solid #111;
    margin-bottom: 60px;
    text-align: center;
}

/* Main statement */
.ai-headline {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: #111;
    margin-bottom: 10px;
}

/* Supporting line */
.ai-support {
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.7;
    color: #444;
    max-width: 720px;
    margin: 0 auto;
}


/* Content blocks */
.ai-block {
    margin-bottom: 50px;
}

.ai-block h3,
.ai-guardrails h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 14px;
    color: #111;
}

.ai-block p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #444;
    margin-bottom: 16px;
}

.ai-block ul,
.ai-guardrails ul {
    padding-left: 18px;
}

.ai-block li,
.ai-guardrails li {
    font-size: 15.5px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 8px;
}

/* Guardrails box */
.ai-guardrails {
    background: #fafafa;
    padding: 32px;
    border-radius: 8px;
    margin-bottom: 50px;
}

/* Note */
.ai-note {
    font-size: 14.5px;
    font-style: italic;
    color: #555;
    margin-top: 10px;
}

/* Download */
.ai-download {
    text-align: center;
    margin-top: 60px;
}

.ai-download-btn {
    display: inline-block;
    padding: 14px 34px;
    border: 2px solid #111;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}

.ai-download-btn:hover {
    background: #111;
    color: #ffffff;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 768px) {
    .ai-responsibility {
        padding: 70px 16px;
    }

    .ai-header h2 {
        font-size: 26px;
    }

    .ai-statement {
        padding: 24px;
    }
}