/*
Theme Name:        EAS Contracting
Theme URI:         https://www.alhazmi-esa.com
Author:            مؤسسة إبراهيم علي شعبي الحازمي للتجارة والمقاولات
Author URI:        https://www.alhazmi-esa.com
Description:       قالب احترافي لمؤسسة الحازمي للتجارة والمقاولات. يدعم RTL والعربية بالكامل.
Version:           1.0.0
Requires at least: 5.9
Tested up to:      6.5
Requires PHP:      7.4
License:           Proprietary
Text Domain:       eas-theme
Tags:              rtl-language, arabic, construction, corporate, custom-logo, custom-menu, threaded-comments
*/

/* ============================================================
   DESIGN PHILOSOPHY: Corporate Precision Architecture
   Industrial Minimalism with Metallic Materiality
   ============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES — CSS Variables
   ============================================================ */
:root {
    /* Brand Colors */
    --emerald:       #00A86B;
    --emerald-hover: #008F5B;
    --emerald-light: rgba(0,168,107,.12);
    --emerald-ring:  rgba(0,168,107,.4);

    --gold:          #C9A84C;
    --gold-light:    rgba(201,168,76,.15);

    /* Structural Grays */
    --black-steel:   #1A1D23;
    --charcoal:      #2B303A;
    --graphite:      #3D4451;
    --steel:         #7C8996;
    --silver:        #A8B2BC;
    --mist:          #D4D9DF;
    --ghost:         #EEF0F2;
    --white:         #FFFFFF;

    /* Semantic */
    --bg-primary:    var(--white);
    --bg-dark:       var(--black-steel);
    --text-primary:  var(--charcoal);
    --text-body:     #4A5568;
    --text-muted:    var(--steel);
    --border:        var(--mist);
    --border-strong: #B0B8C4;

    /* Typography */
    --font-heading:  'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    --font-body:     'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    --font-mono:     'IBM Plex Mono', monospace;

    /* Spacing */
    --section-pad:   5rem;
    --container-max: 1280px;
    --container-pad: 1.5rem;

    /* Effects */
    --shadow-none:   none;
    --radius-none:   0px;
    --transition:    all 0.2s ease;
    --border-1:      1px solid var(--border);
    --border-2:      2px solid;

    /* Header */
    --header-h:      70px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    direction:   rtl;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:         var(--font-body);
    font-size:           1rem;
    line-height:         1.7;
    color:               var(--text-body);
    background-color:    var(--bg-primary);
    text-align:          right;
    -webkit-font-smoothing: antialiased;
    overflow-x:          hidden;
}

img {
    max-width:  100%;
    height:     auto;
    display:    block;
}

a {
    color:           var(--emerald);
    text-decoration: none;
    transition:      var(--transition);
}
a:hover { color: var(--emerald-hover); }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: 900;
    line-height: 1.25;
    color:       var(--text-primary);
}

ul { list-style: none; }

/* ============================================================
   3. ACCESSIBILITY — Focus Rings
   ============================================================ */
:focus-visible {
    outline:        3px solid var(--emerald);
    outline-offset: 3px;
}

.screen-reader-text {
    position: absolute !important;
    width:    1px;
    height:   1px;
    padding:  0;
    margin:   -1px;
    overflow: hidden;
    clip:     rect(0,0,0,0);
    border:   0;
}

/* ============================================================
   4. LAYOUT HELPERS
   ============================================================ */
.eas-container {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-pad);
    width:     100%;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.eas-btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .75rem 1.75rem;
    background:      var(--emerald);
    color:           var(--white) !important;
    font-family:     var(--font-heading);
    font-weight:     700;
    font-size:       .95rem;
    border:          2px solid var(--emerald);
    border-radius:   0;
    cursor:          pointer;
    transition:      var(--transition);
    text-decoration: none;
}
.eas-btn-primary:hover {
    background: var(--emerald-hover);
    border-color: var(--emerald-hover);
    color: var(--white) !important;
}

.eas-btn-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .75rem 1.75rem;
    background:      transparent;
    color:           var(--white) !important;
    font-family:     var(--font-heading);
    font-weight:     700;
    font-size:       .95rem;
    border:          2px solid rgba(255,255,255,.6);
    border-radius:   0;
    cursor:          pointer;
    transition:      var(--transition);
    text-decoration: none;
}
.eas-btn-outline:hover {
    border-color: var(--white);
    background: rgba(255,255,255,.1);
    color: var(--white) !important;
}

.eas-btn-dark {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    padding:         .75rem 1.75rem;
    background:      var(--charcoal);
    color:           var(--white) !important;
    font-family:     var(--font-heading);
    font-weight:     700;
    font-size:       .95rem;
    border:          2px solid var(--charcoal);
    border-radius:   0;
    cursor:          pointer;
    transition:      var(--transition);
    text-decoration: none;
}
.eas-btn-dark:hover {
    background: var(--black-steel);
    border-color: var(--black-steel);
}

/* ============================================================
   6. BADGES
   ============================================================ */
.eas-gold-badge {
    display:     inline-flex;
    align-items: center;
    gap:         .4rem;
    padding:     .4rem .9rem;
    background:  var(--gold-light);
    border:      1px solid var(--gold);
    color:       var(--gold);
    font-family: var(--font-mono);
    font-size:   .8rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hero-badge-emerald {
    display:     inline-flex;
    align-items: center;
    gap:         .4rem;
    padding:     .4rem .9rem;
    background:  var(--emerald-light);
    border:      1px solid var(--emerald);
    color:       var(--emerald);
    font-family: var(--font-mono);
    font-size:   .8rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.footer-badge {
    display:     inline-block;
    padding:     .3rem .75rem;
    font-size:   .75rem;
    font-family: var(--font-mono);
    font-weight: 600;
}
.footer-badge.emerald {
    background:   var(--emerald-light);
    border:       1px solid var(--emerald);
    color:        var(--emerald);
}
.footer-badge.gold {
    background:   var(--gold-light);
    border:       1px solid var(--gold);
    color:        var(--gold);
}

/* ============================================================
   7. SECTION HELPERS
   ============================================================ */
.eas-emerald-bar {
    width:         3rem;
    height:        3px;
    background:    var(--emerald);
    margin-bottom: .75rem;
}

.section-header-center .eas-emerald-bar {
    margin-left:  auto;
    margin-right: auto;
}

.eas-section-title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size:   clamp(1.75rem, 4vw, 2.5rem);
    color:       var(--text-primary);
    margin-bottom: .75rem;
}

.eas-section-subtitle {
    font-family: var(--font-body);
    color:       var(--text-muted);
    font-size:   1rem;
    max-width:   600px;
    margin:      0 auto;
    line-height: 1.7;
}

.section-header-center {
    text-align:    center;
    margin-bottom: 3.5rem;
}

/* ============================================================
   8. CARDS
   ============================================================ */
.eas-card {
    background:      var(--white);
    border:          1px solid var(--border);
    border-radius:   0;
    box-shadow:      none;
    transition:      var(--transition);
    border-bottom:   3px solid transparent;
    overflow:        hidden;
}
.eas-card:hover {
    border-bottom-color: var(--emerald);
}

/* ============================================================
   9. HEADER
   ============================================================ */
#masthead {
    position:   fixed;
    top:        0;
    right:      0;
    left:       0;
    height:     var(--header-h);
    z-index:    999;
    background: rgba(26,29,35,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background .3s ease, border-bottom-color .3s ease;
}
#masthead.scrolled {
    background: rgba(26,29,35,.98);
    border-bottom-color: rgba(0,168,107,.3);
}

.site-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--header-h);
    gap:             1.5rem;
}

/* Logo */
.site-logo {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo img {
    width:  48px;
    height: 48px;
    object-fit: contain;
}
.logo-name {
    display:     block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size:   1rem;
    color:       var(--white);
    line-height: 1.2;
}
.logo-tagline {
    display:      block;
    font-family:  var(--font-mono);
    font-size:    .65rem;
    color:        var(--emerald);
    letter-spacing: .05em;
    line-height:  1.2;
}

/* Desktop Nav */
#primary-navigation {
    display:     flex;
    align-items: center;
    gap:         .25rem;
}
#primary-navigation ul {
    display:     flex;
    align-items: center;
    gap:         .25rem;
    list-style:  none;
}
#primary-navigation ul li a {
    display:     block;
    padding:     .5rem .85rem;
    color:       rgba(255,255,255,.85);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size:   .9rem;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition:  var(--transition);
}
#primary-navigation ul li a:hover,
#primary-navigation ul li.current-menu-item > a {
    color:        var(--white);
    border-bottom-color: var(--emerald);
}

.header-cta {
    margin-right: .75rem;
    font-size:    .85rem;
    padding:      .55rem 1.25rem;
}

/* Mobile Toggle */
.menu-toggle {
    display:    none;
    background: none;
    border:     1px solid rgba(255,255,255,.2);
    color:      var(--white);
    padding:    .5rem .75rem;
    cursor:     pointer;
    font-size:  1.1rem;
    transition: var(--transition);
}
.menu-toggle:hover {
    border-color: var(--emerald);
    color:        var(--emerald);
}

/* Mobile Menu */
#mobile-menu {
    display:    none;
    padding:    1rem 1.5rem;
    background: rgba(26,29,35,.98);
    border-top: 1px solid rgba(255,255,255,.08);
}
#mobile-menu.is-open { display: block; }
#mobile-nav-menu { list-style: none; }
#mobile-nav-menu li a {
    display:     block;
    padding:     .75rem 0;
    color:       rgba(255,255,255,.85);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size:   1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
}
#mobile-nav-menu li a:hover { color: var(--emerald); }
.mobile-cta {
    display:    flex;
    width:      100%;
    margin-top: 1rem;
    justify-content: center;
}

/* ============================================================
   10. HERO SECTION
   ============================================================ */
.hero-section {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    overflow:    hidden;
    background:  var(--black-steel);
    margin-top:  0;
}

.hero-bg {
    position:   absolute;
    inset:      0;
    background: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=1920&q=80') center/cover no-repeat;
    opacity:    .25;
    z-index:    0;
}

.hero-overlay {
    position:    absolute;
    inset:       0;
    background:  linear-gradient(
        to bottom,
        rgba(26,29,35,.6) 0%,
        rgba(26,29,35,.3) 50%,
        rgba(26,29,35,.85) 100%
    );
    z-index: 1;
}

.hero-bottom-line {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     3px;
    background: var(--emerald);
    z-index:    3;
}

.hero-section .eas-container { position: relative; z-index: 2; padding-top: var(--header-h); }

.hero-content {
    max-width:   700px;
    padding:     var(--section-pad) 0;
}

.hero-badges {
    display:    flex;
    gap:        .75rem;
    flex-wrap:  wrap;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     clamp(2rem, 5vw, 3.5rem);
    color:         var(--white);
    line-height:   1.15;
    margin-bottom: 1.25rem;
}
.hero-title .accent { color: var(--emerald); }

.hero-desc {
    font-family:   var(--font-body);
    color:         rgba(255,255,255,.8);
    font-size:     1.05rem;
    max-width:     600px;
    margin-bottom: 2rem;
    line-height:   1.8;
}

.hero-ctas {
    display:    flex;
    gap:        1rem;
    flex-wrap:  wrap;
    align-items: center;
}

.hero-scroll-indicator {
    position:  absolute;
    bottom:    2.5rem;
    left:      50%;
    transform: translateX(-50%);
    z-index:   2;
    opacity:   .5;
}
.hero-scroll-line {
    width:     1px;
    height:    48px;
    background: var(--white);
    margin:    0 auto;
    animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { opacity:.4; transform: scaleY(1); }
    50%      { opacity:1;  transform: scaleY(.6); }
}

/* ============================================================
   11. KPI SECTION
   ============================================================ */
.kpi-section {
    background:  var(--charcoal);
    padding:     2.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.kpi-grid {
    display:        grid;
    grid-template-columns: repeat(4, 1fr);
    gap:            0;
}

.kpi-item {
    text-align:   center;
    padding:      2rem 1rem;
    border-right: 1px solid rgba(255,255,255,.08);
    transition:   var(--transition);
}
.kpi-item:first-child { border-right: none; }
.kpi-item:hover { background: rgba(255,255,255,.03); }

.kpi-value {
    font-family:  var(--font-heading);
    font-weight:  900;
    font-size:    clamp(2rem, 4vw, 2.75rem);
    color:        var(--emerald);
    display:      block;
    margin-bottom: .25rem;
}

.kpi-label {
    font-family:  var(--font-body);
    color:        rgba(255,255,255,.65);
    font-size:    .9rem;
}

/* ============================================================
   12. SERVICES SECTION
   ============================================================ */
.services-section {
    padding: var(--section-pad) 0;
    background: var(--ghost);
}

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

.service-card { display: flex; flex-direction: column; }

.service-card-image {
    position:     relative;
    height:       220px;
    overflow:     hidden;
}
.service-card-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.service-card:hover .service-card-image img {
    transform: scale(1.05);
}
.service-card-image-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(26,29,35,.7) 0%, transparent 60%);
}
.service-card-icon {
    position:  absolute;
    bottom:    1rem;
    right:     1rem;
    font-size: 1.75rem;
}

.service-card-body {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.service-card-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     1.15rem;
    color:         var(--text-primary);
    margin-bottom: .5rem;
}
.service-card-desc {
    font-family:   var(--font-body);
    color:         var(--text-muted);
    font-size:     .9rem;
    line-height:   1.65;
    flex:          1;
    margin-bottom: 1.25rem;
}
.service-card-link {
    font-family:  var(--font-heading);
    font-weight:  700;
    color:        var(--emerald);
    font-size:    .9rem;
    margin-top:   auto;
}
.service-card-link:hover { color: var(--emerald-hover); }

/* ============================================================
   13. CLIENTS SECTION
   ============================================================ */
.clients-section {
    padding:      var(--section-pad) 0;
    background:   var(--white);
    border-top:   1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.clients-grid {
    display:     flex;
    flex-wrap:   wrap;
    gap:         1.25rem;
    justify-content: center;
}

.client-card {
    padding:     1.25rem 1.75rem;
    border:      1px solid var(--border);
    background:  var(--ghost);
    transition:  var(--transition);
    min-width:   150px;
    text-align:  center;
}
.client-card:hover {
    border-color: var(--emerald);
    background:   var(--emerald-light);
}
.client-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size:   .95rem;
    color:       var(--text-primary);
}

/* ============================================================
   14. WHY SECTION
   ============================================================ */
.why-section {
    padding:    var(--section-pad) 0;
    background: var(--ghost);
}

.why-grid {
    display:             grid;
    grid-template-columns: 1fr 1fr;
    gap:                 4rem;
    align-items:         start;
}

.why-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     clamp(1.5rem, 3vw, 2.25rem);
    color:         var(--text-primary);
    margin-bottom: 1rem;
}

.why-desc {
    font-family:   var(--font-body);
    color:         var(--text-muted);
    font-size:     .95rem;
    line-height:   1.8;
    margin-bottom: 1.75rem;
}

.why-points {
    display:        flex;
    flex-direction: column;
    gap:            .875rem;
}

.why-point {
    display:     flex;
    align-items: flex-start;
    gap:         .75rem;
}
.why-point-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    background:      var(--emerald-light);
    border:          1px solid var(--emerald);
    color:           var(--emerald);
    font-size:       .85rem;
    flex-shrink:     0;
}
.why-point-text {
    font-family: var(--font-body);
    color:       var(--text-body);
    font-size:   .95rem;
    line-height: 1.6;
    padding-top: .25rem;
}

.why-stats {
    display:             grid;
    grid-template-columns: 1fr 1fr;
    gap:                 0;
    border:              1px solid var(--border);
}
.why-stat {
    padding:     2rem 1.5rem;
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background:  var(--white);
    transition:  var(--transition);
}
.why-stat:hover { background: var(--emerald-light); }
.why-stat-value {
    font-family:  var(--font-mono);
    font-weight:  700;
    font-size:    1.25rem;
    color:        var(--charcoal);
    margin-bottom: .35rem;
    word-break:   break-all;
}
.why-stat-label {
    font-family: var(--font-body);
    font-size:   .8rem;
    color:       var(--text-muted);
}

/* ============================================================
   15. CTA SECTION
   ============================================================ */
.cta-section {
    padding:    var(--section-pad) 0;
    background: var(--charcoal);
    text-align: center;
    border-top: 3px solid var(--emerald);
}

.cta-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     clamp(1.75rem, 4vw, 2.5rem);
    color:         var(--white);
    margin-bottom: 1rem;
}

.cta-desc {
    font-family:   var(--font-body);
    color:         rgba(255,255,255,.75);
    font-size:     1rem;
    max-width:     550px;
    margin:        0 auto 2.5rem;
    line-height:   1.75;
}

.cta-btns {
    display:     flex;
    gap:         1.25rem;
    justify-content: center;
    flex-wrap:   wrap;
}

/* ============================================================
   16. FOOTER
   ============================================================ */
footer#colophon {
    background:  var(--black-steel);
    border-top:  3px solid var(--emerald);
    color:       rgba(255,255,255,.8);
    font-family: var(--font-body);
}

.footer-main {
    padding: 4rem var(--container-pad);
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer-grid {
    display:             grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap:                 3rem;
}

.footer-logo {
    height:        48px;
    width:         auto;
    margin-bottom: 1.25rem;
}

.footer-company-name {
    font-family:   var(--font-heading);
    font-weight:   700;
    font-size:     .9rem;
    color:         var(--white);
    margin-bottom: .75rem;
    line-height:   1.5;
}

.footer-company-desc {
    font-size:   .85rem;
    color:       rgba(255,255,255,.55);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.footer-badges { display: flex; gap: .5rem; flex-wrap: wrap; }

.footer-widget-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     .9rem;
    color:         var(--white);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a {
    font-size:  .875rem;
    color:      rgba(255,255,255,.55);
    text-decoration: none;
    transition: var(--transition);
}
.footer-links a:hover { color: var(--emerald); }

.footer-contact-item {
    display:       flex;
    align-items:   flex-start;
    gap:           .75rem;
    margin-bottom: .75rem;
    font-size:     .875rem;
    color:         rgba(255,255,255,.55);
    text-decoration: none;
    transition:    var(--transition);
}
.footer-contact-item:hover { color: var(--emerald); }
.footer-contact-icon {
    width:         28px;
    height:        28px;
    background:    rgba(0,168,107,.15);
    border:        1px solid rgba(0,168,107,.3);
    color:         var(--emerald);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    font-size:     .8rem;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding:    1.25rem var(--container-pad);
    max-width:  var(--container-max);
    margin:     0 auto;
}
.footer-bottom-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1rem;
}
.footer-copyright {
    font-size: .8rem;
    color:     rgba(255,255,255,.4);
}
.footer-cr {
    font-family: var(--font-mono);
    font-size:   .75rem;
    color:       rgba(255,255,255,.35);
}

/* Scroll to Top */
.scroll-top {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      rgba(0,168,107,.15);
    border:          1px solid rgba(0,168,107,.4);
    color:           var(--emerald);
    font-size:       .85rem;
    cursor:          pointer;
    transition:      var(--transition);
    opacity:         0;
    pointer-events:  none;
}
.scroll-top.visible {
    opacity:        1;
    pointer-events: auto;
}
.scroll-top:hover {
    background: var(--emerald);
    color:      var(--white);
}

/* ============================================================
   17. BLOG / INDEX
   ============================================================ */
.posts-grid {
    display:             grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                 1.75rem;
}
.post-card { display: flex; flex-direction: column; }
.post-card-thumb {
    display:     block;
    height:      220px;
    overflow:    hidden;
}
.post-card-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.post-card-body {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.post-card-cat {
    display:     inline-block;
    padding:     .25rem .6rem;
    background:  var(--emerald-light);
    color:       var(--emerald);
    font-family: var(--font-mono);
    font-size:   .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: .75rem;
}
.post-card-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     1.1rem;
    margin-bottom: .65rem;
}
.post-card-title a { color: var(--text-primary); }
.post-card-title a:hover { color: var(--emerald); }
.post-card-excerpt {
    font-size:   .9rem;
    color:       var(--text-muted);
    line-height: 1.65;
    flex:        1;
    margin-bottom: 1rem;
}
.post-card-meta {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         .75rem;
    font-size:   .8rem;
    color:       var(--text-muted);
    border-top:  1px solid var(--border);
    padding-top: .75rem;
}
.post-card-more { color: var(--emerald); font-weight: 700; }
.post-card-more:hover { color: var(--emerald-hover); }

/* Pagination */
.pagination {
    display:         flex;
    justify-content: center;
    gap:             .5rem;
    flex-wrap:       wrap;
}
.page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 .75rem;
    border:          1px solid var(--border);
    font-family:     var(--font-heading);
    font-size:       .9rem;
    color:           var(--text-primary);
}
.page-numbers.current,
.page-numbers:hover {
    background:   var(--emerald);
    border-color: var(--emerald);
    color:        var(--white);
}

/* ============================================================
   18. CONTACT PAGE
   ============================================================ */
.contact-grid {
    display:             grid;
    grid-template-columns: 1fr 1.6fr;
    gap:                 3rem;
    align-items:         start;
}

.contact-info-item {
    display:       flex;
    align-items:   flex-start;
    gap:           1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.contact-info-icon {
    width:           44px;
    height:          44px;
    background:      var(--emerald-light);
    border:          1px solid var(--emerald);
    color:           var(--emerald);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       1rem;
}
.contact-info-label {
    font-family:  var(--font-heading);
    font-weight:  700;
    font-size:    .85rem;
    color:        var(--text-muted);
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.contact-info-value {
    font-family: var(--font-body);
    font-size:   .95rem;
    color:       var(--text-primary);
    font-weight: 600;
}

/* Form */
.eas-form { display: flex; flex-direction: column; gap: 1.25rem; }
.eas-form-group { display: flex; flex-direction: column; gap: .4rem; }
.eas-form-group label {
    font-family:  var(--font-heading);
    font-weight:  700;
    font-size:    .85rem;
    color:        var(--text-primary);
    letter-spacing: .03em;
}
.eas-form-group input,
.eas-form-group textarea,
.eas-form-group select {
    padding:      .75rem 1rem;
    border:       1px solid var(--border-strong);
    border-radius: 0;
    font-family:  var(--font-body);
    font-size:    .95rem;
    color:        var(--text-primary);
    background:   var(--white);
    transition:   border-color .2s ease;
    width:        100%;
}
.eas-form-group input:focus,
.eas-form-group textarea:focus,
.eas-form-group select:focus {
    outline:      none;
    border-color: var(--emerald);
    box-shadow:   0 0 0 3px var(--emerald-ring);
}
.eas-form-group textarea { resize: vertical; min-height: 120px; }

.form-message {
    padding:     1rem;
    font-family: var(--font-body);
    font-size:   .95rem;
}
.form-message.success { background: var(--emerald-light); color: var(--emerald); border: 1px solid var(--emerald); }
.form-message.error   { background: rgba(220,38,38,.08); color: #dc2626; border: 1px solid #dc2626; }

/* ============================================================
   19. PROJECTS PAGE
   ============================================================ */
.projects-filter {
    display:     flex;
    gap:         .5rem;
    flex-wrap:   wrap;
    margin-bottom: 2.5rem;
}
.filter-btn {
    padding:     .5rem 1.25rem;
    border:      1px solid var(--border);
    background:  var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size:   .85rem;
    color:       var(--text-muted);
    cursor:      pointer;
    transition:  var(--transition);
    border-radius: 0;
}
.filter-btn.active,
.filter-btn:hover {
    background:   var(--emerald);
    border-color: var(--emerald);
    color:        var(--white);
}

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

.project-card { display: flex; flex-direction: column; }
.project-card-thumb {
    height:   220px;
    overflow: hidden;
}
.project-card-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.project-card:hover .project-card-thumb img { transform: scale(1.05); }
.project-card-body { padding: 1.25rem; flex: 1; }
.project-card-title {
    font-family:   var(--font-heading);
    font-weight:   900;
    font-size:     1rem;
    margin-bottom: .4rem;
    color:         var(--text-primary);
}
.project-card-meta {
    display:    flex;
    gap:        .75rem;
    font-size:  .78rem;
    color:      var(--text-muted);
    flex-wrap:  wrap;
}
.project-status {
    color:       var(--emerald);
    font-weight: 700;
}

/* ============================================================
   20. ABOUT PAGE
   ============================================================ */
.about-hero {
    background:  var(--charcoal);
    padding:     8rem 0 4rem;
    text-align:  center;
    color:       var(--white);
}
.certs-grid {
    display:             grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                 1.25rem;
}
.cert-card {
    border:      1px solid var(--border);
    padding:     1.5rem;
    background:  var(--ghost);
    text-align:  center;
}
.cert-card-name {
    font-family:  var(--font-heading);
    font-weight:  900;
    font-size:    .95rem;
    color:        var(--text-primary);
    margin-bottom: .35rem;
}
.cert-card-body {
    font-size:  .8rem;
    color:      var(--text-muted);
}

/* ============================================================
   21. ANIMATION HELPERS
   ============================================================ */
.will-animate {
    opacity:   0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.will-animate.in-view {
    opacity:   1;
    transform: translateY(0);
}

.fade-in-up {
    animation: fadeInUp .7s ease forwards;
}
@keyframes fadeInUp {
    from { opacity:0; transform: translateY(30px); }
    to   { opacity:1; transform: translateY(0); }
}

/* ============================================================
   22. RESPONSIVE — Tablets
   ============================================================ */
@media (max-width: 1024px) {
    .services-grid  { grid-template-columns: repeat(2, 1fr); }
    .projects-grid  { grid-template-columns: repeat(2, 1fr); }
    .posts-grid     { grid-template-columns: repeat(2, 1fr); }
    .footer-grid    { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .why-grid       { grid-template-columns: 1fr; gap: 2.5rem; }
    .why-stats      { grid-template-columns: repeat(4, 1fr); }
    .contact-grid   { grid-template-columns: 1fr; }
    .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   23. RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --section-pad: 3rem;
        --header-h:    60px;
    }

    /* Header */
    #primary-navigation { display: none; }
    .menu-toggle        { display: flex; }

    /* Services */
    .services-grid  { grid-template-columns: 1fr; }
    .projects-grid  { grid-template-columns: 1fr; }
    .posts-grid     { grid-template-columns: 1fr; }
    .footer-grid    { grid-template-columns: 1fr; gap: 2rem; }
    .why-stats      { grid-template-columns: repeat(2, 1fr); }
    .kpi-grid       { grid-template-columns: repeat(2, 1fr); }
    .hero-ctas      { flex-direction: column; gap: .75rem; }
    .hero-ctas a    { width: 100%; justify-content: center; }
    .cta-btns       { flex-direction: column; align-items: center; }
    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 480px) {
    .kpi-grid    { grid-template-columns: 1fr 1fr; }
    .why-stats   { grid-template-columns: 1fr 1fr; }
    .hero-badges { flex-direction: column; gap: .5rem; }
}

/* ============================================================
   24. PRINT STYLES
   ============================================================ */
@media print {
    #masthead, footer, .hero-scroll-indicator, .scroll-top { display: none; }
    body { color: #000; background: #fff; }
}