/*
Theme Name: Eternal Engineering Full
Theme URI: https://eternalengineering.in/
Author: Eternal Engineering
Description: WordPress theme generated from the attached Eternal Engineering page code, with dynamic WordPress menus and bundled The Seasons/Aptos fonts.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eternal-engineering
*/

@font-face {
  font-family: "The Seasons";
  src: url("assets/fonts/the-seasons/TheSeasons-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Seasons";
  src: url("assets/fonts/the-seasons/TheSeasons-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos";
  src: url("assets/fonts/aptos/Aptos-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos";
  src: url("assets/fonts/aptos/Aptos-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos";
  src: url("assets/fonts/aptos/Aptos-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos Serif";
  src: url("assets/fonts/aptos/Aptos-Serif.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aptos Serif";
  src: url("assets/fonts/aptos/Aptos-Serif-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
            /* In production, these will be your 'The Seasons' and 'Aptos' local fonts */
            --font-heading: 'The Seasons', Georgia, serif; 
            --font-body: 'Aptos', Arial, sans-serif; 
            --color-bg: #F9F9F7;
            --color-text: #1C1C1C;
            --color-muted: #5A5A5A;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: var(--font-body);
            background-color: var(--color-bg);
            color: var(--color-text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 400;
            line-height: 1.1;
        }
        /* --- HEADER --- */
        .site-header {
            position: relative;
            width: 100%;
            padding: 1.8rem 5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background-color: #EBE5DF;
            color: #111;
        }
        .logo {
            font-family: var(--font-heading);
            font-size: 2rem;
            text-decoration: none;
            color: inherit;
        }
        .main-navigation ul {
            display: flex;
            list-style: none;
            gap: 2.5rem;
        }
        .main-navigation a {
            text-decoration: none;
            color: inherit;
            font-size: 0.95rem;
            font-weight: 500;
            transition: opacity 0.3s ease;
        }
        .main-navigation a:hover {
            opacity: 0.6;
        }
        /* --- HERO SECTION --- */
        .hero {
            height: 100vh;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #111;
        }
        .hero-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            opacity: 0.85; /* Slight dimming for text contrast */
        }
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            padding: 0 2rem;
            max-width: 1100px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hero h1 {
            font-size: clamp(3.5rem, 7vw, 6rem);
            margin: 0 auto;
            font-weight: 400;
        }
        .hero p.subheadline {
            margin-top: 1.5rem;
            font-size: 1.05rem;
            font-weight: 500;
            line-height: 1.6;
            max-width: 900px;
        }
        .hero-buttons {
            display: flex;
            gap: 1.5rem;
            margin-top: 2.5rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        .btn-primary {
            display: inline-block;
            background-color: #EBE5DF;
            color: #111;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        .btn-primary:hover {
            background-color: #D9D3CD;
            transform: translateY(-2px);
        }
        .btn-secondary {
            display: inline-block;
            background-color: transparent;
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            border: 1px solid white;
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
        }
        .btn-secondary:hover {
            background-color: white;
            color: #111;
            transform: translateY(-2px);
        }
        /* --- LAYOUT SECTIONS --- */
        section {
            padding: 10rem 5rem;
            max-width: 1600px;
            margin: 0 auto;
        }
        #process {
            padding-top: 6rem;
            padding-bottom: 3rem; /* Massively reduced from the default 10rem */
        }
        #services {
            padding-top: 4rem;
            padding-bottom: 4rem; /* Reduced bottom spacing */
            border-top: 1px solid rgba(28, 28, 28, 0.15); /* Elegant separator line */
        }
        /* --- GLOBAL UTILITIES --- */
        .text-center {
            text-align: center;
            margin-bottom: 5rem;
        }
        .section-title {
            font-size: 4rem;
        }
        /* --- PROCESS SECTION --- */
        .process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 3rem;
            margin-top: 4rem;
        }
        .process-card {
            border-top: 1px solid rgba(28, 28, 28, 0.2);
            padding-top: 2rem;
        }
        .process-number {
            font-family: var(--font-heading);
            font-size: 3.5rem;
            font-style: italic;
            display: block;
            margin-bottom: 1.5rem;
            line-height: 1;
        }
        .process-card h3 {
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }
        .process-card p {
            font-size: 0.95rem;
            color: var(--color-muted);
            line-height: 1.7;
        }
        /* --- OUR SERVICES SECTION --- */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4rem;
            margin-top: 4rem;
        }
        .service-card {
            text-align: center;
        }
        .service-icon-wrapper {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 2rem;
            background-color: #F4F1ED;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6rem;
            transition: transform 0.3s ease;
        }
        .service-card:hover .service-icon-wrapper {
            transform: translateY(-5px);
        }
        .service-title-wrapper {
            display: inline-block;
            margin-bottom: 1.5rem;
        }
        .service-title-wrapper h3 {
            font-family: var(--font-heading);
            font-size: 2.2rem;
            margin: 0;
            font-weight: 400;
        }
        .service-card p {
            font-size: 0.95rem;
            color: var(--color-muted);
            line-height: 1.7;
            max-width: 90%;
            margin: 0 auto;
        }
        /* --- TRUST BAR SECTION --- */
        #trust-bar {
            padding-top: 4rem;
            padding-bottom: 4rem;
            border-top: 1px solid rgba(28, 28, 28, 0.15);
        }
        .trust-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem 2rem;
            margin-top: 3.5rem;
        }
        .trust-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.05rem;
            font-weight: 500;
            background-color: #F4F1ED;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }
        .trust-item:hover {
            transform: translateY(-3px);
        }
        .trust-icon {
            color: #111; 
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            padding: 4px;
            flex-shrink: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        /* --- SECTORS SECTION --- */
        #sectors {
            padding-top: 4rem;
            padding-bottom: 5rem;
            border-top: 1px solid rgba(28, 28, 28, 0.15);
        }
        .sectors-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin-top: 4rem;
        }
        .sector-tile {
            background: white;
            border: 1px solid rgba(28, 28, 28, 0.05);
            border-radius: 16px;
            padding: 2.5rem 1.5rem;
            width: calc(25% - 1.5rem);
            min-width: 200px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .sector-tile:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }
        .sector-icon {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            display: inline-block;
        }
        .sector-tile h3 {
            font-size: 1.1rem;
            font-family: var(--font-body);
            font-weight: 500;
            color: var(--color-text);
            margin: 0;
        }
        /* --- SOFTWARE SECTION --- */
        #software {
            padding-top: 5rem;
            padding-bottom: 5rem;
            border-top: 1px solid rgba(28, 28, 28, 0.15);
        }
        .software-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4rem;
            margin-top: 4rem;
        }
        .software-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .software-logo {
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            border: 1px solid rgba(28, 28, 28, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .software-logo img {
            width: 78%;
            height: 78%;
            object-fit: contain;
            display: block;
        }
        .software-card:hover .software-logo {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        }
        .software-card h3 {
            font-size: 1.25rem;
            font-weight: 500;
            font-family: var(--font-body);
            margin-bottom: 0.5rem;
        }
        .software-card p {
            font-size: 0.95rem;
            color: var(--color-muted);
            line-height: 1.6;
        }
        /* --- DIFFERENCE SECTION --- */
        #difference {
            padding-top: 5rem;
            padding-bottom: 5rem;
            border-top: 1px solid rgba(28, 28, 28, 0.15);
        }
        .difference-list {
            max-width: 800px;
            margin: 4rem auto 0;
            display: flex;
            flex-direction: column;
        }
        .diff-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 2rem 0;
            border-bottom: 1px solid rgba(28, 28, 28, 0.1);
        }
        .diff-item:first-child {
            border-top: 1px solid rgba(28, 28, 28, 0.1);
        }
        .diff-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            color: #111;
            margin-top: 0.15rem;
        }
        .diff-item p {
            font-size: 1.1rem;
            color: var(--color-muted);
            line-height: 1.6;
            margin: 0;
        }
        .diff-item strong {
            color: var(--color-text);
            font-weight: 500;
        }
        /* --- CTA SECTION --- */
        #cta {
            padding-top: 2rem;
            padding-bottom: 6rem;
        }
        .cta-container {
            background-color: var(--color-text);
            color: white;
            border-radius: 24px;
            padding: 6rem 3rem;
            text-align: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        .cta-container h2 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }
        .cta-container p {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2.5rem;
        }
        .btn-cta {
            display: inline-block;
            background-color: #EBE5DF;
            color: #111;
            padding: 1.2rem 3rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.05rem;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .btn-cta:hover {
            transform: translateY(-3px);
            background-color: white;
        }
        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .site-header { padding: 2rem; }
            section { padding: 6rem 2rem; }
            #process, #services { padding-top: 3rem; }
            #services { padding-bottom: 3rem; }
            .process-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem; }
            .services-grid { gap: 2rem; }
            #trust-bar { padding-top: 3rem; padding-bottom: 3rem; }
            #sectors { padding-top: 3rem; }
            #software { padding-top: 4rem; }
            #difference { padding-top: 4rem; padding-bottom: 3rem; }
            .cta-container { padding: 5rem 2rem; }
            .cta-container h2 { font-size: 3rem; }
            .sector-tile { width: calc(33.333% - 1.33rem); }
        }
        @media (max-width: 768px) {
            .main-navigation ul { display: none; /* Hidden on mobile for preview simplicity */ }
            .process-grid { grid-template-columns: 1fr; gap: 3rem; }
            .services-grid { grid-template-columns: 1fr; gap: 4rem; }
            .trust-grid { flex-direction: column; gap: 1rem; }
            .sector-tile { width: calc(50% - 1rem); }
            .software-grid { grid-template-columns: 1fr; gap: 3rem; }
            .difference-list { margin-top: 3rem; }
            .diff-item { padding: 1.5rem 0; gap: 1rem; }
            .cta-container { padding: 4rem 1.5rem; }
            .cta-container h2 { font-size: 2.4rem; }
            .hero h1 { font-size: 3.5rem; }
        }
        @media (max-width: 480px) {
            .sector-tile { width: 100%; }
        }

:root {
           --font-heading: 'The Seasons', Georgia, serif;
           --font-body: 'Aptos', Arial, sans-serif;
           --color-bg: #F9F9F7;
           --color-text: #1C1C1C;
           --color-muted: #5A5A5A;
           --color-accent: #EBE5DF;
           --color-accent-light: #F4F1ED;
       }
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body {
           font-family: var(--font-body);
           background-color: var(--color-bg);
           color: var(--color-text);
           line-height: 1.6;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
           overflow-x: hidden;
       }
       h1, h2, h3, h4, h5, h6 {
           font-family: var(--font-heading);
           font-weight: 400;
           line-height: 1.1;
       }
       /* --- HEADER --- */
       .site-header {
           position: relative;
           width: 100%;
           padding: 1.8rem 5rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
           z-index: 100;
           background-color: var(--color-accent);
           color: #111;
       }
       .logo {
           font-family: var(--font-heading);
           font-size: 2rem;
           text-decoration: none;
           color: inherit;
       }
       .main-navigation ul {
           display: flex;
           list-style: none;
           gap: 2.5rem;
       }
       .main-navigation a {
           text-decoration: none;
           color: inherit;
           font-size: 0.95rem;
           font-weight: 500;
           transition: opacity 0.3s ease;
       }
       .main-navigation a:hover {
           opacity: 0.6;
       }
       /* --- PAGE HERO --- */
       .page-hero {
           padding: 8rem 5rem 6rem;
           background-color: #111;
           color: white;
           text-align: center;
           position: relative;
           overflow: hidden;
       }
       .page-hero::before {
           content: '';
           position: absolute;
           top: 0; left: 0; right: 0; bottom: 0;
           background-image: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2000&auto=format&fit=crop');
           background-size: cover;
           background-position: center;
           opacity: 0.25; /* Very subtle background */
           z-index: 1;
       }
       .page-hero-content {
           position: relative;
           z-index: 2;
           max-width: 900px;
           margin: 0 auto;
       }
       .page-hero h1 {
           font-size: clamp(3rem, 5vw, 4.5rem);
           margin-bottom: 2rem;
       }
       .page-hero p {
           font-size: 1.15rem;
           font-weight: 300;
           line-height: 1.8;
           color: rgba(255, 255, 255, 0.9);
           margin-bottom: 1.5rem;
       }
       section {
           padding: 6rem 5rem;
           max-width: 1400px;
           margin: 0 auto;
       }
       .text-center {
           text-align: center;
           margin-bottom: 4rem;
       }
       .section-title {
           font-size: 3.5rem;
           margin-bottom: 1rem;
       }
       /* --- MISSION QUOTE --- */
       #mission {
           padding-top: 8rem;
           padding-bottom: 6rem;
       }
       .quote-container {
           position: relative;
           max-width: 1000px;
           margin: 0 auto;
           text-align: center;
           padding: 3rem;
       }
       .quote-icon {
           font-family: var(--font-heading);
           font-size: 8rem;
           line-height: 1;
           color: var(--color-accent);
           position: absolute;
           top: -2rem;
           left: 50%;
           transform: translateX(-50%);
           z-index: -1;
           opacity: 0.6;
       }
       .pull-quote {
           font-family: var(--font-heading);
           font-size: 2.8rem;
           font-style: italic;
           line-height: 1.3;
           color: var(--color-text);
       }
       /* --- OUR VALUES --- */
       #values {
           background-color: var(--color-accent-light);
           border-radius: 30px;
           margin-bottom: 6rem;
       }
       .values-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 3rem;
       }
       .value-card {
           background: white;
           padding: 2.5rem;
           border-radius: 20px;
           box-shadow: 0 4px 15px rgba(0,0,0,0.02);
           transition: transform 0.3s ease;
       }
       .value-card:hover {
           transform: translateY(-5px);
       }
       .value-icon {
           font-size: 2.5rem;
           margin-bottom: 1.5rem;
           display: inline-block;
       }
       .value-card h3 {
           font-family: var(--font-body);
           font-size: 1.2rem;
           font-weight: 500;
           margin-bottom: 1rem;
       }
       .value-card p {
           font-size: 0.95rem;
           color: var(--color-muted);
           line-height: 1.6;
       }
       /* --- OUR TEAM --- */
       #team {
           padding-top: 4rem;
       }
       .team-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 4rem;
       }
       .team-member {
           text-align: left;
       }
       .team-photo {
           width: 100%;
           aspect-ratio: 4 / 5;
           object-fit: cover;
           border-radius: 20px;
           margin-bottom: 1.5rem;
           background-color: var(--color-accent);
       }
       .team-member h3 {
           font-size: 1.8rem;
           margin-bottom: 0.2rem;
       }
       .team-role {
           font-family: var(--font-body);
           font-size: 0.9rem;
           font-weight: 500;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           color: var(--color-muted);
           margin-bottom: 1rem;
           display: block;
       }
       .team-member p {
           font-size: 0.95rem;
           color: var(--color-muted);
           line-height: 1.6;
       }
       /* --- ACCREDITATIONS --- */
       #accreditations {
           padding-top: 6rem;
           padding-bottom: 6rem;
           border-top: 1px solid rgba(28, 28, 28, 0.1);
       }
       .acc-grid {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           align-items: center;
           gap: 3rem;
       }
       .acc-badge {
           background-color: white;
           border: 1px solid rgba(28, 28, 28, 0.08);
           border-radius: 12px;
           padding: 1.5rem 2rem;
           font-family: var(--font-body);
           font-weight: 500;
           font-size: 1rem;
           color: var(--color-text);
           box-shadow: 0 4px 10px rgba(0,0,0,0.02);
           text-align: center;
           transition: transform 0.3s ease;
       }
       .acc-badge:hover {
           transform: translateY(-3px);
           box-shadow: 0 6px 15px rgba(0,0,0,0.05);
       }
       /* --- CTA SECTION --- */
       #cta {
           padding-top: 2rem;
           padding-bottom: 6rem;
       }
       .cta-container {
           background-color: var(--color-text);
           color: white;
           border-radius: 24px;
           padding: 6rem 3rem;
           text-align: center;
           max-width: 1200px;
           margin: 0 auto;
       }
       .cta-container h2 {
           font-size: 3.5rem;
           margin-bottom: 1rem;
       }
       .cta-container p {
           font-size: 1.1rem;
           color: rgba(255, 255, 255, 0.8);
           margin-bottom: 2.5rem;
       }
       .btn-cta {
           display: inline-block;
           background-color: var(--color-accent);
           color: #111;
           padding: 1.2rem 3rem;
           border-radius: 50px;
           text-decoration: none;
           font-weight: 500;
           font-size: 1.05rem;
           transition: transform 0.3s ease, background-color 0.3s ease;
       }
       .btn-cta:hover {
           transform: translateY(-3px);
           background-color: white;
       }
       /* --- RESPONSIVE --- */
       @media (max-width: 1024px) {
           .site-header { padding: 2rem; }
           section { padding: 5rem 2rem; }
           .team-grid { gap: 2rem; }
           .page-hero { padding: 6rem 2rem 5rem; }
           .pull-quote { font-size: 2.2rem; }
       }
       @media (max-width: 768px) {
           .main-navigation ul { display: none; }
           .team-grid { grid-template-columns: 1fr; gap: 3rem; }
           .team-photo { max-width: 400px; margin-left: auto; margin-right: auto; }
           .team-member { text-align: center; }
           .page-hero h1 { font-size: 2.8rem; }
           .pull-quote { font-size: 1.8rem; }
           .cta-container { padding: 4rem 1.5rem; }
           .cta-container h2 { font-size: 2.4rem; }
       }

:root {
            --font-heading: 'The Seasons', Georgia, serif; 
            --font-body: 'Aptos', Arial, sans-serif; 
            --color-bg: #F9F9F7;
            --color-text: #1C1C1C;
            --color-muted: #5A5A5A;
            --color-accent: #EBE5DF;
            --color-accent-dark: #D9D3CD;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: var(--font-body);
            background-color: var(--color-bg);
            color: var(--color-text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 400;
            line-height: 1.1;
        }
        /* --- HEADER --- */
        .site-header {
            position: relative;
            width: 100%;
            padding: 1.8rem 5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            background-color: var(--color-accent);
            color: #111;
        }
        .logo {
            font-family: var(--font-heading);
            font-size: 2rem;
            text-decoration: none;
            color: inherit;
        }
        .main-navigation ul {
            display: flex;
            list-style: none;
            gap: 2.5rem;
        }
        .main-navigation a {
            text-decoration: none;
            color: inherit;
            font-size: 0.95rem;
            font-weight: 500;
            transition: opacity 0.3s ease;
        }
        .main-navigation a:hover {
            opacity: 0.6;
        }
        /* --- PAGE HERO --- */
        .page-hero {
            padding: 10rem 5rem 6rem;
            background-color: var(--color-text);
            color: white;
            text-align: center;
        }
        .page-hero h1 {
            font-size: clamp(3rem, 5vw, 4.5rem);
            margin-bottom: 1.5rem;
        }
        .page-hero p {
            font-size: 1.15rem;
            max-width: 800px;
            margin: 0 auto;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.7;
        }
        /* --- SERVICE SECTIONS --- */
        .service-section {
            padding: 8rem 5rem;
            border-bottom: 1px solid rgba(28, 28, 28, 0.1);
        }
        .service-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 6rem;
            align-items: flex-start;
        }
        /* Alternating backgrounds for visual rhythm */
        .service-section:nth-child(even) {
            background-color: #F4F1ED;
        }
        .service-number {
            font-family: var(--font-heading);
            font-size: 2rem;
            font-style: italic;
            color: var(--color-muted);
            display: block;
            margin-bottom: 1rem;
        }
        .service-content h2 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
        }
        .service-content > p {
            font-size: 1.1rem;
            color: var(--color-muted);
            margin-bottom: 2.5rem;
        }
        /* Feature Box (e.g., EV Charging) */
        .feature-box {
            background: white;
            padding: 1.5rem 2rem;
            border-radius: 12px;
            border: 1px solid rgba(28, 28, 28, 0.05);
            margin-bottom: 2.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .feature-box.dark {
            background: var(--color-text);
            color: white;
        }
        .feature-box p {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        /* Tags / Sectors */
        .tag-group {
            margin-top: 2rem;
        }
        .tag-group h4 {
            font-family: var(--font-body);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
            color: var(--color-text);
        }
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        .tag {
            background: white;
            border: 1px solid rgba(28, 28, 28, 0.15);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        /* Service List - THIS FIXES THE ICONS */
        .service-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            margin-top: 2.5rem;
        }
        .service-list li {
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
        }
        .list-icon {
            width: 24px;         /* Fixed width */
            height: 24px;        /* Fixed height */
            min-width: 24px;     /* Prevent shrinking */
            flex-shrink: 0;      /* Prevent flexbox squishing/expanding */
            color: var(--color-text);
            margin-top: 0.2rem;
        }
        .service-list h4 {
            font-family: var(--font-body);
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 0.4rem;
        }
        .service-list p {
            font-size: 0.95rem;
            color: var(--color-muted);
            margin: 0;
        }
        /* --- CTA SECTION --- */
        #cta {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
        .cta-container {
            background-color: var(--color-text);
            color: white;
            border-radius: 24px;
            padding: 6rem 3rem;
            text-align: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        .cta-container h2 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }
        .cta-container p {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2.5rem;
        }
        .btn-cta {
            display: inline-block;
            background-color: var(--color-accent);
            color: #111;
            padding: 1.2rem 3rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.05rem;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }
        .btn-cta:hover {
            transform: translateY(-3px);
            background-color: white;
        }
        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .site-header { padding: 2rem; }
            .service-section { padding: 5rem 2rem; }
            .service-container { 
                grid-template-columns: 1fr; 
                gap: 3rem; 
            }
            .service-content h2 { font-size: 2.8rem; }
            .cta-container { padding: 4rem 2rem; }
            .cta-container h2 { font-size: 2.8rem; }
        }
        @media (max-width: 768px) {
            .main-navigation ul { display: none; }
            .page-hero { padding: 8rem 2rem 4rem; }
            .page-hero h1 { font-size: 2.5rem; }
            .service-list { gap: 1.5rem; margin-top: 1.5rem; }
        }

:root {
           --font-heading: 'The Seasons', Georgia, serif;
           --font-body: 'Aptos', Arial, sans-serif;
           --color-bg: #F9F9F7;
           --color-text: #1C1C1C;
           --color-muted: #5A5A5A;
           --color-border: rgba(28, 28, 28, 0.15);
           --color-input-bg: #FFFFFF;
       }
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body {
           font-family: var(--font-body);
           background-color: var(--color-bg);
           color: var(--color-text);
           line-height: 1.6;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
           overflow-x: hidden;
       }
       h1, h2, h3, h4, h5, h6 {
           font-family: var(--font-heading);
           font-weight: 400;
           line-height: 1.1;
       }
       .site-header {
           position: relative;
           width: 100%;
           padding: 1.8rem 5rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
           z-index: 100;
           background-color: #EBE5DF;
           color: #111;
       }
       .logo {
           font-family: var(--font-heading);
           font-size: 2rem;
           text-decoration: none;
           color: inherit;
       }
       .main-navigation ul {
           display: flex;
           list-style: none;
           gap: 2.5rem;
       }
       .main-navigation a {
           text-decoration: none;
           color: inherit;
           font-size: 0.95rem;
           font-weight: 500;
           transition: opacity 0.3s ease;
       }
       .main-navigation a:hover, .main-navigation .current-menu-item > a {
           opacity: 0.6;
       }
       .page-header {
           padding: 8rem 5rem 4rem;
           text-align: center;
           max-width: 1000px;
           margin: 0 auto;
       }
       .page-header h1 {
           font-size: clamp(3rem, 6vw, 5rem);
           margin-bottom: 1.5rem;
       }
       .page-header p {
           font-size: 1.1rem;
           color: var(--color-muted);
           line-height: 1.7;
           max-width: 800px;
           margin: 0 auto;
       }
       .contact-container {
           display: grid;
           grid-template-columns: 1fr 1.6fr;
           gap: 6rem;
           padding: 0 5rem 8rem;
           max-width: 1400px;
           margin: 0 auto;
       }
       /* --- CONTACT INFO SIDE --- */
       .contact-info {
           display: flex;
           flex-direction: column;
           gap: 3rem;
       }
       .info-block h3 {
           font-family: var(--font-body);
           font-size: 0.95rem;
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.05em;
           margin-bottom: 1rem;
           color: var(--color-muted);
       }
       .info-item {
           display: flex;
           align-items: center;
           gap: 1rem;
           margin-bottom: 1.2rem;
           font-size: 1.05rem;
           font-weight: 500;
       }
       .info-item a {
           color: inherit;
           text-decoration: none;
           transition: opacity 0.3s;
       }
       .info-item a:hover {
           opacity: 0.6;
       }
       .info-icon {
           flex-shrink: 0;
           width: 24px;
           height: 24px;
           color: var(--color-text);
       }
       .info-text {
           font-size: 1.05rem;
           color: var(--color-text);
           line-height: 1.6;
       }
       .info-note {
           background-color: #F4F1ED;
           padding: 1.5rem;
           border-radius: 12px;
           font-size: 0.95rem;
           color: var(--color-muted);
           line-height: 1.6;
           margin-top: -1rem;
       }
       .social-links {
           display: flex;
           gap: 1.5rem;
           margin-top: 0.5rem;
       }
       .social-links a {
           color: var(--color-text);
           transition: transform 0.3s ease;
       }
       .social-links a:hover {
           transform: translateY(-3px);
       }
       /* --- CONTACT FORM SIDE --- */
       .contact-form {
           background-color: white;
           padding: 4rem;
           border-radius: 24px;
           box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
           border: 1px solid rgba(28, 28, 28, 0.05);
       }
       .form-row {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 2rem;
           margin-bottom: 2rem;
       }
       .form-group {
           margin-bottom: 2rem;
       }
       .form-group label {
           display: block;
           font-size: 0.9rem;
           font-weight: 500;
           margin-bottom: 0.6rem;
           color: var(--color-text);
       }
       .form-group label span {
           color: var(--color-muted);
           font-weight: 400;
           font-size: 0.85rem;
       }
       .form-control {
           width: 100%;
           padding: 1rem 1.2rem;
           font-family: inherit;
           font-size: 1rem;
           color: var(--color-text);
           background-color: var(--color-bg);
           border: 1px solid var(--color-border);
           border-radius: 8px;
           transition: border-color 0.3s ease, box-shadow 0.3s ease;
       }
       .form-control::placeholder {
           color: #999;
       }
       .form-control:focus {
           outline: none;
           border-color: var(--color-text);
           box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.05);
       }
       select.form-control {
           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='currentColor' 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;
           padding-right: 2.5rem;
           cursor: pointer;
       }
       textarea.form-control {
           resize: vertical;
           min-height: 150px;
       }
       .checkbox-grid {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 1rem;
           margin-top: 0.5rem;
       }
       .checkbox-label {
           display: flex;
           align-items: flex-start;
           gap: 0.75rem;
           font-size: 0.95rem;
           font-weight: 400 !important;
           cursor: pointer;
           margin-bottom: 0 !important;
       }
       .checkbox-label input[type="checkbox"] {
           appearance: none;
           width: 1.25rem;
           height: 1.25rem;
           border: 1px solid var(--color-border);
           border-radius: 4px;
           background-color: var(--color-bg);
           flex-shrink: 0;
           cursor: pointer;
           position: relative;
           margin-top: 0.15rem;
           transition: background-color 0.2s, border-color 0.2s;
       }
       .checkbox-label input[type="checkbox"]:checked {
           background-color: var(--color-text);
           border-color: var(--color-text);
       }
       .checkbox-label input[type="checkbox"]:checked::after {
           content: "";
           position: absolute;
           left: 5px;
           top: 2px;
           width: 5px;
           height: 10px;
           border: solid white;
           border-width: 0 2px 2px 0;
           transform: rotate(45deg);
       }
       .btn-submit {
           display: inline-block;
           background-color: var(--color-text);
           color: white;
           padding: 1.2rem 3rem;
           border: none;
           border-radius: 50px;
           font-family: inherit;
           font-weight: 500;
           font-size: 1.05rem;
           cursor: pointer;
           transition: background-color 0.3s ease, transform 0.2s ease;
           width: 100%;
           margin-top: 1rem;
       }
       .btn-submit:hover {
           background-color: #333;
           transform: translateY(-2px);
       }
       .form-note {
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 0.5rem;
           margin-top: 1.5rem;
           font-size: 0.9rem;
           color: var(--color-muted);
           text-align: center;
       }
       .form-alert {
           padding: 1rem 1.2rem;
           border-radius: 10px;
           margin-bottom: 1.5rem;
           font-size: 0.95rem;
           line-height: 1.5;
       }
       .form-alert--success {
           background-color: #edf7ef;
           border: 1px solid #b8dfc0;
           color: #1f5f2a;
       }
       .form-alert--error {
           background-color: #fff1f0;
           border: 1px solid #f0b8b2;
           color: #8a241b;
       }
       /* --- RESPONSIVE --- */
       @media (max-width: 1100px) {
           .contact-container {
               gap: 4rem;
           }
           .contact-form {
               padding: 3rem;
           }
       }
       @media (max-width: 900px) {
           .site-header { padding: 2rem; }
           .page-header { padding: 6rem 2rem 3rem; }
           .contact-container {
               grid-template-columns: 1fr;
               padding: 0 2rem 6rem;
               gap: 4rem;
           }
           .contact-info {
               order: 2; /* Move info below form on mobile */
           }
           .contact-form {
               order: 1;
           }
       }
       @media (max-width: 768px) {
           .main-navigation ul { display: none; }
           .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
           .checkbox-grid { grid-template-columns: 1fr; }
           .contact-form { padding: 2rem 1.5rem; }
       }

:root {
           --font-heading: 'The Seasons', Georgia, serif;
           --font-body: 'Aptos', Arial, sans-serif;
           --color-bg: #F9F9F7;
           --color-text: #1C1C1C;
           --color-muted: #5A5A5A;
           --color-border: rgba(28, 28, 28, 0.15);
           --color-card-bg: #FFFFFF;
           --color-accent-bg: #EBE5DF;
           --color-subtle-bg: #F4F1ED;
       }
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body {
           font-family: var(--font-body);
           background-color: var(--color-bg);
           color: var(--color-text);
           line-height: 1.6;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
           overflow-x: hidden;
       }
       h1, h2, h3, h4, h5, h6 {
           font-family: var(--font-heading);
           font-weight: 400;
           line-height: 1.1;
       }
       .site-header {
           position: relative;
           width: 100%;
           padding: 1.8rem 5rem;
           display: flex;
           justify-content: space-between;
           align-items: center;
           z-index: 100;
           background-color: var(--color-accent-bg);
           color: #111;
       }
       .logo {
           font-family: var(--font-heading);
           font-size: 2rem;
           text-decoration: none;
           color: inherit;
       }
       .main-navigation ul {
           display: flex;
           list-style: none;
           gap: 2.5rem;
       }
       .main-navigation a {
           text-decoration: none;
           color: inherit;
           font-size: 0.95rem;
           font-weight: 500;
           transition: opacity 0.3s ease;
       }
       .main-navigation a:hover, .main-navigation .current-menu-item > a {
           opacity: 0.6;
       }
       .page-header {
           padding: 8rem 5rem 4rem;
           text-align: center;
           max-width: 1000px;
           margin: 0 auto;
       }
       .page-header h1 {
           font-size: clamp(3.5rem, 6vw, 5.5rem);
           margin-bottom: 1.5rem;
       }
       .page-header p {
           font-size: 1.1rem;
           color: var(--color-muted);
           line-height: 1.7;
           max-width: 800px;
           margin: 0 auto;
       }
       .benefits-section {
           padding: 2rem 5rem 6rem;
           max-width: 1400px;
           margin: 0 auto;
       }
       .benefits-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 2rem;
       }
       .benefit-card {
           background-color: var(--color-card-bg);
           padding: 3rem 2rem;
           border-radius: 16px;
           border: 1px solid rgba(28, 28, 28, 0.05);
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           text-align: center;
       }
       .benefit-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
       }
       .benefit-icon {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 64px;
           height: 64px;
           background-color: var(--color-subtle-bg);
           border-radius: 50%;
           margin-bottom: 1.5rem;
           color: var(--color-text);
       }
       .benefit-icon svg {
           width: 28px;
           height: 28px;
       }
       .benefit-card h3 {
           font-family: var(--font-body);
           font-size: 1.1rem;
           font-weight: 500;
           margin-bottom: 0.75rem;
           color: var(--color-text);
       }
       .openings-section {
           padding: 6rem 5rem;
           background-color: var(--color-card-bg);
           border-top: 1px solid var(--color-border);
       }
       .openings-container {
           max-width: 1000px;
           margin: 0 auto;
       }
       .section-title {
           font-size: 3.5rem;
           text-align: center;
           margin-bottom: 4rem;
       }
       .job-card {
           background-color: var(--color-bg);
           border: 1px solid var(--color-border);
           border-radius: 16px;
           padding: 2.5rem;
           margin-bottom: 1.5rem;
           display: flex;
           flex-direction: column;
           gap: 1.5rem;
           transition: border-color 0.3s ease, box-shadow 0.3s ease;
       }
       .job-card:hover {
           border-color: var(--color-text);
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
       }
       .job-header {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           flex-wrap: wrap;
           gap: 1rem;
       }
       .job-title h3 {
           font-family: var(--font-heading);
           font-size: 2rem;
           margin-bottom: 0.5rem;
       }
       .job-tags {
           display: flex;
           gap: 0.75rem;
           flex-wrap: wrap;
       }
       .job-tag {
           display: inline-flex;
           align-items: center;
           gap: 0.4rem;
           background-color: var(--color-card-bg);
           border: 1px solid rgba(28, 28, 28, 0.1);
           padding: 0.4rem 0.8rem;
           border-radius: 50px;
           font-size: 0.85rem;
           font-weight: 500;
           color: var(--color-muted);
       }
       .job-tag svg {
           width: 14px;
           height: 14px;
       }
       .job-description {
           font-size: 1.05rem;
           color: var(--color-muted);
           line-height: 1.6;
       }
       .btn-apply {
           display: inline-block;
           align-self: flex-start;
           background-color: transparent;
           color: var(--color-text);
           padding: 0.8rem 2rem;
           border: 1px solid var(--color-text);
           border-radius: 50px;
           text-decoration: none;
           font-weight: 500;
           font-size: 0.95rem;
           transition: background-color 0.3s ease, color 0.3s ease;
       }
       .btn-apply:hover {
           background-color: var(--color-text);
           color: white;
       }
       .cta-section {
           padding: 6rem 5rem;
       }
       .cta-container {
           background-color: var(--color-text);
           color: white;
           border-radius: 24px;
           padding: 6rem 3rem;
           text-align: center;
           max-width: 1000px;
           margin: 0 auto;
       }
       .cta-container h2 {
           font-size: 3.5rem;
           margin-bottom: 1.5rem;
       }
       .cta-container p {
           font-size: 1.1rem;
           color: rgba(255, 255, 255, 0.8);
           margin-bottom: 2rem;
           max-width: 600px;
           margin-left: auto;
           margin-right: auto;
       }
       .cta-email {
           display: inline-flex;
           align-items: center;
           gap: 0.75rem;
           background-color: rgba(255, 255, 255, 0.1);
           padding: 1rem 2rem;
           border-radius: 50px;
           color: white;
           text-decoration: none;
           font-weight: 500;
           border: 1px solid rgba(255, 255, 255, 0.2);
           transition: background-color 0.3s ease, transform 0.2s ease;
       }
       .cta-email:hover {
           background-color: rgba(255, 255, 255, 0.2);
           transform: translateY(-2px);
       }
       @media (max-width: 1024px) {
           .benefits-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }
       @media (max-width: 900px) {
           .site-header { padding: 2rem; }
           .page-header { padding: 6rem 2rem 3rem; }
           .benefits-section { padding: 2rem 2rem 5rem; }
           .openings-section { padding: 5rem 2rem; }
           .cta-section { padding: 4rem 2rem; }
           .cta-container { padding: 4rem 2rem; }
       }
       @media (max-width: 768px) {
           .main-navigation ul { display: none; }
           .benefits-grid { grid-template-columns: 1fr; }
           .job-header { flex-direction: column; }
           .job-card { padding: 1.8rem; }
           .section-title { font-size: 2.8rem; margin-bottom: 3rem; }
           .cta-container h2 { font-size: 2.5rem; }
           .cta-email { padding: 1rem 1.5rem; font-size: 0.9rem; flex-direction: column; text-align: center; }
       }

/* WordPress header, menu, and page mapping adjustments */
.admin-bar .site-header { top: 0; }
.site-header { gap: 2rem; }
.site-header .site-branding {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.site-header .logo { white-space: nowrap; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { display: block; max-height: 58px; width: auto; }
.site-header .brand-name,
.site-header .brand-name:visited {
  color: #000;
  font-family: "Aptos", Arial, sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header .brand-name:hover,
.site-header .brand-name:focus {
  color: #000;
  opacity: 0.72;
  text-decoration: none;
}
.main-navigation ul { margin: 0; padding: 0; }
.main-navigation li { position: relative; }
.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 220px;
  display: block;
  padding: 0.8rem 0;
  background: #F4F1ED;
  border: 1px solid rgba(28, 28, 28, 0.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.main-navigation ul.sub-menu { display: block; }
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-navigation .sub-menu a { display: block; padding: 0.55rem 1rem; }
.main-navigation .menu-item-has-children > a::after { content: "⌄"; margin-left: 0.35rem; }
.menu-toggle { display: none; border: 0; background: transparent; font: inherit; }
.menu-toggle span:last-child,
.menu-toggle span:last-child::before,
.menu-toggle span:last-child::after { display: block; width: 25px; height: 2px; background: #111; content: ""; }
.menu-toggle span:last-child { position: relative; }
.menu-toggle span:last-child::before { position: absolute; top: -7px; left: 0; }
.menu-toggle span:last-child::after { position: absolute; top: 7px; left: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.site-main { min-height: 70vh; }
.site-footer { padding: 2rem 5rem; background: #EBE5DF; color: #111; text-align: center; font-size: 0.9rem; }
.site-footer ul { display: flex; justify-content: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.ee-doc-page > main { display: contents; }
.ee-about-template .page-hero::before { display: block; }
.ee-services-template .page-hero::before { display: none; }
.ee-contact-template .page-header,
.ee-careers-template .page-header { background: transparent; color: var(--color-text); }
.software-wordmark { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--color-text); }
.content-wrap { max-width: 980px; margin: 0 auto; padding: 6rem 5rem; }
.content-wrap h1 { font-size: clamp(3rem, 5vw, 4.5rem); margin-bottom: 1.5rem; }
.content-wrap article { margin-bottom: 3rem; }
.content-wrap a { color: inherit; }

/* Blog page from the supplied design, powered by the native WordPress Loop */
.blog-page-hero {
  min-height: 520px;
  width: 100%;
  max-width: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111;
  padding: 6rem 2rem;
  margin: 0;
  overflow: hidden;
}

.blog-page-hero .blog-hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.7;
}

.blog-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.blog-page-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-page-hero h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  margin: 0 auto;
  font-weight: 400;
}

.blog-page-hero p.subheadline {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  max-width: 800px;
  color: rgba(255, 255, 255, 0.9);
}

#blog-feed {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

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

.blog-card {
  background: white;
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

.blog-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #EBE5DF;
}

.blog-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-img-wrapper img {
  transform: scale(1.05);
}

.blog-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #1C1C1C;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 3rem);
  text-align: center;
  background: linear-gradient(135deg, #EBE5DF, #F9F9F7);
}

.blog-content {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: 1rem;
  font-weight: 500;
}

.blog-category {
  color: #111;
  font-weight: 600;
}

.blog-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.blog-card:hover h3 {
  color: #555;
}

.blog-card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin-top: auto;
}

.read-more span {
  transition: transform 0.3s ease;
}

.blog-card:hover .read-more span {
  transform: translateX(4px);
}

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 50px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination .page-link:hover {
  background-color: rgba(28, 28, 28, 0.05);
}

.pagination .page-link.current {
  background-color: var(--color-text);
  color: white;
}

.blog-empty {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.blog-empty h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .site-header { padding: 1.2rem 1.5rem; }
  .site-header .site-branding { gap: 0.7rem; }
  .custom-logo { max-height: 48px; }
  .site-header .brand-name { font-size: 1.05rem; letter-spacing: 0.03em; }
  .menu-toggle { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .main-navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 1rem 1.5rem 1.5rem; background: #EBE5DF; border-top: 1px solid rgba(28,28,28,0.08); }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { display: block; }
  .main-navigation a { display: block; padding: 0.55rem 0; }
  .main-navigation .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 1rem; }
  section, .service-section, .page-hero, .page-header, .benefits-section, .openings-section, .contact-container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero { min-height: 78vh; height: auto; padding: 6rem 1.5rem; }
  .process-grid, .services-grid, .trust-grid, .sectors-grid, .software-grid, .values-grid, .team-grid, .benefits-grid, .blog-grid { grid-template-columns: 1fr; }
  .service-container, .contact-container { grid-template-columns: 1fr; gap: 3rem; }
  .contact-form { padding: 2rem; }
  .blog-page-hero { min-height: 420px; padding: 5rem 1.5rem; }
  .blog-page-hero h1 { font-size: 3rem; }
  .blog-content { padding: 2rem 1.5rem; }
}

/* Final blog page lockup: keep this after imported page styles. */
:root {
  --font-heading: "Aptos Serif", Georgia, serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

.ee-blog-template {
  background: #F9F9F7;
}

.ee-blog-template .blog-page-hero {
  width: 100%;
  max-width: none;
  min-height: 50vh;
  height: auto;
  margin: 0;
  padding: 8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #111;
}

.ee-blog-template .blog-page-hero .blog-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.6;
  z-index: 1;
}

.ee-blog-template .blog-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.ee-blog-template .blog-page-hero .hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ee-blog-template .blog-page-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
  color: #fff;
}

.ee-blog-template .blog-page-hero p.subheadline {
  max-width: 900px;
  margin: 1.6rem auto 0;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-body);
  font-size: 1.13rem;
  font-weight: 400;
  line-height: 1.65;
}

.ee-blog-template #blog-feed {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 6rem 5rem;
  min-height: 60vh;
}

.ee-blog-template .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.ee-blog-template .blog-card {
  min-width: 0;
  border-radius: 16px;
  height: 100%;
}

.ee-blog-template .blog-img-wrapper {
  aspect-ratio: 16 / 10;
  background: #EBE5DF;
}

.ee-blog-template .blog-placeholder {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  background: #EBE5DF;
}

.ee-blog-template #cta {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 5rem 6rem;
}

@media (max-width: 1024px) {
  .ee-blog-template .blog-page-hero {
    min-height: 50vh;
    padding: 8rem 2rem;
  }

  .ee-blog-template #blog-feed,
  .ee-blog-template #cta {
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .ee-blog-template .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .ee-blog-template .blog-page-hero {
    min-height: 40vh;
    padding: 6rem 1.5rem;
  }

  .ee-blog-template .blog-page-hero h1 {
    font-size: 2.8rem;
  }

  .ee-blog-template .blog-page-hero p.subheadline {
    font-size: 1rem;
  }

  .ee-blog-template #blog-feed,
  .ee-blog-template #cta {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .ee-blog-template .blog-grid {
    grid-template-columns: 1fr;
  }
}