/*
Theme Name: VSD Designer
Theme URI: https://example.com/custom-ai-theme
Author: Custom AI
Author URI: https://example.com
Description: Professional industrial manufacturing WordPress theme built with Tailwind CSS. Bold industrial visual language, Gutenberg compatible, fully responsive, production-ready architecture optimized for performance.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-ai-theme
Tags: industrial, manufacturing, business, gutenberg, block-editor, tailwind, responsive, one-column, two-columns, light
*/

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    --color-primary:      #f97316;
    --color-primary-dark: #ea580c;
    --color-amber:        #fbbf24;
    --color-steel-950:    #0f172a;
    --color-steel-900:    #1a2234;
    --color-steel-800:    #1e293b;
    --color-steel-700:    #334155;
    --color-steel-600:    #475569;
    --color-steel-400:    #94a3b8;
    --color-steel-200:    #e2e8f0;
    --color-white:        #ffffff;
    --font-heading:       'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-body:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --header-height:      88px;
    --transition-base:    200ms ease;
    --border-radius:      2px;
    --max-width:          1280px;
}

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

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

body {
    font-family: var(--font-body);
    background-color: #ffffff;
    color: #1e293b;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    line-height: 1;
    color: #0f172a;
}

.section-body {
    color: #1e293b;
    line-height: 1.8;
    font-size: 1rem;
    font-weight: 500;
}

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-primary-dark); }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (min-width: 1024px) { .container { padding-inline: 3rem; } }

.industrial-grid-bg {
    background-image:
        linear-gradient(rgba(249,115,22,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249,115,22,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.clip-diagonal-r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }

.orange-line {
    display: block;
    width: 56px;
    height: 4px;
    background: var(--color-primary);
    margin-top: 1rem;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav-menu { list-style: none; display: flex; align-items: center; }

.nav-menu > li { position: relative; }

/* Nav link colours — handled by navigation.css; keep only layout here */
.nav-menu a {
    display: block;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    transition: color var(--transition-base);
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a { color: var(--color-primary); }

/* Dropdowns */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background: #111827;
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    list-style: none;
    display: none;
    z-index: 200;
}

.nav-menu > li:hover > .sub-menu { display: block; }

.nav-menu .sub-menu a {
    padding: 0.7rem 1.25rem;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.88);
}

.nav-menu .sub-menu a:hover {
    background: rgba(255,255,255,0.05);
    color: #ffffff;
    padding-left: 1.5rem;
}

/* ============================================
   HEADER — dark to match footer
   ============================================ */
.site-header {
    position: fixed;
    top: 0;
    z-index: 9000;
    height: var(--header-h, 72px);
    background: rgba(8,13,24,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: box-shadow var(--transition-base);
}

.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }

.site-logo { display: flex; align-items: center; gap: 0.625rem; }
.site-logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    line-height: 1;
}
.site-logo-text span { color: var(--color-primary); }
.site-logo img { height: 40px; width: auto; }

/* Hamburger */
.burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.burger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.75);
    border-radius: 2px;
    transition: transform 300ms, opacity 300ms, width 300ms;
    transform-origin: center;
}

.burger.is-active .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-active .burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-active .burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
    position: fixed;
    inset: 0;
    background: #0f172a;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 350ms cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.mobile-drawer .nav-menu a {
    font-size: 1.125rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.90);
}
.mobile-drawer .sub-menu {
    position: static;
    display: block;
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding-left: 1rem;
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease;
}
.drawer-overlay.is-visible { opacity: 1; pointer-events: auto; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1.75rem;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform 150ms ease;
    line-height: 1;
    white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn-outline {
    background: transparent;
    color: #1e293b;
    border-color: rgba(15,23,42,0.3);
}
.btn-outline:hover { background: #0f172a; color: #fff; border-color: #0f172a; }

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-ghost:hover { background: var(--color-primary); color: #fff; }

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #f8fafc;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(249,115,22,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 10% 80%, rgba(249,115,22,0.03) 0%, transparent 70%);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(249,115,22,0.10);
    border: 1px solid rgba(249,115,22,0.25);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 7vw, 6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #0f172a;
}

.hero-title .accent { color: var(--color-primary); }

.stat-box {
    border-left: 3px solid var(--color-primary);
    padding: 0.75rem 1.25rem;
}
.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}
.stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-steel-600);
    margin-top: 0.25rem;
}

/* ============================================
   CARDS
   ============================================ */

/* Services grid — gap between tiles */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (min-width: 1024px) {
    .services-grid { grid-template-columns: repeat(4, 1fr); gap: 1.125rem; }
}

/* Card shell — flex column: image at natural ratio, panel below */
.service-card {
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition:
        transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Entire tile zooms on hover */
.service-card:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 0 2px rgba(249,115,22,0.55),
        0 28px 64px rgba(0,0,0,0.4);
    z-index: 2;
}

/* ── Image at its natural 4:3 ratio, no overlap ─────────────── */
.service-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
}

.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Panel sits below the image in normal flow ───────────────── */
/* position:relative is the anchor for the absolutely-placed details */
.service-card-panel {
    position: relative;
    background: #ffffff;
    border-top: 2px solid rgba(249,115,22,0.70);
    padding: 0.75rem 1rem;
    z-index: 3;
    flex-shrink: 0;
}

/* Title always visible */
.service-card-title {
    font-family: var(--font-heading);
    font-size: clamp(0.875rem, 1.4vw, 1.0625rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
    transition: color 250ms ease;
}

.service-card-title a {
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 10;
}

.service-card:hover .service-card-title { color: var(--color-primary); }

/* ── Details: absolutely positioned at the panel's top edge      */
/* bottom:100% pins the details' bottom to the panel top,         */
/* so they expand upward into the image — no layout shift.        */
.service-card-details {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.625rem 1rem 0.5rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 380ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity    280ms ease 80ms;
}

.service-card:hover .service-card-details {
    max-height: 130px;
    opacity: 1;
}

/* Excerpt */
.service-card-excerpt {
    font-size: 0.78rem;
    color: rgba(15,23,42,0.75);
    line-height: 1.6;
    margin: 0 0 0.5rem;
}

/* "View Products" link */
.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    padding-right: 8px;
    position: relative;
    z-index: 10;
}

.service-card-link-arrow {
    display: flex;
    align-items: center;
    transform: translateX(0);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .service-card-link-arrow { transform: translateX(5px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card-link-arrow { transition: none; }
    .service-card:hover { transform: none; }
    .service-card:hover .service-card-details { transition: none; }
}

/* ============================================
   PRODUCTS SECTION — HEADER, PROMO STRIP, FOOTER
   ============================================ */

/* ── Section header (two-column like industries) ─────────────── */
.services-section-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .services-section-header {
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: 3rem;
    }
}

.services-header-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* "View all products →" inline link */
.services-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary, #f97316);
    text-decoration: none;
    transition: gap 200ms ease, color 200ms ease;
    width: fit-content;
}

.services-header-link:hover {
    gap: 0.875rem;
    color: #fb923c;
}

/* ── Promo strip ─────────────────────────────────────────────── */
@keyframes services-promo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes services-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.services-promo-strip {
    position: relative;
    margin-top: 3rem;
    padding: 2rem 2rem 2rem 2.25rem;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* All content above the pseudo-elements */
.services-promo-left,
.services-promo-ctas {
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .services-promo-strip {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}

/* Badge */
.services-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-sky, #0ea5e9);
    border: 1px solid rgba(14,165,233,0.35);
    background: rgba(14,165,233,0.08);
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
}

.services-promo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-sky, #0ea5e9);
    flex-shrink: 0;
    animation: services-promo-pulse 2s ease infinite;
}

.services-promo-heading {
    font-family: var(--font-heading, 'Barlow Condensed', sans-serif);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 0.5rem;
}

.services-promo-body {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    max-width: 400px;
    margin: 0;
}

/* Promo CTA cluster */
.services-promo-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (min-width: 480px) {
    .services-promo-ctas { flex-direction: row; align-items: center; }
}

@media (min-width: 768px) {
    .services-promo-ctas { flex-direction: column; align-items: stretch; }
}

@media (min-width: 1024px) {
    .services-promo-ctas { flex-direction: row; align-items: center; }
}

/* Primary promo button — animated shimmer */
.services-promo-btn-primary {
    position: relative;
    overflow: hidden;
}

.services-promo-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255,0.25) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: services-shimmer 2.4s ease infinite;
    pointer-events: none;
}

/* "Need Custom Products?" — sky-blue outlined button */
.services-promo-btn-custom {
    background: transparent;
    color: var(--color-sky, #0ea5e9);
    border: 2px solid rgba(14,165,233,0.6);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
    cursor: pointer;
    white-space: nowrap;
}

.services-promo-btn-custom:hover {
    background: rgba(14,165,233,0.12);
    border-color: var(--color-sky, #0ea5e9);
    transform: translateY(-2px);
}

/* ── Section footer ──────────────────────────────────────────── */
.services-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .services-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.services-footer-text {
    font-size: 0.9375rem;
    color: rgba(15,23,42,0.75);
    max-width: 380px;
    line-height: 1.6;
    flex-shrink: 0;
}

.services-footer-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .services-footer-ctas { justify-content: flex-end; }
}

/* "Discuss Your Application" — pulsing glow on primary */
.services-footer-cta-discuss {
    box-shadow: 0 0 0 0 rgba(249,115,22,0.4);
    animation: services-discuss-glow 2.8s ease infinite;
}

@keyframes services-discuss-glow {
    0%   { box-shadow: 0 0 0 0   rgba(249,115,22,0.5); }
    60%  { box-shadow: 0 0 0 8px rgba(249,115,22,0);   }
    100% { box-shadow: 0 0 0 0   rgba(249,115,22,0);   }
}

/* "Contact Us" — sky blue */
.services-footer-cta-contact {
    background: transparent;
    color: var(--color-sky, #0ea5e9);
    border: 2px solid rgba(14,165,233,0.55);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
    cursor: pointer;
    white-space: nowrap;
}

.services-footer-cta-contact:hover {
    background: rgba(14,165,233,0.1);
    border-color: var(--color-sky, #0ea5e9);
    transform: translateY(-2px);
}

/* "Email Us" — steel outlined */
.services-footer-cta-email {
    background: transparent;
    color: rgba(15,23,42,0.80);
    border: 2px solid rgba(15,23,42,0.25);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
    cursor: pointer;
    white-space: nowrap;
}

.services-footer-cta-email:hover {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    transform: translateY(-2px);
}

/* Reduced motion — promo strip animations */
@media (prefers-reduced-motion: reduce) {
    .services-promo-dot              { animation: none; }
    .services-promo-btn-primary::after { animation: none; }
    .services-footer-cta-discuss     { animation: none; box-shadow: none; }
}

/* Post cards */
.post-card {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.08);
    overflow: hidden;
    transition: transform 300ms ease, box-shadow 300ms ease;
    display: flex;
    flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }

.post-card-thumb { overflow: hidden; aspect-ratio: 16/9; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.post-card:hover .post-card-thumb img { transform: scale(1.04); }

.post-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-steel-500);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.post-card-cat {
    color: var(--color-primary);
    font-weight: 700;
}
.post-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    transition: color var(--transition-base);
}
.post-card:hover .post-card-title { color: var(--color-primary); }
.post-card-excerpt { font-size: 0.875rem; color: var(--color-steel-500); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; }
.post-card-link {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    transition: gap var(--transition-base);
}
.post-card:hover .post-card-link { gap: 0.625rem; }

/* ============================================
   SECTION STYLES
   ============================================ */
.section { padding-block: 6rem; }
.section-sm { padding-block: 4rem; }
.section-lg { padding-block: 8rem; }

.section-header { margin-bottom: 3.5rem; }
.section-header.centered { text-align: center; }
.section-header.centered .orange-line { margin-inline: auto; }

/* Stats grid */
.stats-grid { display: grid; gap: 0; }
.stat-item {
    padding: 2rem;
    border: 1px solid rgba(15,23,42,0.08);
    text-align: center;
}
.stat-item .number {
    display: block;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}
.stat-item .unit { color: var(--color-primary); }
.stat-item .label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-steel-500);
    margin-top: 0.5rem;
}

/* Feature list */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; }
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-steel-600);
}
.feature-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: rgba(249,115,22,0.12);
    border: 1px solid rgba(249,115,22,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-top: 1px;
}

/* ============================================
   PROCESS / TIMELINE
   ============================================ */
.process-step {
    display: flex;
    gap: 1.5rem;
    position: relative;
}
.process-num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.process-step-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #0f172a;
    margin-bottom: 0.375rem;
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-band {
    background: var(--color-primary);
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(0,0,0,0.04) 0,
        rgba(0,0,0,0.04) 1px,
        transparent 1px,
        transparent 12px
    );
}

/* ============================================
   ENTRY CONTENT (Post body)
   ============================================ */
.entry-content > * { margin-bottom: 1.5rem; }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.5rem; margin-bottom: 1rem; }
.entry-content h3 { font-size: 1.375rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.entry-content h4 { font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.entry-content p { color: var(--color-steel-600); line-height: 1.85; }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; color: var(--color-steel-600); }
.entry-content li { margin-bottom: 0.5rem; line-height: 1.75; }
.entry-content strong { color: #0f172a; font-weight: 700; }
.entry-content em { color: var(--color-steel-700); }

.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    background: #f8fafc;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    border-radius: 0 2px 2px 0;
    border: 1px solid rgba(15,23,42,0.08);
    border-left: 4px solid var(--color-primary);
}
.entry-content blockquote p { color: var(--color-steel-700); font-size: 1.0625rem; font-style: italic; margin: 0; }

.entry-content pre {
    background: #f1f5f9;
    border: 1px solid rgba(15,23,42,0.1);
    padding: 1.5rem;
    overflow-x: auto;
    border-radius: 2px;
    font-size: 0.875rem;
}

.entry-content code {
    background: #f1f5f9;
    border: 1px solid rgba(15,23,42,0.1);
    padding: 0.125rem 0.375rem;
    font-size: 0.875em;
    border-radius: 2px;
    color: #ea580c;
}

.entry-content pre code { background: none; border: none; padding: 0; color: inherit; }

.entry-content hr {
    border: none;
    border-top: 2px solid rgba(15,23,42,0.1);
    margin: 3rem 0;
}

.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.entry-content th {
    background: #f1f5f9;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid rgba(15,23,42,0.1);
}
.entry-content td {
    padding: 0.75rem 1rem;
    border: 1px solid rgba(15,23,42,0.1);
    color: var(--color-steel-600);
}
.entry-content tr:nth-child(even) td { background: #f8fafc; }

/* ============================================
   WORDPRESS ALIGNMENT CLASSES
   ============================================ */
.alignleft  { float: left;  margin: 0.25rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

.alignwide {
    width: calc(100% + 4rem);
    margin-inline: -2rem;
    max-width: none;
}

.alignfull {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
}

/* ============================================
   GUTENBERG BLOCK OVERRIDES
   ============================================ */
.wp-block-image img { border-radius: 2px; }
.wp-block-image figcaption { font-size: 0.8rem; color: var(--color-steel-500); text-align: center; margin-top: 0.5rem; }

.wp-block-quote {
    border-left: 4px solid var(--color-primary);
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.08);
    border-left: 4px solid var(--color-primary);
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}
.wp-block-quote p { color: var(--color-steel-700); font-style: italic; }
.wp-block-quote cite { color: var(--color-steel-500); font-size: 0.875rem; }

.wp-block-separator { border: none; border-top: 2px solid rgba(15,23,42,0.1); margin: 2.5rem 0; }
.wp-block-separator.is-style-wide { border-color: var(--color-primary); border-top-width: 3px; }

.wp-block-button .wp-block-button__link { @apply btn btn-primary; }

/* ============================================
   PRODUCT IMAGE GALLERY + LIGHTBOX
   ============================================ */

.prod-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.prod-gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    padding: 0;
    display: block;
    width: 100%;
}

.prod-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.prod-gallery-item:hover img { transform: scale(1.05); }

.prod-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    color: transparent;
    transition: background 250ms ease, color 250ms ease;
}

.prod-gallery-item:hover .prod-gallery-zoom {
    background: rgba(0,0,0,0.38);
    color: #ffffff;
}

.prod-gallery-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    cursor: default;
    color: #94a3b8;
}

/* ── Lightbox ────────────────────────────────────────────── */

.prod-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-lightbox[hidden] { display: none; }

.prod-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5,8,20,0.94);
    cursor: pointer;
}

.prod-lightbox-stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 80px);
}

.prod-lightbox-img {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 80px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}

.prod-lightbox-close,
.prod-lightbox-prev,
.prod-lightbox-next {
    position: absolute;
    z-index: 2;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.95);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.prod-lightbox-close:hover,
.prod-lightbox-prev:hover,
.prod-lightbox-next:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.prod-lightbox-close { top: 1rem; right: 1rem; }

.prod-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.prod-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

.prod-lightbox.is-single .prod-lightbox-prev,
.prod-lightbox.is-single .prod-lightbox-next { display: none; }

.prod-lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .prod-gallery-item img,
    .prod-gallery-zoom,
    .prod-lightbox-close,
    .prod-lightbox-prev,
    .prod-lightbox-next { transition: none; }
}
.wp-block-button.is-style-outline .wp-block-button__link { @apply btn btn-ghost; }

.wp-block-code {
    background: #f1f5f9;
    border: 1px solid rgba(15,23,42,0.1);
    padding: 1.5rem;
    border-radius: 2px;
}

/* ============================================
   FORMS
   ============================================ */
.form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.form-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-steel-600);
}
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.15);
    border-radius: var(--border-radius);
    color: #0f172a;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
.form-input::placeholder { color: var(--color-steel-400); }

/* ============================================
   PAGINATION
   ============================================ */
.pagination { display: flex; gap: 0.375rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    background: #f1f5f9;
    border: 1px solid rgba(15,23,42,0.1);
    color: var(--color-steel-600);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 2px;
    transition: background var(--transition-base), color var(--transition-base);
}
.page-numbers:hover { background: #e2e8f0; color: #0f172a; }
.page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-numbers.prev, .page-numbers.next { font-size: 1rem; }

/* ============================================
   SIDEBAR & WIDGETS
   ============================================ */
.widget { margin-bottom: 2.5rem; }
.widget-title {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(15,23,42,0.1);
    margin-bottom: 1.25rem;
}
.widget ul { list-style: none; }
.widget ul li { padding: 0.4rem 0; border-bottom: 1px solid rgba(15,23,42,0.06); font-size: 0.875rem; }
.widget ul li a { color: var(--color-steel-600); }
.widget ul li a:hover { color: var(--color-primary); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: #f8fafc;
    border-top: 1px solid rgba(15,23,42,0.08);
}

.footer-logo-text {
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #0f172a;
    letter-spacing: 0.04em;
}
.footer-logo-text span { color: var(--color-primary); }

.footer-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.footer-nav a {
    font-size: 0.8rem;
    color: var(--color-steel-600);
    letter-spacing: 0.04em;
    padding: 0.25rem 0.375rem;
    transition: color var(--transition-base);
}
.footer-nav a:hover { color: var(--color-primary); }

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.1);
    color: var(--color-steel-500);
    border-radius: 2px;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.social-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================
   BACK TO TOP
   ============================================ */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 300ms, transform 300ms, background var(--transition-base);
    z-index: 80;
}
#back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#back-to-top:hover { background: var(--color-primary-dark); }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="left"].revealed,
[data-reveal="right"].revealed { transform: translateX(0); }

/* ============================================
   SCREEN READER / ACCESSIBILITY
   ============================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: initial; margin: initial; overflow: visible; clip: auto; white-space: normal; }

/* ============================================
   SECTION BACKGROUND OVERRIDES
   ============================================ */

#services {
    background: #ffffff;
}

/* Ensure all section body text is bold and dark */
.section-body,
.about-body,
.tl-step-body,
.ind-card-body,
.mat-body,
.ss-body,
.faq-answer-body {
    color: #1e293b;
    font-weight: 500;
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    #site-header, .site-footer, #back-to-top, .mobile-drawer, .drawer-overlay { display: none !important; }
    body { background: white; color: black; }
    a { color: black; }
    .entry-content a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* ============================================
   FULL-WIDTH LAYOUT OVERRIDE
   ============================================ */
.container {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
@media (min-width: 768px) {
    .container {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}
@media (min-width: 1280px) {
    .container {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

/* ============================================
   SERVICES GRID — 5-col at xl, 6-col at 2xl+
   ============================================ */
@media (min-width: 1280px) {
    .services-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}
@media (min-width: 1536px) {
    .services-grid { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
}

/* ============================================
   NO STEEL/SLATE TEXT — ALL TEXT SOLID #0f172a
   ============================================ */
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700,
.text-slate-800,
.text-steel-400,
.text-steel-500,
.text-steel-600,
.text-steel-700 {
    color: #0f172a !important;
}

/* Footer nav + widget links */
.footer-nav a { color: #0f172a !important; }
.footer-nav a:hover { color: var(--color-primary) !important; }
.widget ul li a { color: #0f172a !important; }
.widget ul li a:hover { color: var(--color-primary) !important; }
.social-link { color: #0f172a !important; }