/* style.css - Common styling for all files */

#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

/* --- Reset & Global --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif; /* Modern sans-serif */
  line-height: 1.6;
  color: #333;
  background-color: #f0f0f0; /* Default background color for page */
  overflow-x: hidden; /* Prevent horizontal scrollbars from full-bleed or background elements */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

ul {
  list-style: none;
}

/* --- Utility Classes --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.bg-grey {
  background-color: #f0f0f0;
}

.bg-white {
  background-color: #ffffff;
}

.bg-light-grey {
  background-color: #f5f5f5;
}

.text-center {
  text-align: center;
}

/* --- Section Styling --- */
section {
  padding: 40px 0;
}

.section-header {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.section-subhead {
  max-width: 900px;
  margin: 0 auto 50px;
  font-size: 1.1rem;
}

/* --- Grids --- */
.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* --- SPECIFIC TO DESIGN REQUIREMENTS --- */

/* 1. Image behind navbar and hero.
  This container must be used in the final template,
  wrapping both navbar and hero text.
*/
.top-hero-image-wrapper {
  background-image: url('placeholder-technology-bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  /* Ensure this has some height to show the image */
  min-height: 80vh;
}

/* Ensure the content inside is readable */
.top-hero-image-wrapper h1,
.top-hero-image-wrapper h2,
.top-hero-image-wrapper p,
.top-hero-image-wrapper .logo,
.top-hero-image-wrapper nav a {
  color: #fff; /* Make text light over dark image */
}

/* Position the navbar and hero text within this wrapper */
.top-hero-image-wrapper .navbar-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
}

.top-hero-image-wrapper .hero-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Icon (Simplified path from retrieved assets) */
.falcon-icon {
  fill: #333;
  width: 50px;
  height: auto;
  margin-bottom: 20px;
}

/* --- Hero Section Background & Layout --- */

.hero-background-wrapper {
    position: relative;
    /* Removed overflow: hidden from here as we'll apply it to hero-content if needed, 
       but actually keeping it here is fine to contain the pseudo-element if we keep it here.
       Wait, if I move the pseudo-element to hero-content, I'll put overflow: hidden there.
    */
    height: 90vh;
    width: 100%;
    background-color: #fff;

    /* Flexbox setup to stack the navbar and the content */
    display: flex;
    flex-direction: column;
}

/* Moving the background to hero-content so it starts AFTER the navbar */
.hero-content {
    position: relative;
    overflow: hidden;
    z-index: 1; /* Create a stacking context to keep the pseudo-element inside it */
    /* flex-grow: 1 tells this container to take up all the remaining space below the navbar */
    flex-grow: 1;
    display: flex;
    align-items: center; /* Vertically centers the text block */
    justify-content: center; /* Horizontally centers the container, while text inside is left-aligned */
}

.hero-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -2px; /* Slight overflow to fix the 1px seam at the bottom */
    background-image: 
        linear-gradient(to right, 
            rgba(255, 255, 255, 1) 0%, 
            rgba(255, 255, 255, 1) 25%,
            rgba(255, 255, 255, 0) 60%),
        url('../images/Cees-HTI-video-still-3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Ensure your navbar doesn't shrink when flexbox is applied to the wrapper */
.navbar-placeholder {
    flex-shrink: 0;
    background-color: #fff;
}


/* --- Navigation Links --- */
.nav-menu a,
.nav-menu a:visited {
    text-decoration: none;
    color: #2B313F !important;
}

.nav-menu a:hover {
    opacity: 0.8; /* Slight fade on hover */
}

/* --- Desktop Menu Layout --- */
.nav-menu {
    display: flex;
    gap: 30px;
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide hamburger on desktop */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 100; /* Keeps button on top of the menu when open */
}

/* The three lines of the hamburger */
.mobile-menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #2B313F !important;
    transition: all 0.3s ease;
}

.grid-clarity {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 80px;
    align-items: center; /* This keeps the title vertically centered relative to the text block */
}

/* Ensure the text block in the clarity section stays right-aligned on desktop */
.grid-clarity .clarity-text {
    text-align: left;
}

.grid-clarity .section-header {
    margin-bottom: 0;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    max-width: 450px;
    background: linear-gradient(to right, #59B9C7, #3498DB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

footer {
    margin-top: auto;
    flex-shrink: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-nav {
    display: flex;
    gap: 20px;
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav a {
    color: #D3DEE4;
    text-decoration: none;
}

/* --- Falcon Detailed Page Content (style.css) --- */

.falcon-details-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #fff; /* Explicit white background for this section */
    padding-left: max(20px, calc((100vw - 1200px) / 2));
}

.falcon-details-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

/* Left Text Column */
.falcon-text-content .falcon-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #000;
}

/* Override existing global style for detailed description text */
.falcon-text-content .section-subhead-text {
    max-width: none; /* Don't restrict width on the left column */
    margin-bottom: 40px;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
    text-align: left;
}

/* 2x2 Roles Grid */
.falcon-roles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 cards on desktop */
    gap: 20px;
    margin-bottom: 50px;
}

.role-card {
    display: flex;
    gap: 15px;
    align-items: start;
}

.role-icon-placeholder {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-icon-placeholder .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    color: #000;
}

.role-text-content h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #000;
}

.role-text-content ul {
    list-style: disc inside;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Button */
.falcon-button-container {
    margin-top: 30px;
}

.btn-primary-rounded {
    display: inline-block;
    padding: 10px 45px;
    background-color: #577c8e;
    background-image: none !important;
    color: #F4EFEB;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 30px 0 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.btn-primary-rounded:hover {
    background-color: #e13d3d !important;
    background-image: none !important;
    color: #F4EFEB !important;
    text-decoration: none;
}

/* Right Image Column Placeholder */
.falcon-image-content {
    width: 100%;
}

.falcon-image-placeholder {
    width: 100%;
    padding-top: 100%; /* Creates a square placeholder based on width */
    background-color: #e6e6e6; /* Specific grey from design */
    position: relative;
    box-sizing: border-box;
}

/* Optional placeholder text for image area */
.falcon-image-placeholder::after {
    content: '(IMAGE AREA)';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #666;
    text-align: center;
    font-weight: 700;
}

.sticky-sidebar {
    position: sticky;
    top: 100px; /* Distance from the top of the screen when scrolling */
    height: fit-content;
    z-index: 10;
}

/* --- Carousel Layout --- */
.carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Keeps it square like your original placeholder */
    overflow: hidden;
    background-color: #e6e6e6;
    border-radius: 8px 0 0 8px;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}

.carousel-slide {
    min-width: 100%; /* Forces each slide to take up the full container */
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the square without distorting */
}

/* --- Carousel Controls --- */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.15);
    font-size: 40px;
    padding: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.carousel-btn:hover {
    color: rgba(0, 0, 0, 0.4);
    background: transparent;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* --- Carousel Dots --- */
.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: rgba(0, 0, 0, 0.5);
}

.faint-bg-logo {
    position: absolute;
    top: 50%;
    left: -100px; /* Pulls it significantly off-screen to the left */
    transform: translateY(-60%) scaleX(-1); /* Combined: vertical center + flip horizontally */
    width: 2000px; /* Massive and fixed width: won't scale with window resizing */
    max-width: none;
    opacity: 0.03; /* Barely visible */
    pointer-events: none; /* Stops it from blocking text selection */
    z-index: 1;
}

/* --- Falcon Gradient Section --- */
.bg-falcon-gradient {
    background: var(--falcon-section-gradient);
}

.falcon-hero-section {
    position: relative;
    overflow: hidden;
    z-index: 1; /* Create a stacking context to keep the pseudo-element inside it */
    background-color: #fff;
}

.falcon-hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -2px; /* Slight overflow to fix potential seam at the bottom */
    background-image: 
        linear-gradient(to right, 
            rgba(255, 255, 255, 1) 0%, 
            rgba(255, 255, 255, 1) 25%,
            rgb(244, 242, 235, 1) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* --- Boxed Role Cards --- */

:root {
    --falcon-section-gradient: conic-gradient(from 214deg at calc(50% - 20px) 50%, #FFFFFF 0%, #F4EFEB 100%);
    --contact-page-gradient: conic-gradient(from 114deg at calc(50% - 20px) 50%, #FFFFFF 0%, #F4EFEB 100%);
    --role-card-bg-gradient: linear-gradient(108deg, #3498DB 0%, #59B9C7 100%);
    --role-card-border-radius: 0px 30px 0px 30px; /* Top-Left, Top-Right, Bottom-Right, Bottom-Left */

}

.role-card-boxed {
    background: var(--role-card-bg-gradient);
    padding: 35px 30px;
    border-radius: var(--role-card-border-radius);
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    /*transition: transform 0.3s ease;*/
}

/*.role-card-boxed:hover {*/
/*    transform: translateY(-5px);*/
/*}*/

.role-card-boxed .role-icon-placeholder {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-card-boxed .role-icon-placeholder img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.role-card-boxed .role-text-content h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.role-card-boxed .role-text-content ul {
    color: #fff;
    opacity: 0.95;
    font-size: 16px;
    list-style: disc inside;
    margin: 0;
}

.role-card-boxed .role-text-content ul li {
    margin-bottom: 2px;
    color: #fff;
}

.app-card-square {
    background: var(--role-card-bg-gradient);
    padding: 30px;
    border-radius: 0 30px 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    aspect-ratio: 1 / 1;
    text-align: center;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    position: relative;
}

.app-card-icon-wrapper {
    background: #fff;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.app-card-icon-wrapper img {
    width: 90px;
    height: auto;
    object-fit: contain;
}

.app-card-square h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 15px;
    text-transform: none;
}

.app-card-square p {
    font-size: 14px;
    color: #fff;
    line-height: 1.5;
    margin: 0 0 20px;
    opacity: 0.9;
    text-align: left;
}

.app-card-square .learn-more {
    align-self: flex-end;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin-top: auto;
}

.app-card-square .learn-more:hover {
    text-decoration: underline;
}

/* --- Service Card Styles --- */
.service-card {
    padding: 40px 40px;
    font-size: 5rem;
    border-radius: 0 30px 0 30px;
    text-align: center;
    color: #C7D9E5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*min-height: 380px;*/
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.service-card h3 {
    color: #C7D9E5;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.service-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #C7D9E5;
    font-weight: 400;
    opacity: 0.95;
    text-align: start;
}

.service-card-left {
    background: linear-gradient(to right, #223381, #59B9C7);
}

.service-card-right {
    background: linear-gradient(to right, #59B9C7, #223381);
}

.requirements-engineering-card {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/*.requirements-engineering-card::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    background-image: url('../images/cees-tijdens-cursus-right.png');*/
/*    background-size: contain;*/
/*    background-position: right center;*/
/*    background-repeat: no-repeat;*/
/*    opacity: 0;*/
/*    transition: opacity 0.5s ease;*/
/*    z-index: -1;*/
/*    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);*/
/*    mask-image: linear-gradient(to right, transparent 0%, black 60%);*/
/*}*/

/*.requirements-engineering-card:hover::before {*/
/*    opacity: 1;*/
/*}*/

/* Ensure content stays above the image/overlay */
.requirements-engineering-card h3,
.requirements-engineering-card p,
.requirements-engineering-card .learn-more {
    position: relative;
    z-index: 2;
}

.service-card .learn-more {
    position: absolute;
    bottom: 50px;
    right: 40px;
    font-size: 14px;
    font-weight: 900;
    color: #C7D9E5;
    text-decoration: none;
}

.service-card .learn-more:hover {
    text-decoration: underline;
}

/* --- Contact Page Styles --- */
.contact-section {
    background: var(--contact-page-gradient);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

/* --- About Us Page Styles --- */
.about-us-section {
    background: var(--contact-page-gradient);
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
}

.about-us-text p {
    font-size: 15px;
    line-height: 1.6;
    color: #2B313F;
    margin-bottom: 20px;
}

.about-us-image img {
    width: 100%;
    height: auto;
    border-radius: 0 50px 0 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* --- Privacy Policy & Terms of Service Page Styles --- */
.privacy-policy-section,
.terms-of-service-section {
    background: var(--contact-page-gradient);
    min-height: 80vh;
    padding: 80px 0;
}

.privacy-card {
    background: #ffffff;
    padding: 60px;
    border-radius: 0 50px 0 50px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.05);
    max-width: 900px;
    margin: 0 auto;
}

.privacy-card h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #111143;
    margin-bottom: 10px;
}

.privacy-card .last-updated {
    font-size: 14px;
    color: #666;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.privacy-body section {
    padding: 0;
}

.privacy-body h4 {
    color: #3498DB;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
}

.privacy-body p, .privacy-body li {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

.privacy-body ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.privacy-body ul li {
    margin-bottom: 8px;
    list-style-type: disc;
}

.privacy-body .data-box {
    border-left: 3px solid #3498DB;
    padding-left: 20px;
    margin: 20px 0;
}

.privacy-body .data-box p {
    margin-bottom: 10px;
}

.privacy-body .gdpr-box {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
    border-left: 5px solid #3498DB;
    margin: 30px 0;
}

.privacy-body .gdpr-box h4 {
    margin-top: 0;
    color: #111143;
}

.privacy-body .gdpr-box p {
    margin-bottom: 0;
}

.privacy-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
    text-align: center;
}

.privacy-footer p {
    font-size: 14px;
    color: #666;
}

.privacy-footer a {
    color: #111143;
    font-weight: 700;
}

.privacy-footer a:hover {
    color: #3498DB;
}

.italic {
    font-style: italic;
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-unstyled li {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .privacy-card {
        padding: 40px 20px;
    }
    .privacy-card h1 {
        font-size: 2.5rem;
    }
}

.contact-header {
    font-size: 3.5rem;
    font-weight: 700;
    color: #111143;
    margin-bottom: 25px;
    line-height: 1.1;
}

.contact-subhead {
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 14px;
    font-weight: 700;
    color: #2B313F;
    line-height: 1.6;
}

.contact-links {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.contact-icon-box {
    width: 100px;
    height: 100px;
    background-color: #5BB6D4 !important;
    background-image: none !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease-in-out !important;
    text-decoration: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.contact-icon-box:hover {
    transform: translateY(-5px);
    background-color: #3498DB !important;
    background-image: none !important;
    transition: all 0.3s ease-in-out !important;
}

.contact-icon-box img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

/* Center text globally if needed for this section */
.text-center {
    text-align: center;
}
.multi-carousel-full-bleed {
    width: 100vw;
    /* This negative margin pulls it left to offset the body/section padding if there is any, 
       ensuring it truly hits the edge of the browser */
    margin-left: calc(50% - 50vw); 
    overflow: hidden; 
    position: relative;
}

.multi-carousel-track {
    display: flex;
    gap: 30px; /* Nice wide gap between the images */
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    scrollbar-width: none; 
    padding: 40px 0; /* Extra top/bottom padding to prevent box-shadow clipping */
    
    /* Centers the active image on the screen when scrolling */
    scroll-snap-align: center;
    
    /* Adds padding to the left and right of the track so the first and last images 
       can be scrolled into the absolute center of the screen.
       Calculated based on 40vw slides, maxing at 800px. */
    padding-left: calc(50vw - (min(40vw, 800px) / 2));
    padding-right: calc(50vw - (min(40vw, 800px) / 2));
}

.multi-carousel-track::-webkit-scrollbar {
    display: none; 
}

.multi-carousel-slide {
    /* 
       Reduced size: 40% of the screen width (about half of previous 70%).
       Added max-width to prevent infinite scaling.
    */
    flex: 0 0 40vw; 
    max-width: 800px;
    
    /* Perfect 1920x1080 (16:9) aspect ratio */
    aspect-ratio: 16 / 9; 
    
    scroll-snap-align: center;
    background-color: #555; 
    
    /* Soften the edges of these huge images */
    /*border-radius: 12px; */
    overflow: hidden;
    
    /* Add a subtle shadow to separate them from the background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    
    cursor: pointer;
    transition: transform 0.3s ease;
}

.multi-carousel-slide:hover {
    transform: scale(1.02);
}

.multi-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Arrows --- */
.multi-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0.6; /* Subtle as requested */
}

.multi-carousel-btn:hover {
    background: rgba(255, 255, 255, 0.0);
    opacity: 1;
}

.multi-carousel-btn.prev { left: 30px; }
.multi-carousel-btn.next { right: 30px; }

/* Mouse drag states */
.multi-carousel-track { cursor: grab; }
.multi-carousel-track:active { cursor: grabbing; }
.multi-carousel-track.is-dragging { scroll-snap-type: none; }

/* --- Lightbox Overlay --- */
.image-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.0); /* No dark overlay */
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.image-zoom-overlay.is-active {
    display: flex;
    opacity: 1;
}

.zoom-content-wrapper {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: default;
}

.image-zoom-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
    cursor: zoom-out;
}

.zoom-caption {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 15px;
    color: #111143;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
    text-align: center;
    pointer-events: none;
}

.image-zoom-overlay.is-active .zoom-caption {
    opacity: 1;
    transform: translateY(0);
}

.image-zoom-overlay.is-active img {
    transform: scale(1);
}

/* --- Mobile Overrides --- */
@media (max-width: 992px) {
    .faint-bg-logo {
        display: none;
    }
    .multi-carousel-slide {
        flex: 0 0 70vw; /* Slightly wider on tablets */
    }
    .multi-carousel-track {
        padding-left: calc(50vw - 35vw);
        padding-right: calc(50vw - 35vw);
    }
    .multi-carousel-btn { display: none; } /* Arrows can be annoying on touch */
}
@media (max-width: 768px) {
    .faint-bg-logo {
        display: none;
    }
    .multi-carousel-slide {
        flex: 0 0 85vw; /* Almost full width on phones */
    }
    .multi-carousel-track {
        padding-left: calc(50vw - 42.5vw);
        padding-right: calc(50vw - 42.5vw);
    }
}

/* --- Mobile Menu Layout (Screens smaller than 768px) --- */
@media (max-width: 768px) {

    /* Show hamburger */
    .mobile-menu-toggle {
        display: block;
    }

    /* Hide standard nav, set it up as a dropdown */
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%; /* Positions it directly under the header */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 99;
    }

    /* Class added by JavaScript to show the menu */
    .main-navigation.is-active {
        display: block;
    }

    /* Stack links vertically */
    .main-navigation .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Override all grids to be 1 column on mobile */
    .grid-clarity,
    .grid-3-col,
    .grid-2-col {
        grid-template-columns: 1fr; /* Forces a single column */
        gap: 30px; /* Optional: reduce gap on mobile to save space */
    }

    /* Reset text alignment for the clarity section so it looks natural when stacked */
    .grid-clarity .clarity-text {
        text-align: left;
    }

    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    /* Center the nav links and allow them to wrap to a new line if needed */
    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .falcon-details-section {
        padding-right: 20px;
    }

    .falcon-details-grid {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 40px; /* Reduced gap between content and image banner */
    }

    .falcon-text-content .falcon-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .falcon-text-content .section-subhead-text {
        text-align: center;
    }

    /* Center the roles grid, button, and image on mobile */
    .falcon-roles-grid {
        grid-template-columns: 1fr; /* Single column of cards */
        justify-items: center;
        gap: 20px;
    }

    .role-card {
        flex-direction: column; /* Stack icon above text */
        align-items: center;
        text-align: center;
    }

    .role-icon-placeholder {
        margin-bottom: 10px;
    }

    .role-text-content ul {
        list-style: none; /* Optional: clear bullets when centered on mobile */
        padding: 0;
    }

    .falcon-button-container {
        text-align: center;
    }

    .falcon-image-content {
        width: 100%;
        margin-top: 40px; /* Space after the button */
    }

    .falcon-image-placeholder {
        width: 100%;
        padding-top: 60%; /* Ratio that makes it a nice banner height for mobile */
    }

    .sticky-sidebar {
        position: relative;
        top: 0;
        margin-top: 40px;
    }

    .carousel-container {
        border-radius: 8px; /* Round all 4 corners again on mobile */
    }


    /* Center the top header on mobile */
    .bg-grey .bg-white .grid-2-col div:last-child {
        align-items: center !important;
    }
}

/* --- Experience / Client Logos Section --- */
.experience-headline {
    font-size: 1.8rem;
    font-weight: 700;
    color: #223381;
    margin-bottom: 60px;
    line-height: 1.2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.client-logos-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 60px;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(to right, #59B9C7, #3498DB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.client-logos-text span {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .experience-headline {
        font-size: 1.4rem;
        margin-bottom: 40px;
    }
    .client-logos-text {
        font-size: 2rem;
        gap: 20px 30px;
    }
}