/* --- ACCESSIBILITY SCALING --- */
html {
    font-size: 110%; 
}
/* Global Reset: Remove default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles: The default look of the site */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.2; 
    color: #333; 
    background-color: #fff;
    overflow-x: hidden; /* This cuts off any side-overflow */
    width: 100%;        /* Forces the body to match screen width */
}

/* Link Styles: Remove the default blue underline */
a {
    text-decoration: none;
    color: #2c3e50; 
}

/* Header Styles */
header {
    background-color: #f4f4f4; 
    padding: 10px 20px; /* Adjusted padding since logo is taller now */
    border-bottom: 2px solid #ddd;
    
    /* THE MAGIC PART: Flexbox Alignment */
    display: flex;            
    justify-content: space-between; 
    align-items: center;      /* This forces Vertical Centering */
    min-height: 110px;        /* Ensures the bar is tall enough for the logo */
}

.logo a {
    display: flex; /* Removes the tiny gap often seen under images */
    align-items: center;
    cursor: default; /* Prevents the logo from looking clickable */
}
.logo img {
    height: 50px;         /* Much larger to make text readable */
    width: auto;          /* Keeps the aspect ratio correct */
    object-fit: contain;  /* Prevents squashing */
    display: block;       /* Removes extra space below image */
}

/* Navigation Menu */
nav ul {
    list-style: none; /* Removes the bullet points */
    display: flex;    /* Makes the list items horizontal */
    gap: 15px;        /* Adds space between the links */
    align-items: center;
}

nav a {
    color: #555;
    font-weight: 500;
}

nav a:hover {
    color: #000;      /* Darker color when you mouse over */
    text-decoration: underline;
}

/* --- HERO SECTION --- */

.hero {
    background-color: #2c3e50;    /* Dark Corporate Blue */
    color: #ffffff;               /* White text */
    text-align: center;             /* Centers everything horizontally */
    padding: 100px 20px;            /* Tall top/bottom padding makes it look like a banner */
}

.hero h1 {
    font-size: 2.75rem;        /* Very large text (approx 48px) */
    margin-bottom: 20px;       /* Space between title and paragraph */
    font-weight: 700;          /* Bold */
}

.hero p {
    font-size: 1.15rem;        /* Slightly larger than normal text */
    margin-bottom: 40px;       /* Space between text and button */
    opacity: 0.9;              /* Makes text slightly softer white */
    max-width: 700px;          /* Prevents text from stretching too wide on big screens */
    margin-left: auto;         /* Combined with margin-right: auto, this centers the block */
    margin-right: auto;
}

/* --- BUTTON STYLES --- */

.button {
    display: inline-block;              /* Allows us to give the link height and width */
    background-color: #e74c3c;        /* A nice Red to contrast with the Blue */
    color: white;
    padding: 15px 35px;                 /* 15px top/bottom, 35px left/right */
    border-radius: 5px;                 /* Rounded corners */
    font-weight: bold;
    transition: background-color 0.3s;  /* Smooth animation when hovering */
}

.button:hover {
    background-color: #c0392b; /* A darker red when mouse is over it */
}

/* --- SERVICES SECTION --- */

.services {
    background-color: #f9f9f9; /* Very light grey to separate from Hero/Footer */
    padding: 80px 20px;
    text-align: center;
}

.services h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #2c3e50;
}

.services > p {            /* The ">" selects only the paragraph directly inside .services */
    margin-bottom: 50px;
    color: #666;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- THE GRID (The Container) --- */

.service-grid {
    display: flex;             /* This puts the children side-by-side */
    justify-content: center;   /* Since you have 2 cards, this centers them in the middle */
    gap: 30px;                 /* Adds 30px of space between the cards */
    flex-wrap: wrap;           /* IMPORTANT: If screen is too small, let them stack */
}

/* --- THE CARDS (The Boxes) --- */

.service-card {
    background: white;
    padding: 40px;
    border: 1px solid #ddd;    /* Subtle border */
    border-radius: 8px;        /* Rounded corners */
    width: 100%;               /* Start full width... */
    max-width: 400px;          /* ...but never grow larger than 400px */
    text-align: left;          /* Keep text inside the card left-aligned */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth animation */
}

/* Hover Effect: The "Lift" */
.service-card:hover {
    transform: translateY(-5px);  /* Move up 5 pixels */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Add a drop shadow */
    border-color: #3498db;        /* Change border to blue */
}

.service-card h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.service-card p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.service-card a {
    color: #3498db; /* Blue link */
    font-weight: bold;
}

/* --- FOOTER STYLES --- */

footer {
    background-color: #222;    /* Almost black */
    color: #fff;               /* White text */
    padding-top: 60px;
}

.footer-content {
    display: flex;             /* Side-by-side columns */
    justify-content: space-around; /* Spread them out nicely */
    flex-wrap: wrap;           /* Stack them on mobile */
    max-width: 1200px;         /* Don't let it get too wide on huge screens */
    margin: 0 auto;            /* Center the container */
    padding-bottom: 40px;
}

.footer-section {
    margin: 20px;
    min-width: 250px;          /* Ensure columns don't get too skinny */
}

.footer-section h4 {
    border-bottom: 2px solid #e74c3c; /* Red underline matching our button */
    display: inline-block;     /* Underline only as wide as the text */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.footer-section address {
    font-style: normal;        /* Remove default italics */
    line-height: 1.8;
    color: #bbb;               /* Light grey text is easier to read than pure white */
}

.footer-section a {
    color: #bbb;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #fff;               /* Bright white on hover */
    text-decoration: underline;
}

/* The List of Links */
.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

/* --- COPYRIGHT BAR --- */

.copyright {
    background-color: #111;    /* Even darker black */
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    color: #777;
    border-top: 1px solid #333;
}
/* --- INTERNAL PAGE STYLES --- */

/* Smaller Header for sub-pages */
.page-header {
    background-color: #2c3e50;
    color: white;
    padding: 60px 20px;
    text-align: center;
}

/* Service Details */
.service-detail {
    padding: 60px 20px;
    max-width: 800px; /* Limits width for readability */
    margin: 0 auto;   /* Centers the block */
}

.service-detail h2 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 2rem;
}

.service-detail ul {
    margin-left: 20px; /* Indent the bullets */
    margin-bottom: 20px;
    list-style-type: disc; /* Ensure bullets are visible */
}

.service-detail li {
    margin-bottom: 10px;
    color: #444;
}

/* The Divider Line */
.divider {
    border: 0;
    height: 1px;
    background: #ddd;
    max-width: 800px;
    margin: 0 auto;
}

/* Bottom CTA Strip */
.cta-strip {
    background-color: #f4f4f4;
    text-align: center;
    padding: 50px 20px;
    margin-top: 40px;
}

.cta-strip h3 {
    margin-bottom: 20px;
    color: #333;
}

/* --- IMPROVED SERVICES LAYOUT --- */

.intro-block {
    margin-bottom: 30px;
    text-align: center;
}

/* The Container for the side-by-side roles */
.role-grid {
    display: flex;
    gap: 20px;               /* Space between the two boxes */
    margin-bottom: 30px;
    flex-wrap: wrap;         /* Stacks them on mobile */
}

/* The Individual Boxes */
.role-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-left: 5px solid #2c3e50; /* The "Corporate Blue" accent line */
    padding: 20px;
    flex: 1;                 /* Makes them equal width */
    min-width: 250px;        /* Prevents them from getting too squashed */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Very subtle shadow */
}

.role-card h4 {
    color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.role-desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin: 0; /* Remove default paragraph margin */
}

.closing-note {
    font-style: italic;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* --- COMPLIANCE 2x2 GRID --- */

.compliance-grid {
    display: flex;
    flex-wrap: wrap;       /* Allow items to wrap to the next line */
    gap: 20px;             /* Space between rows and columns */
    margin-top: 30px;
}

.compliance-card {
    background-color: #f9f9f9; /* Slightly different background to distinguish from previous section */
    padding: 25px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    
    /* The 2x2 Calculation */
    width: calc(50% - 10px); /* 50% width minus half the gap (10px) ensures perfect fit */
}

/* Typography for these cards */
.compliance-card h4 {
    color: #333;
    margin-bottom: 12px;
    font-weight: 700;
}

.compliance-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* Mobile Tweak: On small screens, make them full width */
@media (max-width: 768px) {
    .compliance-card {
        width: 100%; /* Force 1 column on phones */
    }
    .logo img {
        height: auto;      /* IMPORTANT: Allows height to grow/shrink freely */
        width: 100%;       /* Try to be as wide as possible */
        max-width: 260px;  /* Cap the width so it doesn't overlap the Hamburger menu */
    }
}

/* --- DIRECT CONTACT PAGE STYLES --- */

.contact-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
    min-height: 60vh; /* Ensures the page doesn't look empty/short */
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-container-centered {
    width: 100%;
    max-width: 700px; /* Restrict width for a classy look */
}

.direct-contact-card {
    background: white;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Soft, deep shadow */
    text-align: center; /* Center everything */
    border-top: 5px solid #2c3e50; /* Brand accent on top */
}

.direct-contact-card h2 {
    color: #2c3e50;
    margin-bottom: 20px;
}

.intro-text {
    color: #666;
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* The Box that holds Email/Phone */
.contact-methods {
    margin-bottom: 40px;
}

.method-item {
    margin-bottom: 30px;
}

.label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 10px;
    font-weight: bold;
}

/* The Big Email Link */
.big-link {
    font-size: 1.5rem; /* Huge text */
    color: #3498db;
    font-weight: bold;
    word-break: break-all; /* Ensures long emails don't break mobile screens */
}

.big-link:hover {
    color: #2c3e50;
    text-decoration: underline;
}

.note {
    font-size: 0.9rem;
    color: #888;
    margin-top: 10px;
    font-style: italic;
}

.phone-link {
    font-size: 1.5rem;
    color: #333;
}

/* Divider Line */
.card-divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 40px auto;
    width: 60%; /* Only part of the width */
}

.address-block address {
    font-style: normal;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
}
/* --- REVISED ABOUT PAGE --- */

.about-content {
    background: white;
    padding: 80px 20px;
}

.text-container {
    max-width: 750px;      /* Optimal reading width */
    margin: 0 auto;        /* Center the container */
}

.content-block {
    margin-bottom: 50px;
}

.content-block h2 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.3;
}

.content-block h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    border-left: 4px solid #3498db; /* Blue accent line on the left */
    padding-left: 15px;
}

.content-block p {
    font-size: 1.1rem;
    line-height: 1.8;      /* Breathing room for text */
    color: #444;
    margin-bottom: 20px;
}

/* The "Big" Intro Paragraph */
.lead-text {
    font-size: 1.25rem;
    font-weight: bold;
    color: #2c3e50;
}

/* The Divider Lines */
.soft-divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 50px 0;
}

/* --- THE VALUES GRID (Clarity, Speed, Precision) --- */

.values-grid {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;       /* Stack on mobile */
}

.value-item {
    flex: 1;               /* Equal width */
    background: #f9f9f9;
    padding: 25px;
    border-radius: 6px;
    min-width: 200px;
}

.value-item h4 {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.value-item p {
    font-size: 0.95rem;
    margin-bottom: 0;
    line-height: 1.5;
}

/* The Bottom CTA Area */
.cta-block {
    text-align: center;
    background-color: #f4f8fb; /* Very light blue tint */
    padding: 40px;
    border-radius: 8px;
    margin-top: 60px;
}

.cta-block h3 {
    border-left: none;     /* Remove the accent line for this specific header */
    padding-left: 0;
}
/* --- VISUAL UPGRADE FOR ABOUT PAGE --- */

.about-section {
    padding: 100px 20px;
    background: white;
}

.split-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Center vertically */
    gap: 80px;           /* Space between text and year */
}

/* Typography Improvements */
.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    line-height: 1.2;
    margin-bottom: 30px;
}

.lead-paragraph {
    font-size: 1.25rem;
    color: #2c3e50;
    font-weight: 500;
    margin-bottom: 25px;
    border-left: 4px solid #3498db;
    padding-left: 20px;
}

.text-side p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
}

.huge-year {
    display: block;
    font-size: 8rem; /* Massive text */
    font-weight: 900;
    color: #f0f2f5;  /* Very light grey */
    line-height: 1;
}

.year-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text on top of the year */
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Values Section */
.values-section {
    background-color: #f9f9f9; /* Subtle grey background */
    padding: 100px 20px;
}

.container-centered {
    max-width: 1100px;
    margin: 0 auto;
}

.section-intro-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.section-intro-center h3 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

/* Better Cards */
.values-grid {
    display: flex;
    gap: 30px;
}

.value-card {
    background: white;
    padding: 40px 30px;
    flex: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft premium shadow */
    position: relative;
    transition: transform 0.3s;
}

.value-card:hover {
    transform: translateY(-5px);
}

.card-line {
    width: 40px;
    height: 4px;
    background-color: #3498db;
    margin-bottom: 25px;
}

.value-card h4 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

/* Dark CTA Banner */
.cta-banner {
    background-color: #2c3e50; /* Dark Corporate Blue */
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* Special Button for Dark Backgrounds */
.btn-white {
    background-color: white;
    color: #2c3e50;
    padding: 15px 40px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s;
}

.btn-white:hover {
    background-color: #ddd;
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .split-container {
        flex-direction: column-reverse; /* Puts 1978 on top on mobile */
        text-align: center;
        gap: 40px;
    }
    
    .values-grid {
        flex-direction: column;
    }

    .lead-paragraph {
        border-left: none;
        padding-left: 0;
    }
    /* --- GLOBAL MOBILE FIXES --- */

    /* 1. Reset the Font Size Scale */
    /* 120% is great for desktop seniors, but too big for phone screens. 
       Let's put it back to 100% (or 110%) so words don't break. */
    html {
        font-size: 100%; 
    }

    /* 2. Tame the Giant Headers */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    /* 3. Shrink the Section Padding */
    /* 100px padding eats up the whole phone screen. 60px is plenty. */
    .hero, .services, .about-section, .contact-section, .values-section {
        padding: 60px 20px; 
    }

    /* 4. Force ALL Grids to Stack Vertically */
    /* This is the "Nuclear Option" that fixes almost all layout squashing */
    .service-grid, 
    .two-col-grid, 
    .four-col-grid, 
    .values-grid, 
    .split-container, 
    .contact-container-centered,
    .story-container,
    .stats-strip {
        flex-direction: column;
        width: 100%;
        gap: 30px; /* Consistent spacing between stacked items */
    }

    /* 5. Fix Specific Components */
    
    /* Make cards full width so they are easy to read */
    .service-card, .feature-box, .value-card, .role-card {
        width: 100%; 
        min-width: 0; /* Prevents overflow issues */
    }

    /* Fix the "1978" Graphic on About Page */
    .graphic-side {
        margin-top: 20px;
    }
    
    .huge-year {
        font-size: 5rem; /* Shrink from 8rem so it fits */
    }

    /* Fix the Stats Strip (45+ Years) */
    .stats-strip {
        gap: 40px;
        padding: 40px 20px;
    }
    
    .stat-item {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 20px;
        width: 100%;
    }
    
    .stat-item:last-child {
        border-bottom: none;
    }
    header {
        padding: 10px 15px; /* Much smaller padding for phones */
    }
}
/* --- MOBILE MENU STYLES --- */

/* 1. Default: Hide the Hamburger on Desktop */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #2c3e50; /* Dark Blue */
    transition: all 0.3s ease-in-out;
}

/* 2. Media Query: Only applies to screens smaller than 768px */
@media (max-width: 768px) {

    /* Show the Hamburger */
    .hamburger {
        display: block;
        z-index: 100; /* Ensure it sits on top */
    }

    /* Hide the Language Switcher on small phones (optional cleanup) */
    .lang-switch {
        display: none; 
    }

    /* The Mobile Menu Container */
    .nav-menu {
        position: fixed;      /* Sticks to the screen */
        left: -100%;          /* Hide it off-screen to the left */
        top: 70px;            /* Start below the header */
        gap: 0;
        flex-direction: column;
        background-color: white;
        width: 100%;          /* Full width */
        text-align: center;
        transition: 0.3s;     /* Smooth slide animation */
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        padding-bottom: 20px;
    }

    /* The "Active" Class - This brings the menu on screen */
    .nav-menu.active {
        left: 0; 
    }

    /* Style the list inside the mobile menu */
    .nav-menu ul {
        flex-direction: column; /* Stack links vertically */
        padding: 20px 0;
    }

    .nav-menu li {
        margin: 15px 0;
    }

    /* Animation for the Hamburger (Turns into an X) */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0; /* Hide middle bar */
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}