/* 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: #a77c37;
    --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;
    scroll-padding-top: 2rem;
    /* Desktop header scroll offset (~80px) */
}

@media (max-width: 75em) {

    /* Tablet breakpoint (~1200px) */
    html {
        scroll-padding-top: 1.375rem;
        /* Tablet header scroll offset (~70px) */
    }
}

@media (max-width: 48em) {

    /* Mobile breakpoint (~768px) */
    html {
        scroll-padding-top: 0.75rem;
        /* Mobile header scroll offset (~60px) */
    }
}

* {
    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 160px 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.2);
    font-size: 1.1rem;
}

.hero-right {
    flex: 0 0 50%;
    max-width: 50%;
    background-color: rgba(167, 124, 55, 0.85);
    background-image: linear-gradient(135deg, rgba(167, 124, 55, 0.3) 0%, rgba(61, 51, 15, 0.458) 100%);
    min-width: 300px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    /* Align content to the bottom right corner */
    justify-content: flex-end;
    /* Align content to the right (container edge) */
    padding: 80px max(50px, calc(50vw - 580px)) 80px 80px;
    /* Align right side to scaffolding */
}

.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 160px 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 {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

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

    /* Adjust the spacer on right to center the seal on mobile */
    .hero-right {
        display: flex;
        flex: 1 1 100%;
        max-width: 100%;
        min-height: 380px;
        background: transparent;
        background-image: none;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        /* Reset padding for perfect centering */
        order: 2;
        /* place below hero text content */
        z-index: 2;
    }

    /* 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;
    }
}

/* Opacity Grid styling from user screenshot */
.opacity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.opacity-card {
    background: #0d1b2a !important;
    /* Force deep dark blue background */
    border: 1px solid var(--accent-color) !important;
    padding: 35px 25px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s ease;
}

.opacity-card:hover {
    transform: translateY(-5px);
    background: #1b263b !important;
    /* Slightly lighter navy blue on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.stat-card {
    text-align: center;
    justify-content: center;
    align-items: center;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-color) !important;
    /* Gold stat number */
    line-height: 1.1;
    margin-bottom: 15px;
}

.stat-desc {
    color: var(--text-light) !important;
    /* Force light off-white color */
    opacity: 0.9 !important;
    font-size: 0.95rem;
    line-height: 1.5;
}

.detail-card {
    text-align: left;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.detail-icon {
    color: var(--accent-color) !important;
    font-size: 1.25rem;
}

.detail-header h3 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color) !important;
    /* Gold detail card header */
    margin-bottom: 0 !important;
}

.detail-desc {
    color: var(--text-light) !important;
    /* Force light off-white color */
    opacity: 0.9 !important;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive adjustments for Opacity Grid */
@media (max-width: 992px) {
    .opacity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .opacity-grid {
        grid-template-columns: 1fr;
    }
}

/* Solution Section styling */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.solution-card {
    background: white !important;
    /* White background */
    border: 1px solid var(--accent-color) !important;
    border-top: 4px solid var(--accent-color) !important;
    padding: 40px 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Light shadow */
    transition: all 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-5px);
    background: #fdfdfd !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.solution-card-inner {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.solution-icon-col {
    flex-shrink: 0;
}

.solution-icon {
    font-size: 2.5rem;
    color: var(--accent-color) !important;
}

.solution-content-col h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-color) !important;
    /* Dark blue title */
    margin-bottom: 5px !important;
}

.solution-card-sub {
    color: var(--accent-color) !important;
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 15px !important;
    font-family: var(--font-body);
}

.solution-card-desc {
    color: var(--text-dark) !important;
    /* Dark text */
    opacity: 0.85 !important;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive adjustments for Solution Grid */
@media (max-width: 768px) {
    .solution-grid {
        grid-template-columns: 1fr;
    }

    .solution-card-inner {
        flex-direction: column;
        gap: 15px;
    }
}

.solution-intro-block {
    background-color: white;
    /* Clean white background */
    padding: 100px 0 40px;
    /* Spaced, flows into framework section */
    color: var(--text-dark);
}

/* Labeling Card Styling */
.label-card {
    background: white !important;
    /* Clean white background */
    border: 1px solid var(--accent-color) !important;
    padding: 40px 30px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Light shadow */
    transition: all 0.3s ease;
}

.label-card:hover {
    transform: translateY(-5px);
    background: #fdfdfd !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.label-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.label-card-letter {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}

.label-card-title-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.label-card-title-col h3 {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color) !important;
    /* Dark blue title */
    margin-bottom: 4px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-card-subtitle {
    color: var(--accent-color) !important;
    font-style: italic;
    font-size: 0.95rem;
    font-family: var(--font-body);
}

.label-card-desc {
    color: var(--text-dark) !important;
    /* Dark text */
    opacity: 0.85 !important;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 80px;
    /* Keep heights uniform */
}

.label-card-divider {
    border: 0;
    height: 4px;
    background: var(--accent-color);
    margin-bottom: 20px;
    opacity: 1;
}

.label-card-examples-title {
    font-weight: 700;
    color: var(--accent-color) !important;
    margin-bottom: 15px;
    font-size: 1rem;
}

.label-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.label-card-list li {
    position: relative;
    padding-left: 20px;
    color: var(--text-dark) !important;
    /* Dark text */
    opacity: 0.85 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
    font-size: 0.95rem;
    text-align: left;
}

.label-card-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 1.2rem;
    line-height: 1;
}

/* Detection Section styling */
.detection-grid-block {
    background-color: white;
    padding: 60px 0 100px;
    color: var(--text-dark);
}

.detection-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: stretch;
}

.detection-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.detection-box {
    background: white;
    border: 1px solid var(--accent-color);
    padding: 20px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.detection-box:hover {
    transform: translateY(-3px);
    background: #faf6f0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
}

/* Responsive adjustments for Detection Grid */
@media (max-width: 992px) {
    .detection-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

@media (max-width: 576px) {
    .detection-list-grid {
        grid-template-columns: 1fr;
    }
}

/* Detection Graph responsive stretching */
.detection-graph-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}

.detection-graph-img {
    width: 100%;
    height: 240px;
    /* Default height for mobile/tablet when columns are stacked */
    object-fit: fill;
    /* Stretches to fill exact dimensions requested */
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    display: block;
}

@media (min-width: 992px) {
    .detection-graph-img {
        height: 100%;
        /* Stretch vertically to match the left column on desktop */
    }
}

/* Regulatory Timeline styling */
.regulatory-timeline {
    position: relative;
    padding: 20px 0;
    width: 100%;
    margin-top: 20px;
}

.timeline-track {
    position: absolute;
    top: 75px;
    /* Aligned with center of the 20px dot (20px padding + 30px date + 15px margin + 10px half-dot) */
    left: 8%;
    right: 8%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    /* Visible semi-transparent light track */
    z-index: 1;
    border-radius: 3px;
}

.timeline-items {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 16%;
}

.timeline-date {
    font-weight: 700;
    font-size: 1.1rem;
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 15px;
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 4px solid #fff;
    margin-bottom: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.timeline-desc {
    color: var(--text-light);
    opacity: 0.8;
    font-size: 0.9rem;
    line-height: 1.4;
    font-family: var(--font-body);
}

/* Colors matching the timeline states */
.status-blue .timeline-date {
    color: #3498db;
}

.status-blue .timeline-dot {
    border-color: #3498db;
    background-color: #3498db;
}

.status-gold .timeline-date {
    color: var(--accent-color);
}

.status-gold .timeline-dot {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
}

.status-orange .timeline-date {
    color: #e67e22;
}

.status-orange .timeline-dot {
    border-color: #e67e22;
    background-color: #e67e22;
}

.status-purple .timeline-date {
    color: #9b59b6;
}

.status-purple .timeline-dot {
    border-color: #9b59b6;
    background-color: #9b59b6;
}

/* Micro-animations and hover effects */
.timeline-item:hover .timeline-dot {
    transform: scale(1.3);
    box-shadow: 0 0 15px currentColor;
}

.timeline-item:hover .timeline-date {
    transform: translateY(-2px);
}

/* Responsive view: stack vertically on mobile */
@media (max-width: 768px) {
    .timeline-track {
        display: block;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 4px;
        height: 100%;
        transform: none;
    }

    .timeline-items {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
        padding-left: 50px;
    }

    .timeline-item {
        position: relative;
        flex-direction: column;
        width: 100%;
        text-align: left;
        align-items: flex-start;
    }

    .timeline-date {
        height: auto;
        margin-bottom: 5px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .timeline-dot {
        position: absolute;
        left: -42px;
        /* Centers the 20px dot on the 4px track line at left: 20px */
        top: 3px;
        margin-bottom: 0;
        z-index: 3;
    }

    .timeline-desc {
        font-size: 0.95rem;
    }
}

/* Pricing Section styling */
.section-pricing {
    padding: 100px 0;
    background-color: var(--primary-color);
    /* Dark navy */
    color: var(--text-light);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 40px;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.pricing-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 15px;
}

.pricing-card-header i {
    font-size: 1.6rem;
    color: var(--accent-color);
}

.pricing-card-header h3 {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.pricing-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 5px;
}

.pricing-card-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    line-height: 1.3;
}

.pricing-card-divider {
    border: 0;
    height: 1px;
    background: rgba(167, 124, 55, 0.4);
    margin-bottom: 15px;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.pricing-card-features li {
    margin-bottom: 8px;
}

.pricing-card-features li.indent-li {
    position: relative;
    padding-left: 15px;
    font-size: 0.85rem;
    opacity: 0.8;
}

.pricing-card-features li.indent-li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

/* Responsive pricing grid */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Collaborative Framework Partnership Styles */
.partnership-section-wrapper {
    margin-top: 100px;
    padding-top: 60px;
    /* Same as AI Omni-Guard top padding */
    font-family: var(--font-body);
}

.partnership-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.partnership-main-title {
    color: var(--text-light);
    font-family: var(--font-heading);
    font-size: 3.2rem;
    margin: 0;
    font-weight: 700;
}

.partnership-meta-label {
    color: var(--accent-color);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.partnership-header-line {
    width: 100%;
    height: 2px;
    background: var(--accent-color);
    margin-top: 15px;
    margin-bottom: 50px;
}

.partnership-layout-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.partner-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--accent-color) !important;
    padding: 40px 30px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.partner-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.partner-card-letter {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}

.partner-card-title-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.partner-card-title-col h3 {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: white !important;
    margin-bottom: 4px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.partner-card-subtitle {
    color: var(--accent-color) !important;
    font-style: italic;
    font-size: 0.95rem;
    font-family: var(--font-body);
}

.partner-card-desc {
    color: var(--text-light) !important;
    opacity: 0.85 !important;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 80px;
    /* Keep heights uniform */
}

.partner-card-divider {
    border: 0;
    height: 4px;
    background: var(--accent-color);
    margin-bottom: 20px;
    opacity: 1;
}

.partner-card-examples-title {
    font-weight: 700;
    color: var(--accent-color) !important;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.partner-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.partner-card-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.partner-card-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 1.2rem;
}

@media (max-width: 992px) {
    .partnership-layout-v2 {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .partnership-main-title {
        font-size: 2.4rem;
    }
}

/* Modal Window Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--primary-light);
    border: 2px solid var(--accent-color);
    margin: auto;
    padding: 40px;
    width: 90%;
    max-width: 550px;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-modal {
    color: var(--accent-color);
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-modal:hover,
.close-modal:focus {
    color: white;
}

/* --- Seal Styles & Animations --- */
.seal-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.seal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.seal-link {
    display: block;
    width: 150px;
    height: 150px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        filter 0.4s ease;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
    animation: sealPulse 3s infinite ease-in-out;
}

.seal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.seal-tooltip {
    color: var(--text-light);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.65;
    transition: opacity 0.3s ease, color 0.3s ease;
    font-family: var(--font-body);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Hover effects */
.seal-link:hover {
    transform: scale(1.06) rotate(3deg);
    filter: drop-shadow(0 15px 25px rgba(167, 124, 55, 0.6)) drop-shadow(0 0 10px rgba(167, 124, 55, 0.3));
    animation-play-state: paused;
    /* stop pulse on hover */
}

.seal-link:hover+.seal-tooltip {
    opacity: 1;
    color: var(--accent-color);
}

/* Pulse animation for idle attention grabbing */
@keyframes sealPulse {

    0%,
    100% {
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
    }

    50% {
        filter: drop-shadow(0 12px 20px rgba(167, 124, 55, 0.45));
    }
}

/* PDF Modal specific styling */
.pdf-modal-content {
    background-color: var(--primary-color);
    border: 2px solid var(--accent-color);
    width: 90%;
    max-width: 950px;
    height: 85vh;
    padding: 50px 20px 20px 20px;
    display: flex;
    flex-direction: column;
}

.pdf-container {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    background-color: #1a263b;
    /* Dark premium slate bg */
    border-radius: 4px;
    overflow-y: auto;
    /* Enable vertical scrolling */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pdf-page-canvas {
    display: block;
    width: 100%;
    max-width: 820px;
    /* Comfortably readable viewport scale */
    height: auto !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-color: white;
    box-sizing: border-box;
    transition: transform 0.2s ease;
}

.pdf-page-canvas:hover {
    transform: scale(1.01);
    /* Subtle hover micro-animation */
}

@media (max-width: 576px) {
    .hero-right {
        min-height: 300px;
    }
}

/* PDF Modal Header Styles */
.pdf-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-right: 30px;
    /* clear close button */
}

.pdf-modal-header h3 {
    color: var(--text-light);
    margin: 0;
    font-size: 1.4rem;
    font-family: var(--font-heading);
}

.pdf-action-btn {
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
    font-family: var(--font-body);
}

.pdf-action-btn:hover {
    color: white;
}

/* Responsive PDF Modal Adjustments */
@media (max-width: 768px) {
    .pdf-modal-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        border: none;
        border-radius: 0;
        padding: 50px 10px 10px 10px;
        /* Maximize canvas display area */
    }

    .pdf-container {
        padding: 10px;
        gap: 15px;
    }

    .pdf-modal-header {
        margin-bottom: 12px;
        padding-right: 25px;
        /* Clear close button on mobile */
    }

    .pdf-modal-header h3 {
        font-size: 1.1rem;
    }

    .pdf-action-btn {
        font-size: 0.8rem;
    }
}

/* Responsive Seal Adjustments (placed at bottom to cascade correctly) */
@media (max-width: 1200px) {
    .seal-container {
        justify-content: center;
    }

    .seal-link {
        width: 150px;
        height: 150px;
    }

    .seal-tooltip {
        font-size: 0.55rem;
        letter-spacing: 1px;
    }
}