:root {
  --dark-graphite: #2b2b2b;
  --off-white: #f8f8f8;
  --muted-copper: #b87333;
  --pale-gray: #EAEAEA;
  --dark-gray: #555;
  --gray80: #ccc;
  --medium-dark-gray: #888
  --doctor-white: #f9f9f9
}

body { 
    font-family: sans-serif; 
    background-color: var(--dark-graphite); 
    color: var(--off-white);
    margin: 0; 
    padding: 0; 
}

.container { 
    max-width: 900px; /* This keeps the site from stretching too wide*/
    margin: 40px auto;/* Centers the container */ 
    background-color: var(--dark-graphite); /* Keep consistent or change to #333 if you want a subtle 'card' look */
    padding: 40px 40px 10px 40px; 
    border: 2px solid var(--muted-copper); /* Now using your variable */
    color: var(--off-white);
}

/* Tightens the top spacing specifically on the Contact page header */
.container h1:first-child {
    margin-top: 0px; /* Reduces the default browser top gap */
}

img {
    max-width: 100%; /* Prevents images from stretching the page */
    height: auto;
}

/* Container for the whole header row */
.site-header {
    background-color: var(--dark-graphite); 
    padding: 10px 0; /* Controls the absolute top and bottom frame of the header */
    border-bottom: 2px solid var(--muted-copper); 
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    /* Change space-between to flex-start so items sit naturally next to each other */
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px;
}

/* This now controls the actual lettering height directly */
.logo img {
    height: 25px;  /* Adjust this number to get your perfect baseline size */
    width: auto;
    max-width: 100%;
    display: block; 
}

/* Navigation link styling - NOW ACTIVE 20260616...revd 6/18*/
.main-nav a {
    color: var(--medium-dark-gray); 
    text-decoration: none;
    margin-left: 25px;
    font-weight: 500;
    display: inline-block; /* Allows the link to respect width and height limits*/ 
    max-width: 100px;      /* Limits horizontal space to force wrapping on long items*/ 
    vertical-align: middle;/* Centers shorter, single-line links vertically relative to the logo*/
    line-height: 1.2;      /* Keeps the stacked lines tight so they don't drift apart*/
    text-align: center;    /* Centers the wrapped text lines for a balanced look */
}

/* Hover effect for standard links so users know they are interactive 20260616*/
.main-nav a:hover {
    color: var(--muted-copper);
}

/* Make 'Contact Us' look like a distinct button 20260616*/
.main-nav .contact-link {
    color: var(--muted-copper); /* Enforces your copper choice */
    font-weight: bold;
}

.main-nav .contact-link:hover {
    text-decoration: underline;
}

.cta-box { 
    background: var(--pale-gray);
    padding: 25px; 
    border-left: 5px solid var(--muted-copper); 
    margin: 30px 0; 
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3; 
    color: var(--dark-graphite);
}

h1 {
    color: var(--muted-copper); 
    font-size: 2em;
    line-height: 1.2;      /* Keeps the title lines close together */
    margin-bottom: 0.5em;  /* Tighter gap below the main title */
}

h2 { 
    color: var(--muted-copper); 
    font-size: 1.5em;      /* Added for hierarchy */
    margin-top: 15px;      /* Reduced from 40px for a "denser" look */
    margin-bottom: 2px;   /* Keeps the heading close to the paragraph below it */
    border-bottom: 2px solid var(--dark-graphite); 
    display: inline-block; 
    padding-bottom: 2px;   /* Tightened padding under the text */
    line-height: 1.2;      
}

p { 
    line-height: 1.6; 
}

ul { 
    line-height: 1.8; 
    margin-bottom: 20px; 
}

.footer { 
    margin-top: 50px; 
    font-size: 0.9em; 
    text-align: center; 
    color: var(--dark-gray); 
    border-top: 1px solid var(--gray80); 
    padding-top: 20px; 
}

.hero { 
    width: 100%; height: auto; margin-bottom: 10px;
}

.logo { 
    margin-bottom: 0px; 
}

.logo img {
    height: 65px; /* Try bumping this up significantly */
    width: auto;   /* Keeps it from looking squished */        
}
        
.contact-link {.log
    color: var(--muted-copper); /* Example copper color */
    text-decoration: none;
}

.contact-link:hover {
    text-decoration: underline;
}

a {
    color: var(--muted-copper); /* Makes them match your accent color */
    text-decoration: none;      /* Removes the underline */
}

a:hover {
    text-decoration: underline; /* Adds the underline back when they hover */
}

/* Container for the logo and locations */
.footer-content {
    display: flex;
    align-items: center;       /* Centers items vertically relative to each other */
    justify-content: center;   /* Centers the entire line horizontally */
    gap: 15px;                 /* Puts a clean space between the image and the text */
    margin-bottom: 2px;       /* Puts space above the copyright line */
    list-style: none;          /* Safeguard: removes accidental bullet points */
}

/* Control the size of the logo icon in the footer */
.footer-icon {
    height: 42px;
    width: auto;               /* Keeps the aspect ratio intact */
    display: inline-block;
    vertical-align: middle;
}

.locations {
    margin: 0;                 /* Removes default paragraph margins that push things out of alignment */
    font-size: 0.95rem;
}

.locations strong {
    color: var(--muted-copper); /* Makes them match your accent color */
    font-weight: normal;
}

/* Copyright section */
.footer-copyright {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7;              /* Mutes the copyright slightly so locations stand out */
}

/* New rules for 'Benefits' pasted in below here 6/16/26 PM*/  

/* ==========================================
   COLOR ENFORCEMENT & LAYOUT FOR SUBPAGES 
   ========================================== */

/* 1. Ensure headings use your crisp copper highlight */
.benefit-section h2, 
.benefit-section h3,
.distinction-section h2 {
    color: var(--muted-copper) !important;
}

/* 2. Technical Image Frame Adjustment */
.page-diagram {
    width: 100%;
    margin: 30px 0;
    text-align: center;
}

.page-diagram img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--muted-copper); 
    border-radius: 4px;
    padding: 25px; /* 👈 Adds space inside the copper frame around the entire image */
    box-sizing: border-box; /* 👈 Ensures padding doesn't push the frame past 100% width */
}

.page-header .subtitle {
    font-weight: bold;
}

/* 3. Force the subpage separating lines to use your copper variable */
.content-container hr {
    border: none;
    border-top: 1px solid var(--muted-copper);
    margin: 40px 0;
    width: 100%;
}

/* 4. Corrected Text Call-to-Action (CTA) Box - Dark Text on Light Background */
.cta-box { 
    padding: 25px; 
    border-left: 4px solid var(--muted-copper); /* Direct copper accent line */
    margin: 40px 0 20px 0; 
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.8; 
    color: var(--dark-graphite) !important; /* FORCES dark graphite for high-contrast visibility */
}

.cta-contact-info {
    padding-left: 30px; /* Your preferred layout text indent */
    font-weight: bold;  /* Forces both text and links inside to be bold */
    line-height: 1.25;   /* xxxxx-spaces the text lines to create a clean visual gap */
}

/* Only force dark text when the contact info is inside the temporary homepage CTA box */
.subpage-cta-frame .cta-contact-info {
    color: var(--dark-graphite);
}

/* ==========================================
   PERMANENT SUBPAGE CALL-TO-ACTION MODULE 
   ========================================== */

/* The Centered Copper Outer Frame */
.subpage-cta-frame {
    border: 2px solid var(--muted-copper); /* Crisp copper box frame */
    border-radius: 4px;
    padding: 10px 40px; /* The first number controls top/bottom internal space; the second controls left/right */
    margin: 50px auto 20px auto;
    max-width: 700px; /* Kept slightly narrower than the text layout for a balanced indent */
    text-align: center; /* Centers both your text lines and the button */
    background: transparent; /* Sits directly on your dark-graphite site canvas */
    color: var(--off-white) !important; /* Perfect high-contrast light typography */
    line-height: 1.8;
    font-size: 1.1em;
}

/* The Primary Industrial Solid Copper Button */
.subpage-copper-button {
    display: inline-block;
    text-align: center;
    background-color: var(--muted-copper); /* Solid copper block stands out on dark graphite */
    color: var(--dark-graphite) !important; /* Crisp dark text inside the copper block */
    padding: 14px 32px;
    font-size: 1.05em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px; /* Matches your clean engineering layout lines */
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: 20px; /* Clean spatial gap below your text paragraph */
    border: none;
    cursor: pointer;
}

/* Hover State - Smoothly shifts to Off-White when targeted */
.subpage-copper-button:hover {
    background-color: var(--off-white);
    color: var(--dark-graphite) !important;
    text-decoration: none;
}

/* ==========================================
   INDUSTRIAL FORM INTERFACE & LAYOUT STYLES 
   ========================================== */

.direct-contact-info {
    margin: 30px 0;
    font-size: 1.1em;
    color: var(--off-white);
    line-height: 1.8;
}

.contact-divider {
    border: 0;
    height: 1px;
    background: rgba(212, 117, 75, 0.2); /* Faded copper accent line */
    margin: 40px 0;
}

.contact-page .container h1:first-child {
    margin-top: 0px;
}

/* Center the form area itself inside the 900px copper box */
.custom-contact-form {
    max-width: 700px;       /* Keeps the text fields bounded at your preferred width */
    margin: 40px auto 0;    /* 'auto' centers the 700px form frame; 40px top gap */
    width: 100%;
}

.form-group {
    margin-bottom: 25px; /* Clean tracking gap between rows */
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--off-white);
    font-size: 0.95em;
    letter-spacing: 0.5px;
}

/* Crisp Technical Input Fields */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.02); /* Blends into dark-graphite background */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Understated default borders */
    color: var(--off-white);
    font-family: inherit;
    font-size: 1em;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Form Input Placeholders */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.3); /* Softened text hints */
}

/* Sharp Copper Activation Focus State */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--muted-copper); /* Field glows copper when clicked */
    box-shadow: 0 0 5px rgba(212, 117, 75, 0.2);
}

/* Industrial Form Submit Action Button */
.form-submit-button {
    display: block;          /* Changes it from text-flow to a structural block */
    margin: 30px auto 50px; /* 30px space above, centered left/right via auto, 50px gap above the footer */
    width: auto;
    background-color: var(--muted-copper); /* Solid copper default block */
    color: var(--dark-graphite) !important; /* High-contrast dark text labels */
    padding: 14px 40px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

/* Hover State - Smooth shift to white feedback marker */
.form-submit-button:hover {
    background-color: var(--off-white);
}

/* ==========================================
   NAVIGATION ACTIVE PAGE HIGHLIGHT 
   ========================================== */

/* This targets the active link inside your main-nav container */
.main-nav a.active-page { 
    color: var(--muted-copper) !important;
    font-weight: bold !important;
}

/* ==========================================================================
   Our Approach Page - Industrial Alternating Grid & AI Box
   ========================================================================== */

/* Target rule isolated to just the Approach page h1 via body ID */
#approach-page .container h1:first-child {
    margin-top: 0px;
}

/* The Grid Container */
.approach-grid {
    margin-top: 40px;
    margin-bottom: 50px;
}

/* Individual Principle Rows */
.grid-row {
    display: flex;
    align-items: flex-start;
    padding: 25px 0;
    border-bottom: 1px solid rgba(244, 241, 234, 0.1); /* Subtle, faint separator line */
}

/* Clear the bottom line on the final row */
.grid-row:last-child {
    border-bottom: none;
}

/* Left Column: Big Bold Copper Labels */
.grid-label {
    flex: 0 0 30%; /* Locks the width to 30% of the box */
    font-size: 1.25em;
    font-weight: bold;
    color: var(--muted-copper);
    padding-right: 20px;
}

/* Right Column: Text Blocks */
.grid-text {
    flex: 0 0 70%; /* Locks text width to 70% */
    color: var(--off-white);
}

.grid-text p {
    margin: 0;
    line-height: 1.5;
}

/* High-Impact AI Callout Box */
.ai-cta-frame {
    margin-top: 50px;
    margin-bottom: 60px;
    padding: 35px;
    border: 2px solid var(--muted-copper);
    border-radius: 4px;
    background-color: rgba(184, 115, 51, 0.03); /* Extremely subtle copper mist backdrop */
    text-align: left;
}

.ai-cta-frame h2 {
    color: var(--muted-copper);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.ai-cta-frame p {
    color: var(--off-white);
    line-height: 1.6;
    margin-bottom: 20px;
}

.ai-cta-frame .ai-cta-subtext {
    font-weight: bold;
    margin-bottom: 25px;
}

/* Centers the action button inside the box */
.ai-cta-frame .subpage-copper-button {
    display: block;
    margin: 0 auto;
    width: max-content;
    text-align: center;
}

/* Responsive adjustment for tablets or smaller screens */
@media (max-width: 768px) {
    .grid-row {
        flex-direction: column; /* Stacks column labels above text on small screens */
    }
    .grid-label {
        margin-bottom: 10px;
        width: 100%;
    }
    .grid-text {
        width: 100%;
    }
}

/* ==========================================================================
   Our Approach Page - AI Feature Section (Suggestion 2)
   ========================================================================== */
.ai-feature-box {
    border-left: 5px solid var(--muted-copper);
    padding-left: 20px;
    margin: 35px 0;
}

/* Presentation styles for the distinct list style within the AI block */
.ai-feature-box ul {
    list-style-type: disc;
    margin-top: 15px;
}

.ai-feature-box li {
    margin-bottom: 12px;
    line-height: 1.5;
}

/* ==========================================================================
   Manufacturing Page Styles (Industries & Functional Grid)
   ========================================================================== */

/* 3-Column Text Grid for Industries Served */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.industries-grid div {
    line-height: 1.4;
    padding: 4px 0;
}

/* 2x2 Dashboard Grid for Functional Areas Supported */
.functional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 25px;
}

.functional-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle boundary rule */
    padding: 20px;
    border-radius: 4px;
}

.functional-card h3 {
    margin-top: 0;
    color: var(--muted-copper); /* Accent coloring for departmental headers */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    font-size: 1.2em;
}

.functional-card ul {
    margin-top: 12px;
    padding-left: 20px;
    list-style-type: disc;
}

.functional-card li {
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Responsive adjustments for smaller tablet/mobile displays */
@media (max-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .functional-grid {
        grid-template-columns: 1fr;
    }
}

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

/* ==========================================================================
   MS Access Page - Featured Callout (The Tether-Free Reality Introduction)
   ========================================================================== */
.featured-intro-box {
    border-left: 5px solid var(--muted-copper);
    padding-left: 20px;
    margin: 30px 0;
}

/* ==========================================================================
   Specialized Expertise Page - Technical Highlights
   ========================================================================== */
.content-container strong {
    color: var(--off-white); /* Keeps your signature accent color - rev'd 6/29/26 */
    font-weight: bold;          /* Keeps it crisp and bold */
    background: none;           /* Removes the shading box entirely */
    padding: 0;                 /* Removes the inner padding spacing */
    border: none;               /* Removes the box border */
}