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

/* ============================================================================
   STAINLESS STEEL MATERIAL SYSTEM
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PRODUCTION STAINLESS STEEL IMAGE BACKGROUNDS
   These classes use the production stainless steel image for consistent 
   material application across the site. The image provides authentic 
   brushed texture that maintains quality at all scales.
   ---------------------------------------------------------------------------- */

/* Full-section background using stainless steel image */
.bg-stainless-light {
    position: relative;
    background-image: url('../images/stainless-light.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Grain runs horizontally in the source image */
}

/* Dark stainless steel background variant */
.bg-stainless-dark {
    position: relative;
    background-image: url('../images/stainless-dark.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Grain runs horizontally in the source image */
}

/* Add readability overlay for hero/header sections with text content */
.bg-stainless-light.with-overlay::before,
.bg-stainless-dark.with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradient overlay ensures text remains readable against stainless */
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Ensure content sits above overlay */
.bg-stainless-light.with-overlay > *,
.bg-stainless-dark.with-overlay > * {
    position: relative;
    z-index: 2;
}

/* Thin horizontal divider using stainless steel image */
.divider-stainless {
    height: 12px;
    background-image: url('../images/stainless-light.jpeg');
    /* Zoom in to make grain more visible at small heights */
    background-size: 200% auto;
    background-position: center;
    background-repeat: no-repeat;
    /* Horizontal grain orientation preserved */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   CSS-GENERATED STAINLESS STEEL SYSTEM (LEGACY)
   These classes remain for backward compatibility and lightweight usage
   ============================================================================ */

:root {
    /* Stainless Steel Color Stops */
    --steel-darkest: #8a8a8a;
    --steel-dark: #a0a0a0;
    --steel-mid-dark: #b8b8b8;
    --steel-mid: #d0d0d0;
    --steel-mid-light: #e4e4e4;
    --steel-light: #f0f0f0;
    --steel-lightest: #f8f8f8;
    
    /* Stainless Steel Edge Colors */
    --steel-edge-dark: #888888;
    --steel-edge-light: #ffffff;
    
    /* Shine Control Variable - adjust this to increase/decrease shine */
    /* Values: 0 = no shine, 0.5 = subtle, 1.0 = moderate, 1.5 = strong */
    --steel-shine-strength: 2.2;
    
    /* Stainless Steel Gradient (brushed horizontal) - BASE LAYER */
    --steel-gradient: linear-gradient(
        180deg,
        var(--steel-light) 0%,
        var(--steel-mid-light) 8%,
        var(--steel-mid) 15%,
        var(--steel-mid-dark) 30%,
        var(--steel-dark) 50%,
        var(--steel-mid-dark) 70%,
        var(--steel-mid) 85%,
        var(--steel-mid-light) 92%,
        var(--steel-light) 100%
    );
    
    /* Primary Anisotropic Highlight Band */
    --steel-highlight-primary: radial-gradient(
        ellipse 250% 30% at 50% 28%,
        rgba(240, 245, 250, calc(0.18 * var(--steel-shine-strength))) 0%,
        rgba(235, 242, 248, calc(0.14 * var(--steel-shine-strength))) 25%,
        rgba(230, 238, 245, calc(0.08 * var(--steel-shine-strength))) 50%,
        rgba(255, 255, 255, 0) 75%
    );
    
    /* Secondary Anisotropic Highlight Band */
    --steel-highlight-secondary: radial-gradient(
        ellipse 200% 25% at 50% 65%,
        rgba(238, 242, 248, calc(0.12 * var(--steel-shine-strength))) 0%,
        rgba(235, 240, 245, calc(0.08 * var(--steel-shine-strength))) 30%,
        rgba(255, 255, 255, 0) 60%
    );
    
    /* Edge Catch-Light Top */
    --steel-edge-top: linear-gradient(
        180deg,
        rgba(242, 246, 250, calc(0.22 * var(--steel-shine-strength))) 0%,
        rgba(240, 244, 248, calc(0.12 * var(--steel-shine-strength))) 3%,
        rgba(255, 255, 255, 0) 8%
    );
    
    /* Edge Catch-Light Bottom */
    --steel-edge-bottom: linear-gradient(
        0deg,
        rgba(200, 205, 210, calc(0.10 * var(--steel-shine-strength))) 0%,
        rgba(210, 215, 220, calc(0.06 * var(--steel-shine-strength))) 3%,
        rgba(255, 255, 255, 0) 8%
    );
    
    /* Soft satin sheen with horizontal stretch */
    --steel-sheen: radial-gradient(
        ellipse 180% 35% at 50% 25%,
        rgba(245, 248, 252, calc(0.12 * var(--steel-shine-strength))) 0%,
        rgba(240, 244, 248, calc(0.08 * var(--steel-shine-strength))) 30%,
        rgba(255, 255, 255, 0) 60%
    );
}

/* Base Stainless Steel Class */
.stainless {
    position: relative;
    background: var(--steel-gradient);
    border: 1px solid var(--steel-edge-dark);
    box-shadow: 
        inset 0 1px 0 var(--steel-edge-light),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Brushed grain effect using pseudo-element - BASE TEXTURE (always on) */
.stainless::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.06) 1px,
            rgba(255, 255, 255, 0.06) 2px,
            transparent 2px,
            transparent 3px,
            rgba(0, 0, 0, 0.04) 3px,
            rgba(0, 0, 0, 0.04) 4px
        );
    pointer-events: none;
    z-index: 2;
}

/* SHINE LAYER - Multiple highlight bands with anisotropic behavior */
/* TO DISABLE SHINE: Comment out this entire ::after block */
/* TO ADJUST SHINE: Change --steel-shine-strength variable (0 to 1.5) */
.stainless::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        var(--steel-edge-top),
        var(--steel-highlight-primary),
        var(--steel-highlight-secondary),
        var(--steel-edge-bottom);
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* FALLBACK: To revert to previous non-shiny version, replace ::after with:
.stainless::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse 200% 40% at 50% 30%,
        rgba(240, 245, 250, 0.15) 0%,
        rgba(235, 242, 248, 0.12) 20%,
        rgba(230, 238, 245, 0.08) 40%,
        rgba(255, 255, 255, 0) 65%
    );
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: overlay;
}
*/

/* Stainless Variants */

/* Thin horizontal divider bar */
.stainless-bar {
    position: relative;
    height: 8px;
    background: var(--steel-gradient);
    border-top: 1px solid var(--steel-edge-light);
    border-bottom: 1px solid var(--steel-edge-dark);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

.stainless-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.08) 2px,
            rgba(255, 255, 255, 0.08) 3px,
            transparent 3px,
            transparent 5px,
            rgba(0, 0, 0, 0.05) 5px,
            rgba(0, 0, 0, 0.05) 6px
        );
    pointer-events: none;
    z-index: 2;
}

/* Panel background block */
.stainless-panel {
    position: relative;
    background: var(--steel-gradient);
    padding: 2rem;
    border: 1px solid var(--steel-edge-dark);
    border-radius: 2px;
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(0, 0, 0, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.15);
}

.stainless-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1.5px,
            rgba(255, 255, 255, 0.07) 1.5px,
            rgba(255, 255, 255, 0.07) 2.5px,
            transparent 2.5px,
            transparent 4px,
            rgba(0, 0, 0, 0.04) 4px,
            rgba(0, 0, 0, 0.04) 5px
        );
    pointer-events: none;
    border-radius: 2px;
    z-index: 2;
}

.stainless-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        var(--steel-edge-top),
        var(--steel-highlight-primary),
        var(--steel-highlight-secondary),
        var(--steel-edge-bottom);
    pointer-events: none;
    mix-blend-mode: overlay;
    border-radius: 2px;
}

/* Accent button */
.stainless-button {
    position: relative;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--steel-gradient);
    border: 1px solid var(--steel-edge-dark);
    border-radius: 3px;
    color: #1a1a1a;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    overflow: hidden;
}

.stainless-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.05) 1px,
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 3px,
            rgba(0, 0, 0, 0.03) 3px,
            rgba(0, 0, 0, 0.03) 4px
        );
    pointer-events: none;
}

.stainless-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--steel-sheen);
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: soft-light;
}

.stainless-button:hover {
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.stainless-button:active {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

/* List separator or bullet points */
.stainless-list {
    list-style: none;
    padding: 0;
}

.stainless-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
}

.stainless-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 12px;
    height: 12px;
    background: var(--steel-gradient);
    border: 1px solid var(--steel-edge-dark);
    border-radius: 2px;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

.stainless-list li::after {
    content: '';
    position: absolute;
    left: 1px;
    top: calc(0.5em + 1px);
    width: 10px;
    height: 10px;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.08) 1px,
            rgba(255, 255, 255, 0.08) 2px
        );
    pointer-events: none;
}

/* Additional utility: Stainless divider */
.stainless-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--steel-edge-dark) 10%,
        var(--steel-mid-dark) 50%,
        var(--steel-edge-dark) 90%,
        transparent
    );
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.3),
        0 -1px 0 rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
}

/* Additional utility: Stainless badge */
.stainless-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--steel-gradient);
    border: 1px solid var(--steel-edge-dark);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2a2a2a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   END STAINLESS STEEL DESIGN SYSTEM
   ============================================================================ */

html {
    font-size: 16px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
.site-header {
    position: relative;
    padding: 1.25rem 0;
    border-bottom: 3px solid #d32f2f;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.logo-link {
    display: block;
    line-height: 0;
}

.logo {
    height: 72px;
    width: auto;
    border-radius: 8px;
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.logo:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.phone-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    background-color: #d32f2f;
    border-radius: 8px;
    transition: all 0.2s;
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.phone-link:hover {
    background-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Hero Section */
.hero {
    color: #fff;
    padding: 4rem 0;
    text-align: left;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: space-between;
}

.hero-text {
    flex: 1;
    max-width: 600px;
}

.hero-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}

.hero-logo-main {
    width: 100%;
    max-width: 550px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.hero-logo-stamp {
    max-width: 230px;
    height: auto;
    transform: rotate(-8deg);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    margin-top: -77px;
    margin-right: 50px;
}

.hero h1 {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #e0e0e0;
}

.service-area {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: #b0b0b0;
    font-weight: 500;
}

/* Buttons */
.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-primary {
    background-color: #d32f2f;
    color: #fff;
    border-radius: 8px;
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:hover {
    background-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background-color: #d32f2f;
    color: #fff;
    border-radius: 8px;
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background-color: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Services Overview */
.services-overview {
    padding: 4rem 0;
    background-color: #f5f5f5;
    border-top: 3px solid #d32f2f;
}

.services-overview h2 {
    text-align: center;
    font-size: 2.7rem;
    margin-bottom: 3rem;
    color: #1a1a1a;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.service-card {
    background-color: #fff;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #d32f2f;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #fff;
}

.service-card p {
    color: #fff;
    line-height: 1.6;
}

.cta-section {
    text-align: center;
    margin-top: 2rem;
}

/* About Section */
.about {
    padding: 4rem 0;
    border-top: 3px solid #d32f2f;
}

.about h2 {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.about p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 1rem;
}

/* CTA Banner */
.cta-banner {
    padding: 3rem 0;
    text-align: center;
    border-top: 3px solid #d32f2f;
}

.cta-banner h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.cta-banner p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Page Header */
.page-header {
    background-color: #2d2d2d;
    color: #fff;
    padding: 3rem 0;
    text-align: center;
    border-bottom: 3px solid #d32f2f;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.page-header p {
    font-size: 1.125rem;
    color: #e0e0e0;
}

/* Services Detail */
.services-detail {
    padding: 4rem 0;
}

.service-detail-card {
    background-color: #f9f9f9;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    border-left: 4px solid #d32f2f;
}

.service-detail-card h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: #fff;
}

.service-detail-card p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #fff;
}

/* Contact Content */
.contact-content {
    padding: 4rem 0;
}

.contact-layout {
    display: flex;
    gap: 3rem;
    align-items: stretch;
    margin-bottom: 4rem;
}

.contact-info {
    flex: 1;
}

.contact-info-box {
    padding: 2rem;
    border: 3px solid #d32f2f;
    border-radius: 4px;
    height: 100%;
}

.contact-info-box h2,
.contact-info-box h3,
.contact-info-box p,
.contact-info-box ul,
.contact-info-box ul li,
.contact-info-box .contact-detail,
.contact-info-box .service-area-text {
    color: #fff !important;
}

.contact-info-box h2 {
    margin-bottom: 2rem;
}

.contact-info-box h3 {
    margin-bottom: 0.5rem;
}

.phone-button {
    display: inline-block;
    margin-top: 0.5rem;
}

.contact-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-image-box {
    padding: 1rem;
    border: 3px solid #d32f2f;
    border-radius: 4px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-image-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.contact-detail {
    margin-bottom: 2.5rem;
}

.contact-detail:last-child {
    margin-bottom: 0;
}

.contact-detail ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.contact-detail li {
    padding: 0.5rem 0;
    font-size: 1.125rem;
    color: #444;
}

.contact-detail li:before {
    content: "• ";
    color: #d32f2f;
    font-weight: bold;
    margin-right: 0.5rem;
}

.contact-cta {
    padding: 3rem;
    text-align: center;
    border-radius: 4px;
    max-width: 800px;
    margin: 0 auto;
    border: 3px solid #d32f2f;
}

.contact-cta h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.contact-cta p {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

/* Footer */
.site-footer {
    background-color: #1a1a1a;
    color: #b0b0b0;
    padding: 3rem 0;
    border-top: 3px solid #d32f2f;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-info {
    flex: 1;
    min-width: 250px;
}

.footer-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.footer-info p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.footer-info a {
    color: #b0b0b0;
    text-decoration: none;
}

.footer-info a:hover {
    color: #fff;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-nav a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 1rem;
}

.footer-nav a:hover {
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        gap: 2rem;
    }

    .hero-text {
        max-width: 100%;
        text-align: center;
    }

    .hero-logo {
        align-items: flex-end;
    }

    .hero-logo-main {
        max-width: 400px;
    }

    .hero-logo-stamp {
        max-width: 180px;
        margin-top: -60px;
        margin-right: 60px;
        align-self: flex-end;
    }

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

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .service-area {
        font-size: 1rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .about h2,
    .services-overview h2 {
        font-size: 1.75rem;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .footer-content {
        flex-direction: column;
    }

    .contact-layout {
        flex-direction: column;
    }

    .phone-large {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .logo {
        height: 56px;
    }

    .phone-link {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .hero-logo-main {
        max-width: 300px;
    }

    .hero-logo-stamp {
        max-width: 140px;
        margin-top: -43px;
        margin-right: 45px;
        align-self: flex-end;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero {
        padding: 3rem 0;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
}