/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap');

:root {
    /* Color Palette */
    --primary-color: #0d1b2a;
    --primary-light: #1b263b;
    --accent-color: #a67c52;
    --accent-dark: #8c6642;
    --text-light: #f0f0f0;
    --text-muted: #dcdcdc;
    --text-dark: #333333;
    --bg-light: #fdfdfd;
    --bg-dark: #001a4d;

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --section-padding: 80px 0;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

/* Form Styles */
.contact-form {
    margin-top: 30px;
    display: grid;
    gap: 15px;
    text-align: left;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 0.95rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.1);
}

select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

select.form-input option {
    background-color: var(--primary-color);
    color: var(--text-light);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

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

.text-copper {
    color: var(--accent-color);
}

.text-light {
    color: var(--text-light);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

.gap-60 {
    gap: 60px;
}

.gap-80 {
    gap: 80px;
}

.align-start {
    align-items: start;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--accent-color);
    color: var(--text-light);
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--accent-dark);
}

.btn-sm {
    padding: 8px 20px;
    font-size: 0.8rem;
}

/* --- Components --- */

/* Header */
header {
    background-color: transparent;
    /* Transparent initial state */
    padding: 20px 0;
    /* Larger padding initially */
    position: fixed;
    /* Overlay hero */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s ease;
    /* Smooth transition */
}

/* Scrolled State (added via JS) */
header.scrolled {
    background-color: var(--primary-color);
    /* Solid Blue */
    padding: 10px 0;
    /* Shrink padding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

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

.logo img {
    max-height: 160px;
    /* Large initial size */
    width: auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    transition: all 0.4s ease;
}

header.scrolled .logo img {
    max-height: 70px;
    /* Shrink logo on scroll */
    filter: none;
}

/* Desktop Navigation */
.main-nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.main-nav a.text-light {
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-toggle {
    display: none;
    /* Hidden on desktop */
    color: var(--accent-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    background-color: var(--primary-color);
    overflow: hidden;
}

.hero-top-split {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    flex-grow: 1; 
}

#heroVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.hero-left {
    flex: 0 0 50%;
    max-width: 50%;
    background-color: rgba(13, 27, 42, 0.85);
    /* Deep Blue with opacity */
    color: var(--text-light);
    padding: 240px 40px 80px max(50px, calc(50vw - 580px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 440px; /* Safe width to prevent overlap with the center box */
    width: 100%;
    margin: 0;
}

.hero-subtitle {
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

.hero-content h1 {
    color: var(--text-light);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    font-size: 2.8rem; /* Scaled down slightly to fit the 440px safe area */
}

.hero-content h1 span {
    color: var(--accent-color);
}

.hero-desc {
    margin-top: 30px;
    opacity: 0.9;
    max-width: 500px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
}

.hero-right {
    flex: 0 0 50%;
    max-width: 50%;
    background-color: rgba(166, 124, 82, 0.6);
    background-image: linear-gradient(135deg, rgba(166, 124, 82, 0.6) 0%, rgba(212, 163, 115, 0.6) 100%);
    min-width: 300px;
    position: relative;
    z-index: 1;
}

.hero-about-integration {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 60px 0;
    background-color: rgba(27, 38, 59, 0.95);
}

/* Opening Hours Overlay */
.opening-hours {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translate(50%, 50%);
    background-color: var(--primary-light);
    border: 2px solid var(--accent-color);
    padding: 30px;
    color: var(--text-light);
    width: 280px;
    text-align: center;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .opening-hours {
        bottom: 50px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        z-index: 5;
    }
}

.opening-hours h3 {
    color: var(--accent-color);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/* About Section */
.section-about {
    padding: 100px 0;
    background-color: var(--primary-light);
    color: var(--text-light);
}

.section-about h2,
.highlight-box h3 {
    color: var(--text-light);
}

.highlight-box {
    background: rgba(255, 255, 255, 0.05); /* Match dark background */
    padding: 40px;
    border-left: 5px solid var(--accent-color);
}

/* Services / Features */
.section-services {
    padding: 100px 0;
    background-color: white;
}

.feature-card {
    background: white;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.card-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px;
    background: var(--accent-color);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.card-bg-icon {
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.03);
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 700;
}

/* Custom Case Studies */
.section-case-studies {
    padding: 100px 0;
    background-color: var(--primary-color);
    color: var(--text-light);
}

.case-study-block {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 100px;
}
.case-study-block:last-child {
    margin-bottom: 0;
}

.cs-left {
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-meta {
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.cs-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--text-light);
    line-height: 1.1;
    margin-bottom: 30px;
}

.cs-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.cs-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 30px 0;
}

.cs-subtitle {
    color: #3498db; /* Blue for SCENARIO */
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Right side */
.cs-right-title {
    color: #f1c40f; /* Yellow/Gold for WITH MIHR */
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.cs-box {
    border: 2px solid;
    padding: 30px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.02);
}

.cs-box.border-blue { border-color: #2980b9; }
.cs-box.border-yellow { border-color: #f39c12; }
.cs-box.border-orange { border-color: #d35400; }
.cs-box.border-lightblue { border-color: #3498db; }

.cs-row {
    display: flex;
    margin-bottom: 25px;
    align-items: flex-start;
}

.cs-row:last-child {
    margin-bottom: 0;
}

.cs-icon-col {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.cs-icon-col i {
    font-size: 1.5rem;
    width: 24px;
    text-align: center;
}

.cs-icon-pin { color: #3498db; }
.cs-icon-chip { color: #f1c40f; }
.cs-icon-slider { color: #e67e22; }

.cs-content-col {
    flex-grow: 1;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    padding-top: 2px;
}

.cs-dots {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.cs-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}
.cs-dot.active {
    background-color: #d35400;
}

.cs-outcome-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.cs-outcome-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    margin-bottom: 15px;
}

@media (max-width: 900px) {
    .case-study-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cs-left {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 40px;
    }
    .cs-row {
        flex-direction: column;
        gap: 10px;
    }
    .cs-icon-col {
        width: 100%;
    }
}

/* Benefits Section 3-Pillar Setup */
.section-benefits {
    padding: 100px 0;
    background-color: white;
    color: var(--primary-light);
}

.benefits-columns-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.benefit-pillar {
    display: flex;
    flex-direction: column;
}

@media (max-width: 992px) {
    .benefits-columns-wrap {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

.bp-header {
    margin-bottom: 40px;
}

.bp-meta {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 5px;
}
.bp-meta-sub {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.bp-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-light);
    line-height: 1.3;
    margin-bottom: 20px;
}

.bp-desc {
    font-size: 1.05rem;
    color: #555;
    max-width: 900px;
}

/* Vertical Card Layout */
.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1; /* Make the list fill the pillar space */
}

.benefit-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--primary-light);
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex-grow: 1; /* Stretch to fill equal height inside the column */
}

.bi-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.benefit-item i {
    font-size: 2rem;
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.benefit-item h4 {
    color: var(--accent-color);
    margin-bottom: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.benefit-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.85;
    color: var(--text-light);
}

/* Footer */
#apply {
    background-color: var(--primary-light);
    color: var(--text-light);
    padding: 80px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.form-input {
    width: 100%;
    padding: 15px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-family: var(--font-body);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-input:focus {
    outline: 2px solid var(--accent-color);
    background: rgba(255, 255, 255, 0.15);
}

.footer-copy {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    opacity: 0.5;
}

/* --- Responsive Media Queries --- */

/* Mid-sized Laptop Fix (1200px - 1500px) */
/* Prevents text from overlapping the centered logo on narrower desktop screens */
@media (min-width: 1200px) and (max-width: 1550px) {
    .hero-left {
        padding: 240px 40px 80px max(50px, calc(50vw - 580px));
        flex: 0 0 50%;
        max-width: 50%;
    }

    .hero-content h1 {
        font-size: 2.4rem;
        /* Reduce size to prevent wide spreading */
    }
}

/* Tablet & Smaller Laptops (Stacked Layout starts here) */

/* Tablet & Smaller Laptops (Stacked Layout starts here) */
@media (max-width: 1200px) {



    /* Force larger logo on mobile/tablet and center it */
    .logo {
        position: absolute;
        left: 50%;
        top: 20px;
        /* Push down to prevent cutoff */
        transform: translateX(-50%);
        z-index: 1101;
        /* Ensure above toggles */
    }

    .logo img {
        max-height: 90px !important;
        filter: none;
        transition: max-height 0.4s ease;
    }

    /* Shrink logo on scroll for mobile */
    header.scrolled .logo img {
        max-height: 40px !important;
    }

    /* Recenter logo vertically on scroll */
    header.scrolled .logo {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .nav-toggle {
        z-index: 1102;
        /* Ensure toggle is clickable */
    }

    /* Ensure header background is visible on mobile if needed, or keep transparent?
       Usually mobile menus need solid bg. Let's keep it dynamic or force solid?
       For now, let's let the scroll script handle it, but maybe force padding smaller. */
    header {
        padding: 10px 0 !important;
    }

    /* Global Types */
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    /* Grid Adjustments */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Navigation - Switch to Hamburger */
    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        display: none;
        /* Hidden by default */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav.active {
        display: flex;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    .header-container {
        padding: 0 10px;
    }

    /* Hero - Stacked Layout */
    .hero {
        flex-direction: column;
        min-height: auto;
        padding-bottom: 50px;
        position: relative;
    }

    /* Full overlay for mobile to cover gaps/video */
    .hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(13, 27, 42, 0.85);
        z-index: 0;
    }

    .hero-left {
        background: transparent;
        /* Use shared overlay */
        max-width: 100%;
        /* Reset max-width from desktop styles */
        padding: 200px 20px 20px;
        /* Increase top padding to clear large logo */
        text-align: center;
        width: 100%;
        flex: none;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    /* Hide the transparent spacer on right, let video show via background */
    .hero-right {
        display: none;
    }

    /* Dimensions Box - Nested naturally */
    .opening-hours {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 400px;
        margin: 20px auto 0;
        border-width: 0 0 4px 0;
        background-color: var(--primary-light);
    }

    .feature-card {
        padding: 30px;
    }

    /* Footer */
    #apply {
        padding: 60px 0;
    }

    .footer-copy {
        margin-top: 50px;
    }
}

/* Mobile Phones */
@media (max-width: 576px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2.2rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .logo img {
        max-height: 50px;
    }

    .hero-left {
        padding: 200px 20px 20px;
        /* Match the tablet fix */
    }

    .benefit-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .benefit-item i {
        margin-top: 0;
        margin-bottom: 10px;
    }
}