/*
Theme Name: Salwa Maintenance
Theme URI: https://salwamaintenance.com
Author: Abrar Iqbal
Author URI: https://salwamaintenance.com
Description: Custom WordPress theme for Salwa Maintenance — industrial electrical and motor services. Charcoal + Electric Blue design.
Version: 2.5.0
Requires at least: 6.0
Tested up to: 6.7
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: salwa-maintenance
*/

/* ═══════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════ */
:root {
    --charcoal: #171A1F;
    --blue: #1677FF;
    --blue-dark: #1260D6;
    --white: #FFFFFF;
    --gray-50: #F8F9FA;
    --gray-100: #F1F3F5;
    --gray-200: #E9ECEF;
    --gray-400: #ADB5BD;
    --gray-500: #868E96;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
    --container: 1200px;
    --header-h: 88px;
}

/* ═══════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--charcoal);
    background: var(--white);
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════ */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    color: var(--charcoal);
}
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; font-weight: 600; font-family: var(--font-body); }

.label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue);
    margin-bottom: 12px;
}
.label-blue { color: var(--blue); }
.blue { color: var(--blue); }

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.section-header p {
    color: var(--gray-600);
    margin-top: 12px;
    font-size: 1.05rem;
}
.section-header-light h2 { color: var(--white); }
.section-header-light p { color: var(--gray-400); }

.section-cta { text-align: center; margin-top: 40px; }

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-blue {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.btn-blue:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
}
.btn-outline-dark {
    background: transparent;
    color: var(--charcoal);
    border-color: var(--gray-200);
}
.btn-outline-dark:hover {
    border-color: var(--charcoal);
}
.btn-outline-white {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.4);
}
.btn-outline-white:hover {
    border-color: var(--white);
    background: rgba(255,255,255,0.1);
}
.btn-white {
    background: var(--white);
    color: var(--charcoal);
    border-color: var(--white);
}
.btn-white:hover { background: var(--gray-100); }
.btn-sm { padding: 8px 20px; font-size: 0.875rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-block { width: 100%; }

.text-link {
    font-weight: 600;
    color: var(--blue);
    font-size: 0.95rem;
    transition: color 0.2s;
}
.text-link:hover { color: var(--blue-dark); }

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--white);
    height: var(--header-h);
    transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
    box-shadow: 0 1px 12px rgba(0,0,0,0.08);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}
.header-logo a { display: flex; align-items: center; }
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.logo-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--charcoal);
    letter-spacing: 0.04em;
}
.logo-sub {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gray-500);
}
.header-nav ul {
    display: flex;
    gap: 32px;
}
.header-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.2s;
}
.header-nav a:hover { color: var(--blue); }
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}
.header-phone:hover { color: var(--blue); }
.header-phone svg { flex-shrink: 0; }

/* Mobile toggle */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1010;
}
.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--charcoal);
    transition: all 0.3s ease;
}
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    background: var(--white);
    padding: 32px 24px;
    z-index: 999;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu ul { margin-bottom: 32px; }
.mobile-menu li { border-bottom: 1px solid var(--gray-100); }
.mobile-menu a {
    display: block;
    padding: 16px 0;
    font-size: 1.1rem;
    font-weight: 500;
}
.mobile-menu-actions { display: flex; flex-direction: column; gap: 12px; }

/* ═══════════════════════════════════════
   02. HERO
   ═══════════════════════════════════════ */
.hero {
    padding-top: calc(var(--header-h) + 60px);
    padding-bottom: 60px;
    background: var(--white);
}
.hero-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 40px;
    align-items: center;
    min-height: 560px;
}
.hero-content h1 { margin-bottom: 20px; }
.hero-content > p {
    font-size: 1.1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 480px;
}
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-image {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 480px;
}

/* ═══════════════════════════════════════
   03. TRUST STRIP
   ═══════════════════════════════════════ */
.trust-strip {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    padding: 20px 0;
}
.trust-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 28px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
}
.trust-item svg { color: var(--blue); flex-shrink: 0; }
.trust-divider {
    width: 1px;
    height: 24px;
    background: var(--gray-200);
}

/* ═══════════════════════════════════════
   04. ABOUT
   ═══════════════════════════════════════ */
.about { padding: 100px 0; }
.about-grid {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 60px;
    align-items: center;
}
.about-image {
    border-radius: 6px;
    overflow: hidden;
}
.about-image img {
    width: 100%;
    height: 440px;
    object-fit: cover;
}
.about-content h2 { margin-bottom: 20px; }
.about-content p {
    color: var(--gray-600);
    margin-bottom: 16px;
    line-height: 1.75;
}
.about-content .text-link { margin-top: 8px; display: inline-block; }

/* ═══════════════════════════════════════
   05. SERVICES
   ═══════════════════════════════════════ */
.services {
    padding: 100px 0;
    background: var(--gray-50);
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.service-card {
    background: var(--white);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    transition: box-shadow 0.3s ease;
}
.service-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.service-card-img {
    height: 200px;
    overflow: hidden;
}
.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.service-card:hover .service-card-img img {
    transform: scale(1.05);
}
.service-card-body {
    padding: 24px;
}
.service-card-body h3 { margin-bottom: 10px; }
.service-card-body p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* ═══════════════════════════════════════
   06. OUR WORK
   ═══════════════════════════════════════ */
.work {
    padding: 100px 0;
    background: var(--charcoal);
}
.work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}
.work-item {
    overflow: hidden;
    border-radius: 4px;
}
.work-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.work-item:hover img { transform: scale(1.05); }
.work-item-large {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.work-item-large img {
    height: 100%;
    min-height: 492px;
}

/* ═══════════════════════════════════════
   07. WHY CHOOSE US
   ═══════════════════════════════════════ */
.why-us { padding: 100px 0; }
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.why-content h2 { margin-bottom: 16px; }
.why-content > p {
    color: var(--gray-600);
    margin-bottom: 28px;
    line-height: 1.7;
}
.check-list {
    margin-bottom: 32px;
}
.check-list li {
    padding: 10px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 12px;
}
.check-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.why-image { border-radius: 6px; overflow: hidden; }
.why-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
}

/* ═══════════════════════════════════════
   08. CTA BAND
   ═══════════════════════════════════════ */
.cta-band {
    background: var(--charcoal);
    padding: 48px 0;
}
.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.cta-band-text h2 {
    color: var(--white);
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    margin-bottom: 6px;
}
.cta-band-text p {
    color: var(--gray-400);
    font-size: 0.95rem;
}
.cta-band-buttons { display: flex; gap: 12px; flex-shrink: 0; }

/* ═══════════════════════════════════════
   09. PROCESS
   ═══════════════════════════════════════ */
.process { padding: 100px 0; }
.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}
.process-step {
    flex: 1;
    text-align: center;
    max-width: 220px;
    padding: 0 16px;
}
.process-num {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
    margin-bottom: 16px;
}
.process-step h3 {
    margin-bottom: 8px;
    font-size: 1.05rem;
}
.process-step p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
}
.process-line {
    width: 60px;
    height: 2px;
    background: var(--gray-200);
    flex-shrink: 0;
    margin-top: 28px;
}

/* ═══════════════════════════════════════
   10. INDUSTRIES
   ═══════════════════════════════════════ */
.industries {
    padding: 100px 0;
    background: var(--gray-50);
}
.industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.industries-image { border-radius: 6px; overflow: hidden; }
.industries-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.industries-content h2 { margin-bottom: 16px; }
.industries-content > p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 28px;
}
.industries-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 40px;
}
.industries-list li {
    padding: 8px 0;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--gray-200);
}

/* ═══════════════════════════════════════
   11. VISUAL BREAK
   ═══════════════════════════════════════ */
.visual-break {
    position: relative;
    height: 340px;
    overflow: hidden;
}
.visual-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.visual-break-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(23,26,31,0.2), rgba(23,26,31,0.5));
}

/* ═══════════════════════════════════════
   12. FAQ
   ═══════════════════════════════════════ */
.faq { padding: 100px 0; }
.faq-grid {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 60px;
    align-items: start;
}
.faq-intro h2 { margin-bottom: 16px; }
.faq-intro p {
    color: var(--gray-600);
    margin-bottom: 28px;
    line-height: 1.7;
}
.faq-item {
    border-bottom: 1px solid var(--gray-200);
}
.faq-item:first-child { border-top: 1px solid var(--gray-200); }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--charcoal);
}
.faq-question svg {
    flex-shrink: 0;
    color: var(--gray-400);
    transition: transform 0.3s ease;
}
.faq-item.open .faq-question svg { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 200px; }
.faq-answer p {
    padding-bottom: 18px;
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* ═══════════════════════════════════════
   13. FINAL CTA
   ═══════════════════════════════════════ */
.final-cta {
    position: relative;
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}
.final-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.final-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(23,26,31,0.88);
}
.final-cta-inner {
    position: relative;
    z-index: 1;
}
.final-cta h2 {
    color: var(--white);
    margin-bottom: 16px;
}
.final-cta p {
    color: var(--gray-400);
    font-size: 1.05rem;
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.final-cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════
   14. CONTACT
   ═══════════════════════════════════════ */
.contact { padding: 100px 0; }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
.contact-info h2 { margin-bottom: 32px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; }
.contact-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.contact-row svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--blue);
}
.contact-row strong {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-500);
    font-weight: 500;
    margin-bottom: 2px;
}
.contact-row a,
.contact-row span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--charcoal);
}
.contact-row a:hover { color: var(--blue); }

.contact-form-wrap {
    background: var(--gray-50);
    border-radius: 6px;
    padding: 40px;
    border: 1px solid var(--gray-200);
}
.form-row { margin-bottom: 16px; }
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    background: var(--white);
    color: var(--charcoal);
    transition: border-color 0.2s;
    outline: none;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--blue);
}
.form-row select { appearance: auto; }
.form-row textarea { resize: vertical; }
.contact-form .btn { margin-top: 8px; }

/* ═══════════════════════════════════════
   15. FOOTER
   ═══════════════════════════════════════ */
.site-footer {
    background: var(--charcoal);
    padding-top: 72px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 48px;
}
.footer-col-about .logo-name { color: var(--white); }
.footer-col-about .logo-sub { color: var(--gray-500); }
.footer-col-about p {
    color: var(--gray-400);
    font-size: 0.88rem;
    line-height: 1.7;
    margin-top: 16px;
}
.footer-logo { margin-bottom: 4px; }
.footer-col h4 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a,
.footer-col ul span {
    color: var(--gray-400);
    font-size: 0.88rem;
    transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--white); }
.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-contact svg { color: var(--gray-500); flex-shrink: 0; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
}
.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom p {
    color: var(--gray-500);
    font-size: 0.82rem;
}
.footer-legal { display: flex; gap: 20px; }
.footer-legal a {
    color: var(--gray-500);
    font-size: 0.82rem;
}
.footer-legal a:hover { color: var(--white); }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
    .hero-image img { min-height: 320px; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-image img { height: 320px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; gap: 40px; }
    .why-image { order: -1; }
    .why-image img { height: 320px; }
    .industries-grid { grid-template-columns: 1fr; gap: 32px; }
    .industries-image img { height: 300px; }
    .faq-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .cta-band-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
    :root { --header-h: 64px; }

    .header-nav,
    .header-actions { display: none; }
    .mobile-toggle { display: flex; }
    .mobile-menu { display: block; }

    .hero { padding-top: calc(var(--header-h) + 32px); padding-bottom: 40px; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-image img { min-height: 260px; }

    .trust-items { flex-direction: column; gap: 4px; }
    .trust-divider { display: none; }

    .about,
    .services,
    .work,
    .why-us,
    .process,
    .industries,
    .faq,
    .contact,
    .final-cta {
        padding: 64px 0;
    }

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

    .work-grid {
        grid-template-columns: 1fr 1fr;
    }
    .work-item-large {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .work-item-large img { min-height: 240px; }
    .work-item img { height: 180px; }

    .process-steps {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .process-line {
        width: 2px;
        height: 40px;
        margin: 0;
    }
    .process-step { max-width: 280px; padding: 16px; }

    .contact-form-wrap { padding: 24px; }

    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom-inner { flex-direction: column; gap: 12px; text-align: center; }

    .visual-break { height: 220px; }
}

@media (max-width: 480px) {
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }
    .final-cta-buttons { flex-direction: column; align-items: center; }
    .final-cta-buttons .btn { width: 100%; max-width: 300px; }
    .cta-band-buttons { flex-direction: column; width: 100%; }
    .cta-band-buttons .btn { width: 100%; }
}

/* WordPress admin bar fix */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}


/* ================================================================
   2.1 HOMEPAGE ALIGNMENT & POLISH
   ================================================================ */
.label-white { color: rgba(255,255,255,.86); }

.hero {
    position: relative;
    isolation: isolate;
    min-height: 650px;
    padding: calc(var(--header-h) + 96px) 0 88px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 64% center;
    background-repeat: no-repeat;
    color: var(--white);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,22,28,.96) 0%, rgba(18,22,28,.84) 44%, rgba(18,22,28,.38) 72%, rgba(18,22,28,.22) 100%);
    z-index: -1;
}
.hero-overlay { display: none; }
.hero-inner {
    width: 100%;
    position: relative;
    z-index: 1;
}
.hero-inner h1 {
    color: var(--white);
    max-width: 760px;
    font-size: clamp(2.7rem, 5.5vw, 4.7rem);
    line-height: .98;
    letter-spacing: -.025em;
    margin: 0 0 24px;
}
.hero-inner > p {
    max-width: 700px;
    color: rgba(255,255,255,.82);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.75;
    margin-bottom: 34px;
}
.hero .blue { color: #61A8FF; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* Keep photo-heavy sections visually consistent */
.about-image img,
.why-image img,
.industries-image img,
.service-card-img img,
.work-item img,
.visual-break img {
    object-position: center;
}
.work-item { background: #0f1318; }

/* Contact form feedback */
.form-status {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 4px;
    font-size: .9rem;
    font-weight: 600;
}
.form-status.success { background: #ECFDF3; color: #027A48; border: 1px solid #ABEFC6; }
.form-status.error { background: #FEF3F2; color: #B42318; border: 1px solid #FECDCA; }

/* WhatsApp quick contact */
.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.24); }

/* Lightweight reveal animation */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .hero {
        min-height: 560px;
        padding: calc(var(--header-h) + 72px) 0 64px;
        background-position: 62% center;
    }
    .hero::before {
        background: linear-gradient(90deg, rgba(18,22,28,.95) 0%, rgba(18,22,28,.86) 64%, rgba(18,22,28,.55) 100%);
    }
    .hero-inner h1 { font-size: clamp(2.2rem, 11vw, 3.25rem); max-width: 600px; }
    .hero-inner > p { max-width: 560px; }
    .whatsapp-float span { display: none; }
    .whatsapp-float { width: 52px; height: 52px; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
}


/* 2.2 image polish */
.service-card-img,
.about-image,
.why-image,
.industries-image,
.work-item {
    overflow: hidden;
}
.service-card-img img,
.about-image img,
.why-image img,
.industries-image img,
.work-item img {
    transition: transform .35s ease;
}
.service-card:hover .service-card-img img,
.work-item:hover img {
    transform: scale(1.025);
}
.service-card-img img { aspect-ratio: 4 / 3; object-fit: cover; }
.about-image img,
.why-image img,
.industries-image img { aspect-ratio: 4 / 3; object-fit: cover; }
.work-item img { width: 100%; height: 100%; object-fit: cover; }
.visual-break img { width: 100%; height: 100%; object-fit: cover; }

/* 2.3 Inner pages */
.inner-hero{padding:150px 0 82px;background:#171a1f;color:#fff;position:relative;overflow:hidden}.inner-hero:after{content:"";position:absolute;right:-80px;top:-100px;width:420px;height:420px;border:1px solid rgba(22,119,255,.22);transform:rotate(35deg)}.inner-hero-content{position:relative;z-index:1;max-width:820px}.inner-hero h1,.service-hero h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(3rem,7vw,5.2rem);line-height:.95;text-transform:uppercase;margin:12px 0 20px}.inner-hero p,.service-hero p{font-size:1.08rem;line-height:1.75;max-width:700px;color:#d4d7dc}.inner-content{padding:88px 0;background:#fff}.prose{font-size:1rem;line-height:1.8;color:#4d5560}.prose h2{font-family:'Barlow Condensed',sans-serif;font-size:2.7rem;line-height:1.05;text-transform:uppercase;color:#171a1f;margin:8px 0 22px}.service-hero{min-height:620px;background-size:cover;background-position:center;display:flex;align-items:center;color:#fff;padding:140px 0 80px}.service-hero-content{max-width:760px}.service-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:70px;align-items:start}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:30px 0}.check-item{padding:16px;background:#f5f7fa;border-left:3px solid #1677ff;color:#252b33;font-weight:600}.quote-card{background:#171a1f;color:#fff;padding:34px;position:sticky;top:110px}.quote-card h3{font-family:'Barlow Condensed',sans-serif;font-size:2rem;text-transform:uppercase;margin:0 0 12px}.quote-card p{color:#cdd1d6;line-height:1.65;margin-bottom:24px}.quote-card .btn+.btn{margin-top:10px}.cta-strip{background:#20242a;color:#fff;padding:52px 0}.cta-strip .container{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta-strip h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:2.3rem;margin:7px 0 0}.split-page{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.split-page img{width:100%;aspect-ratio:4/3;object-fit:cover}.inner-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.inner-service-card{border:1px solid #e1e4e8;background:#fff}.inner-service-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.inner-service-card>div{padding:25px}.inner-service-card h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:1.65rem;line-height:1.05;margin:0 0 12px}.inner-service-card p{color:#646b74;line-height:1.6}.inner-service-card a{font-weight:700;color:#1677ff}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-grid figure{margin:0;overflow:hidden;background:#eee}.gallery-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s}.gallery-grid figure:hover img{transform:scale(1.025)}.contact-page-grid{display:grid;grid-template-columns:360px 1fr;gap:60px}.contact-info-card{background:#171a1f;color:#fff;padding:38px}.contact-info-card h2{font-family:'Barlow Condensed',sans-serif;font-size:2.2rem;text-transform:uppercase}.contact-info-card p{margin:25px 0;color:#d8dbe0;line-height:1.65}.contact-info-card a{color:#fff}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form .form-group:nth-child(6){grid-column:1/-1}.contact-form button{width:max-content}.contact-form label{display:block;font-weight:700;margin-bottom:7px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:13px 14px;border:1px solid #d7dce2;background:#fff;font:inherit}.page-editor-content{margin-top:30px}
@media(max-width:900px){.service-layout,.split-page,.contact-page-grid{grid-template-columns:1fr}.inner-service-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.quote-card{position:static}.contact-form{grid-template-columns:1fr}.contact-form .form-group:nth-child(6){grid-column:auto}.cta-strip .container{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.inner-hero{padding:125px 0 62px}.service-hero{min-height:540px;padding:125px 0 65px}.inner-content{padding:62px 0}.inner-service-grid,.gallery-grid,.check-grid{grid-template-columns:1fr}.service-layout{gap:40px}}

/* 2.4 — Multi-level header navigation */
.header-nav > ul { align-items: center; }
.header-nav > ul > li { position: relative; }
.header-nav > ul > li > a { display:flex; align-items:center; gap:5px; padding:26px 0; }
.nav-caret { font-size:.8rem; line-height:1; transition:transform .2s ease; }
.nav-has-dropdown:hover > a .nav-caret,
.nav-has-dropdown:focus-within > a .nav-caret { transform:rotate(180deg); }
.header-nav .nav-dropdown {
    position:absolute; top:calc(100% - 7px); left:-18px; min-width:220px;
    display:block; padding:10px; background:var(--white); border:1px solid var(--gray-100);
    border-radius:10px; box-shadow:0 14px 34px rgba(23,26,31,.13);
    opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease; z-index:1200;
}
.header-nav .nav-dropdown-wide { min-width:265px; }
.header-nav .nav-dropdown-right { left:auto; right:-10px; }
.header-nav .nav-has-dropdown:hover > .nav-dropdown,
.header-nav .nav-has-dropdown:focus-within > .nav-dropdown {
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.header-nav .nav-dropdown li { display:block; width:100%; }
.header-nav .nav-dropdown a {
    display:block; padding:10px 12px; border-radius:7px; color:var(--gray-700);
    font-size:.86rem; line-height:1.3; white-space:nowrap;
}
.header-nav .nav-dropdown a:hover,
.header-nav .nav-dropdown a:focus { color:var(--blue); background:var(--gray-50); }

.mobile-nav-list > li { border-bottom:1px solid var(--gray-100); }
.mobile-nav-row { display:flex; align-items:center; }
.mobile-nav-row > a { flex:1; border:0; }
.mobile-submenu-toggle {
    width:48px; height:48px; border:0; background:transparent; color:var(--gray-700);
    font-size:1.25rem; cursor:pointer; transition:transform .2s ease;
}
.mobile-nav-item.submenu-open .mobile-submenu-toggle { transform:rotate(180deg); }
.mobile-menu .mobile-submenu { display:none; margin:0 0 10px; padding:0 0 8px 14px; }
.mobile-menu .mobile-nav-item.submenu-open > .mobile-submenu { display:block; }
.mobile-menu .mobile-submenu li { border:0; }
.mobile-menu .mobile-submenu a { padding:9px 12px; font-size:.92rem; font-weight:500; color:var(--gray-600); }

/* 2.5 FAQ page */
.faq-page-head{max-width:760px;margin-bottom:38px}.faq-page-head h2,.faq-page-cta h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.3rem);line-height:1;margin:10px 0 16px}.faq-page-head p{color:#646b74;line-height:1.7}.faq-page-list{max-width:920px}.faq-page-item{border:1px solid #e1e4e8;border-radius:8px;margin-bottom:12px;background:#fff;overflow:hidden}.faq-page-item summary{cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font-weight:700;color:#252b33;position:relative}.faq-page-item summary::-webkit-details-marker{display:none}.faq-page-item summary:after{content:'+';position:absolute;right:22px;top:16px;font-size:1.55rem;color:#1677ff}.faq-page-item[open] summary:after{content:'–'}.faq-page-item>div{padding:0 22px 20px;color:#646b74;line-height:1.75}.faq-page-item p{margin:0}.faq-page-cta{margin-top:50px;padding:36px;background:#f5f7fa;border-left:4px solid #1677ff}.faq-page-cta p{margin:0 0 22px;color:#646b74}

/* Selected client work */
.client-work{padding:90px 0;background:#f5f7fa}.client-work-head{max-width:760px;margin-bottom:34px}.client-work-head h2{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.3rem);line-height:1;margin:10px 0 14px}.client-work-head p,.client-work-note{color:#646b74;line-height:1.7}.client-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.client-work-card{background:#fff;border:1px solid #e1e4e8;border-radius:8px;padding:30px 26px;min-height:190px;box-shadow:0 8px 24px rgba(20,28,38,.05)}.client-mark{display:flex;width:54px;height:54px;align-items:center;justify-content:center;background:#171a1f;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.15rem;border-radius:6px;margin-bottom:22px}.client-work-card h3{margin:0 0 8px;font-size:1.15rem}.client-work-card p{margin:0;color:#646b74;font-size:.92rem}.client-work-note{margin:24px 0 0;font-size:.88rem}.client-page{background:#fff}@media(max-width:760px){.client-work{padding:65px 0}.client-work-grid{grid-template-columns:1fr}.client-work-card{min-height:auto}}
/* Global quick-contact stack */
.sticky-contact-stack{position:fixed;right:18px;bottom:18px;z-index:999;display:flex;flex-direction:column;gap:10px}.sticky-contact-stack .whatsapp-float,.sticky-contact-stack .call-float{position:static;min-width:118px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 18px;font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:transform .2s}.sticky-contact-stack .whatsapp-float{background:#20b858;color:#fff}.sticky-contact-stack .call-float{background:#e2ad3b;color:#171a1f}.sticky-contact-stack a:hover{transform:translateY(-2px)}
@media(max-width:600px){.sticky-contact-stack{right:14px;bottom:14px}.sticky-contact-stack .whatsapp-float,.sticky-contact-stack .call-float{min-width:96px;height:46px;padding:0 12px;font-size:.82rem}}

/* Contact map */
.contact-map-section{padding:72px 0;background:#f6f8fa}.contact-map-section .section-header{max-width:720px;margin-bottom:24px}.contact-map-wrap{overflow:hidden;border-radius:16px;box-shadow:0 14px 36px rgba(8,30,48,.12);background:#fff}.contact-map-wrap iframe{display:block;width:100%;min-height:420px}.map-directions{margin-top:20px}@media(max-width:767px){.contact-map-section{padding:48px 0}.contact-map-wrap iframe{min-height:330px;height:330px}}

/* V5 homepage gallery + map */
.work-grid-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-grid-three .work-item{min-height:340px;border-radius:12px;overflow:hidden}
.work-grid-three .work-item img{width:100%;height:100%;object-fit:cover}
.home-map-section{padding:80px 0;background:#f6f8fa}
.home-map-section .section-header{max-width:720px;margin-bottom:26px}
@media(max-width:900px){.work-grid-three{grid-template-columns:1fr}.work-grid-three .work-item{min-height:300px}}


/* Salwa Maintenance v7 — premium header refresh */
.site-header{border-top:4px solid var(--blue);box-shadow:0 8px 30px rgba(23,26,31,.07)}
.header-inner{gap:28px}
.header-logo{flex:0 0 auto}
.header-logo .custom-logo{max-height:64px;width:auto}
.logo-brand{display:flex!important;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:50px;height:50px;flex:0 0 50px;border-radius:14px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#1677ff,#0758c7);box-shadow:0 8px 20px rgba(22,119,255,.24);transform:rotate(-4deg)}
.logo-mark:before{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.82);border-radius:10px}
.logo-bolt{position:relative;z-index:1;color:#fff;font-family:var(--font-heading);font-size:29px;font-weight:900;font-style:italic;line-height:1}
.logo-copy{display:flex;flex-direction:column;line-height:1}
.logo-name{font-size:1.72rem;letter-spacing:.055em;color:#171a1f}
.logo-sub{margin-top:3px;font-size:.63rem;letter-spacing:.27em;color:#1677ff;font-weight:800}
.logo-tagline{margin-top:5px;font-size:.48rem;text-transform:uppercase;letter-spacing:.12em;color:#7b838d;font-weight:600;white-space:nowrap}
.header-nav{margin-left:auto}
.header-nav ul{gap:27px}
.header-nav a{font-size:.92rem;font-weight:650;color:#3f4751}
.header-nav>ul>li>a{position:relative}
.header-nav>ul>li>a:after{content:"";position:absolute;left:0;right:0;bottom:19px;height:2px;background:#1677ff;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.header-nav>ul>li:hover>a:after,.header-nav>ul>li:focus-within>a:after{transform:scaleX(1)}
.header-actions{padding-left:18px;border-left:1px solid #e3e8ee;gap:14px}
.header-phone{font-weight:750;color:#252b33;white-space:nowrap}
.header-phone svg{width:20px;height:20px;color:#1677ff}
.header-actions .btn-blue{border-radius:10px;padding:11px 20px;box-shadow:0 7px 16px rgba(22,119,255,.18)}
@media(max-width:1180px){.header-nav ul{gap:18px}.logo-tagline{display:none}.header-actions{padding-left:10px}.header-phone span{display:none}}
@media(max-width:900px){.site-header{border-top-width:3px}.logo-mark{width:44px;height:44px;flex-basis:44px;border-radius:12px}.logo-name{font-size:1.5rem}.logo-sub{font-size:.56rem}.header-inner{gap:12px}}