/*
Theme Name: Virtual IT Managers
Theme URI: https://virtualitmanagers.com
Author: Virtual IT Managers
Author URI: https://virtualitmanagers.com
Description: Custom theme for Virtual IT Managers — Miami-Dade County's Trusted IT Partner. Flat-rate managed IT services, cybersecurity, and network support.
Version: 1.0.0
License: Proprietary
Text Domain: virtualitmanagers
Tags: business, it-services, managed-services, miami
*/

/* ── Brand tokens ────────────────────────────────────────── */
:root {
  --navy:   #0D1F4E;
  --teal:   #0891B2;
  --teal-h: #0771A0;
  --sky:    #38BDF8;
  --sky-lt: #7DD3FC;
}

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: #1e293b; line-height: 1.6; }
img  { max-width: 100%; height: auto; }
a    { text-decoration: none; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { background: #0f172a; border-bottom: 1px solid #334155; color: #cbd5e1; font-size: .75rem; }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; height: 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.topbar-left { display: flex; align-items: center; gap: .125rem; overflow-x: auto; }
.topbar-link { display: flex; align-items: center; gap: .25rem; white-space: nowrap; padding: .25rem .375rem; border-radius: .25rem; color: #cbd5e1; transition: color .15s, background .15s; }
.topbar-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.topbar-link svg { width: .75rem; height: .75rem; flex-shrink: 0; }
.topbar-sep { color: #475569; margin: 0 .5rem; user-select: none; }
.topbar-phone { color: #38bdf8; font-weight: 600; }
.topbar-icons { display: flex; align-items: center; gap: .125rem; flex-shrink: 0; }
.topbar-icon { padding: .375rem; border-radius: .25rem; color: #cbd5e1; transition: color .15s, background .15s; display: flex; }
.topbar-icon:hover { color: #fff; background: rgba(255,255,255,.1); }
.topbar-icon svg { width: .875rem; height: .875rem; }

/* ── Main nav ────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 9999; box-shadow: 0 1px 3px rgba(0,0,0,.1); isolation: isolate; }
.navbar { position: relative; z-index: 2; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid #f1f5f9; }
.navbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 13rem; display: flex; align-items: center; justify-content: space-between; }
.navbar-logo img { height: 12rem; width: auto; object-fit: contain; }
.navbar-links { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .navbar-links { display: flex; } }
.nav-link { font-size: .875rem; color: #475569; font-weight: 500; transition: color .15s; }
.nav-link:hover { color: var(--teal); }
.nav-btn { background: var(--teal); color: #fff; font-size: .875rem; padding: .5rem 1.25rem; border-radius: .5rem; font-weight: 600; transition: background .15s; }
.nav-btn:hover { background: var(--teal-h); color: #fff; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-toggle { display: flex; align-items: center; gap: .25rem; font-size: .875rem; color: #475569; font-weight: 500; cursor: pointer; background: none; border: none; }
.dropdown-toggle:hover { color: var(--teal); }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: .25rem; width: 20rem; background: #fff; border-radius: .75rem; box-shadow: 0 10px 25px rgba(0,0,0,.12); border: 1px solid #f1f5f9; padding: .5rem 0; z-index: 9999; }
.dropdown:hover .dropdown-menu, .dropdown-menu:hover { display: block; }
.dropdown-item { display: block; padding: .5rem 1rem; font-size: .875rem; color: #374151; transition: background .1s, color .1s; }
.dropdown-item:hover { background: #f8fafc; color: var(--teal); }

/* Hamburger */
.hamburger { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: .25rem; }
.hamburger svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) { .hamburger { display: none; } }

/* Mobile menu */
.mobile-menu { display: none; background: #fff; border-top: 1px solid #f1f5f9; padding: 1rem 1.5rem; max-height: 80vh; overflow-y: auto; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; color: #374151; font-weight: 500; padding: .375rem 0; }
.mobile-menu a:hover { color: var(--teal); }
.mobile-section-label { font-size: .75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin: .75rem 0 .25rem; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 40px 40px; pointer-events: none; }
.hero-accent { position: absolute; top: 0; left: 0; right: 0; height: .25rem; background: var(--teal); }
.hero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 4rem 1.5rem; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 1fr 1fr; padding: 6rem 1.5rem; } }
.hero-badge { display: inline-block; background: var(--teal); color: #fff; font-size: .875rem; padding: .25rem .75rem; border-radius: 9999px; margin-bottom: 1rem; font-weight: 500; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
.hero h1 span { color: var(--sky-lt); }
.hero-desc { font-size: 1.125rem; color: #cbd5e1; line-height: 1.7; margin-bottom: 1rem; max-width: 36rem; }
.hero-tag  { font-size: .9375rem; color: #94a3b8; margin-bottom: 2rem; font-style: italic; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.btn-primary { display: inline-flex; align-items: center; gap: .5rem; background: var(--teal); color: #fff; padding: .875rem 2rem; border-radius: .5rem; font-weight: 600; font-size: 1rem; transition: background .15s; }
.btn-primary:hover { background: var(--teal-h); color: #fff; }
.btn-outline { display: inline-flex; align-items: center; gap: .5rem; border: 2px solid #fff; color: #fff; padding: .875rem 2rem; border-radius: .5rem; font-weight: 600; font-size: 1rem; transition: background .15s, color .15s; }
.btn-outline:hover { background: #fff; color: var(--navy); }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 24rem; }
.stat-item { text-align: center; }
.stat-icon { width: 1.5rem; height: 1.5rem; color: var(--teal); margin: 0 auto .25rem; }
.stat-value { font-size: 1.5rem; font-weight: 800; color: #fff; }
.stat-label { font-size: .75rem; color: #94a3b8; }

/* Video card */
.hero-video-wrap { display: flex; justify-content: center; }
@media (min-width: 1024px) { .hero-video-wrap { justify-content: flex-end; } }
.hero-video-card { position: relative; width: 100%; max-width: 28rem; }
.hero-video-glow { position: absolute; inset: -.25rem; border-radius: 1rem; background: linear-gradient(135deg, var(--teal), var(--sky-lt)); opacity: .4; filter: blur(12px); }
.hero-video-inner { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
.hero-video-inner video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.hero-video-badge { position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--navy); font-size: .75rem; font-weight: 700; padding: .375rem 1rem; border-radius: 9999px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Hero wave */
.hero-wave { position: absolute; bottom: 0; left: 0; right: 0; }
.hero-wave svg { display: block; }

/* ── Section shared ───────────────────────────────────────── */
.section { padding: 5rem 1.5rem; }
.section-inner { max-width: 1280px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-badge { display: inline-block; background: #e0f7fa; color: var(--teal); border: 1px solid var(--teal); font-size: .8125rem; padding: .25rem .75rem; border-radius: 9999px; margin-bottom: .75rem; font-weight: 500; }
.section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--navy); margin-bottom: 1rem; }
.section-subtitle { font-size: 1.0625rem; color: #64748b; max-width: 36rem; margin: 0 auto; }

/* ── Services grid ────────────────────────────────────────── */
#services { background: #fff; }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { border: 1px solid #f1f5f9; border-radius: 1rem; padding: 1.5rem; background: #fff; transition: box-shadow .2s; }
.service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.service-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.service-icon { padding: .75rem; border-radius: .75rem; display: flex; }
.service-icon svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.service-icon.navy { background: var(--navy); }
.service-icon.teal  { background: var(--teal); }
.service-badge { font-size: .6875rem; padding: .2rem .6rem; border-radius: 9999px; font-weight: 600; }
.service-badge.blue  { background: #dbeafe; color: #1d4ed8; }
.service-badge.cyan  { background: #cffafe; color: #0e7490; }
.service-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: .625rem; transition: color .15s; }
.service-card:hover h3 { color: var(--teal); }
.service-card p { font-size: .875rem; color: #64748b; line-height: 1.6; margin-bottom: 1rem; }
.service-bullets { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.service-bullets li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: #475569; }
.service-bullets li::before { content: ''; width: 1rem; height: 1rem; background: var(--teal); border-radius: 50%; flex-shrink: 0; margin-top: .2rem; display: block; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── Benefits ─────────────────────────────────────────────── */
#benefits { background: #f8fafc; }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px)  { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } }
.benefit-card { background: #fff; border-radius: 1rem; padding: 1.5rem; border: 1px solid #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,.04); transition: box-shadow .2s; }
.benefit-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.benefit-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.benefit-icon svg { width: 1.5rem; height: 1.5rem; color: #fff; }
.benefit-icon.navy { background: var(--navy); }
.benefit-icon.teal  { background: var(--teal); }
.benefit-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.benefit-card p { font-size: .875rem; color: #64748b; line-height: 1.6; }
.benefits-quote { background: var(--navy); border-radius: 1rem; padding: 2.5rem; text-align: center; }
.benefits-quote-mark { font-size: 3rem; color: var(--teal); line-height: 1; margin-bottom: 1rem; }
.benefits-quote blockquote { font-size: 1.1875rem; color: #fff; font-style: italic; line-height: 1.7; max-width: 48rem; margin: 0 auto 1.5rem; }
.benefits-quote cite { font-size: .875rem; color: #94a3b8; font-style: normal; }

/* ── Testimonials ─────────────────────────────────────────── */
#testimonials { background: #fff; }
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px)  { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.testimonial-card:hover { border-color: rgba(8,145,178,.3); box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.quote-icon { color: rgba(8,145,178,.3); margin-bottom: 1rem; }
.quote-icon svg { width: 2rem; height: 2rem; }
.testimonial-card p { font-size: .875rem; color: #475569; line-height: 1.7; font-style: italic; flex: 1; margin-bottom: 1.5rem; }
.testimonial-author { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.author-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 700; flex-shrink: 0; }
.author-name { font-weight: 600; color: var(--navy); font-size: .875rem; }
.author-meta { font-size: .75rem; color: #64748b; }

/* ── Blog preview ─────────────────────────────────────────── */
#blog { background: var(--navy); padding: 5rem 1.5rem; }
.blog-preview-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; }
.blog-preview-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .blog-preview-cards { grid-template-columns: repeat(3, 1fr); } }
.blog-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; transition: background .2s, border-color .2s; }
.blog-card:hover { background: rgba(255,255,255,.1); border-color: rgba(8,145,178,.5); }
.blog-card-accent { height: .5rem; background: linear-gradient(to right, rgba(8,145,178,.3), var(--navy)); }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-emoji { font-size: 2rem; margin-bottom: 1rem; }
.blog-card-cat { display: inline-block; background: rgba(8,145,178,.2); color: #38bdf8; border: 1px solid rgba(8,145,178,.3); font-size: .6875rem; padding: .2rem .6rem; border-radius: 9999px; font-weight: 500; margin-bottom: .75rem; }
.blog-card h3 { font-size: 1.0625rem; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: .75rem; flex: 1; transition: color .15s; }
.blog-card:hover h3 { color: #38bdf8; }
.blog-card p { font-size: .875rem; color: #94a3b8; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-meta { font-size: .75rem; color: #64748b; margin-bottom: 1rem; }
.blog-card-link { font-size: .875rem; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: .25rem; }
.blog-card:hover .blog-card-link { gap: .5rem; }
.view-all-btn { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #475569; color: #fff; padding: .5rem 1.25rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; transition: background .15s; }
.view-all-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── FAQ ──────────────────────────────────────────────────── */
#faq { background: #fff; padding: 5rem 1.5rem; }
.faq-inner { max-width: 48rem; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { border: 1px solid #e2e8f0; border-radius: .75rem; overflow: hidden; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; text-align: left; background: none; border: none; cursor: pointer; transition: background .1s; }
.faq-question:hover { background: #f8fafc; }
.faq-question span { font-weight: 600; color: var(--navy); padding-right: 1rem; }
.faq-chevron { width: 1.25rem; height: 1.25rem; color: var(--teal); flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-inner { padding: 0 1.25rem 1.25rem; color: #475569; line-height: 1.7; border-top: 1px solid #f1f5f9; padding-top: 1rem; }

/* ── Contact form ─────────────────────────────────────────── */
#contact-form { background: #f8fafc; padding: 5rem 1.5rem; }
.contact-inner { max-width: 48rem; margin: 0 auto; }
.form-card { background: #fff; border-radius: 1rem; border: 1px solid #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: 2rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .form-grid.two-col { grid-template-columns: repeat(2, 1fr); } }
.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-label { font-size: .875rem; font-weight: 600; color: var(--navy); }
.form-input, .form-select, .form-textarea { width: 100%; padding: .5rem .75rem; border: 1px solid #e2e8f0; border-radius: .5rem; font-size: .875rem; color: #1e293b; background: #fff; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,145,178,.15); }
.form-textarea { resize: none; }
.form-submit { width: 100%; background: var(--teal); color: #fff; border: none; padding: .875rem; border-radius: .5rem; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: background .15s; }
.form-submit:hover { background: var(--teal-h); }
.form-submit:disabled { opacity: .6; cursor: not-allowed; }
.form-footer { text-align: center; font-size: .75rem; color: #94a3b8; margin-top: .75rem; }
.form-footer a { color: var(--teal); font-weight: 600; }
.form-error { display: flex; align-items: flex-start; gap: .75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: .75rem; padding: 1rem; margin-bottom: 1rem; font-size: .875rem; color: #b91c1c; }
.form-success { background: #fff; border: 1px solid #bbf7d0; border-radius: 1rem; padding: 3rem; text-align: center; }
.form-success-icon { font-size: 4rem; margin-bottom: 1rem; }
.form-success h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.form-success p { color: #64748b; }

/* ── CTA section ──────────────────────────────────────────── */
#cta { background: var(--navy); padding: 5rem 1.5rem; }
.cta-inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.cta-inner h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: #fff; margin-bottom: 1rem; }
.cta-inner .cta-sub { font-size: 1.25rem; color: var(--sky-lt); margin-bottom: .75rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.cta-note { font-size: .9375rem; color: #94a3b8; margin-bottom: 2.5rem; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 3.5rem; }
.cta-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .cta-cards { grid-template-columns: repeat(4, 1fr); } }
.cta-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.25rem; transition: background .15s; text-align: center; }
.cta-card:hover { background: rgba(255,255,255,.1); }
.cta-card svg { width: 1.5rem; height: 1.5rem; color: var(--teal); margin: 0 auto .5rem; }
.cta-card-label { font-size: .75rem; color: #94a3b8; margin-bottom: .25rem; }
.cta-card-value { font-size: .875rem; font-weight: 600; color: #fff; word-break: break-all; }
.cta-card-value a { color: #fff; }
.cta-card-value a:hover { color: var(--sky-lt); }

/* ── Site footer ──────────────────────────────────────────── */
.site-footer { background: #0f172a; color: #94a3b8; padding: 2rem 1.5rem; text-align: center; font-size: .875rem; }
.site-footer img { height: 3rem; width: auto; object-fit: contain; margin: 0 auto 1rem; display: block; opacity: .9; }
.site-footer strong { color: #fff; }
.site-footer a { color: var(--teal); }
.site-footer a:hover { color: #fff; }
.footer-copy { font-size: .75rem; color: #475569; margin-top: .5rem; }

/* ── Blog archive ─────────────────────────────────────────── */
.blog-page-hero { background: var(--navy); padding: 4rem 1.5rem; text-align: center; }
.blog-page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; margin-bottom: .75rem; }
.blog-page-hero p { color: #94a3b8; font-size: 1.0625rem; max-width: 36rem; margin: 0 auto; }
.blog-archive { background: #f8fafc; min-height: 60vh; padding: 3.5rem 1.5rem; }
.blog-archive-inner { max-width: 1280px; margin: 0 auto; }
.blog-featured { margin-bottom: 3rem; }
.blog-featured-card { background: #fff; border: 1px solid #f1f5f9; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.04); display: grid; }
@media (min-width: 768px) { .blog-featured-card { grid-template-columns: 1fr 1fr; } }
.blog-featured-img { background: linear-gradient(135deg, var(--navy), var(--teal)); min-height: 15rem; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
.blog-featured-img span { font-size: 4rem; }
.blog-featured-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-badge { display: inline-block; background: #e0f7fa; color: var(--teal); border: 1px solid var(--teal); font-size: .75rem; padding: .2rem .6rem; border-radius: 9999px; font-weight: 500; margin-bottom: .75rem; }
.featured-tag { display: inline-block; background: rgba(8,145,178,.15); color: var(--teal); font-size: .6875rem; padding: .2rem .6rem; border-radius: 9999px; margin-left: .5rem; }
.blog-featured-body h2 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); font-weight: 800; color: var(--navy); margin-bottom: .75rem; line-height: 1.3; }
.blog-featured-body h2:hover { color: var(--teal); }
.blog-featured-body p { color: #64748b; font-size: .9375rem; margin-bottom: 1.25rem; line-height: 1.7; }
.blog-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .blog-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-cards-grid { grid-template-columns: repeat(3, 1fr); } }
.archive-card { background: #fff; border: 1px solid #f1f5f9; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.04); display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s; }
.archive-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); border-color: rgba(8,145,178,.3); }
.archive-card-img { background: linear-gradient(135deg, var(--navy), #164e8e); height: 9rem; display: flex; align-items: center; justify-content: center; }
.archive-card-img span { font-size: 3rem; }
.archive-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.archive-card-cat { display: inline-block; background: #e0f7fa; color: var(--teal); border: 1px solid var(--teal); font-size: .6875rem; padding: .2rem .6rem; border-radius: 9999px; font-weight: 500; margin-bottom: .75rem; }
.archive-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; line-height: 1.4; flex: 1; }
.archive-card:hover h3 { color: var(--teal); }
.archive-card p { font-size: .875rem; color: #64748b; line-height: 1.6; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { font-size: .75rem; color: #94a3b8; margin-bottom: 1rem; }
.read-more { font-size: .875rem; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: .25rem; }

/* ── Single post ──────────────────────────────────────────── */
.post-hero { background: var(--navy); padding: 3.5rem 1.5rem; }
.post-hero-inner { max-width: 48rem; margin: 0 auto; }
.back-link { display: inline-flex; align-items: center; gap: .375rem; color: #38bdf8; font-size: .875rem; margin-bottom: 1.5rem; transition: color .15s; }
.back-link:hover { color: #fff; }
.post-hero h1 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 1.25rem; }
.post-meta-row { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .875rem; color: #94a3b8; align-items: center; }
.post-main { padding: 3.5rem 1.5rem; background: #fff; }
.post-content { max-width: 48rem; margin: 0 auto; }
.post-content p { color: #374151; line-height: 1.85; margin-bottom: 1.25rem; font-size: 1.05rem; }
.post-cta-box { margin-top: 3rem; background: var(--navy); border-radius: 1rem; padding: 2rem; text-align: center; }
.post-cta-box h3 { font-size: 1.375rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.post-cta-box p { color: #94a3b8; margin-bottom: 1.5rem; }
.post-cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.more-posts { background: #f8fafc; padding: 3.5rem 1.5rem; }
.more-posts-inner { max-width: 48rem; margin: 0 auto; }
.more-posts h2 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 2rem; }
.more-posts-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .more-posts-grid { grid-template-columns: repeat(2, 1fr); } }
.more-post-card { background: #fff; border: 1px solid #f1f5f9; border-radius: .75rem; padding: 1.25rem; transition: border-color .15s, box-shadow .15s; }
.more-post-card:hover { border-color: rgba(8,145,178,.4); box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.more-post-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: .75rem; }
.more-post-card:hover h3 { color: var(--teal); }
.more-posts-all { text-align: center; margin-top: 2rem; }
.more-posts-all a { color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }

/* ── Utility ──────────────────────────────────────────────── */
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

@media (max-width: 640px) {
  .topbar-link span, .topbar-sep { display: none; }
  .topbar-link { padding: .25rem .25rem; }
}

/* ── Generic page (page.php / page-services.php) ─────────────
   Reuses the site's navy hero-banner language (same visual family
   as .blog-page-hero / .post-hero) and the post-content typography
   scale, so every non-blog page matches the rest of the site. ── */
.page-hero { background: var(--navy); padding: 3.5rem 1.5rem; text-align: center; }
.page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #fff; margin-top: .75rem; }
.page-content-wrap { max-width: 48rem; margin: 0 auto; }
.page-content { color: #374151; line-height: 1.85; font-size: 1.05rem; }
.page-content p { margin-bottom: 1.25rem; }
.page-content h2 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin: 2rem 0 .75rem; }
.page-content h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin: 1.5rem 0 .5rem; }
.page-content a { color: var(--teal); text-decoration: underline; }
.page-content ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.page-content ul li { font-size: 1rem; color: #334155; display: flex; align-items: flex-start; gap: .6rem; }
.page-content ul li::before { content: "✓"; color: var(--teal); font-weight: 700; flex-shrink: 0; }
/* Parent "Services" index page: its list is plain links, not a feature checklist */
.page-content ul.services-index li { display: block; }
.page-content ul.services-index li::before { content: none; }
.page-content ul.services-index li a { color: var(--teal); text-decoration: none; font-weight: 600; }
.page-content ul.services-index li a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   SERVICE DETAIL PAGE (page-services.php)
   Exact replica of the static site's /services/[slug] page design.
   ═══════════════════════════════════════════════════════════════ */

.svc-hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding: 5rem 1.5rem 6rem; }
.svc-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 40px 40px; pointer-events: none; }
.svc-hero-accent { position: absolute; top: 0; left: 0; right: 0; height: .25rem; background: var(--teal); }
.svc-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.svc-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .875rem; }
.svc-breadcrumb a { color: #94a3b8; transition: color .15s; }
.svc-breadcrumb a:hover { color: #fff; }
.svc-breadcrumb .svc-sep { color: #475569; }
.svc-breadcrumb .svc-current { color: var(--sky-lt); }
.svc-icon { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.svc-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.2; margin: 0 0 1rem; max-width: 48rem; }
.svc-tagline { font-size: 1.375rem; color: var(--sky-lt); font-style: italic; margin-bottom: 1.25rem; }
.svc-desc { font-size: 1.125rem; color: #cbd5e1; line-height: 1.7; max-width: 42rem; margin-bottom: 2rem; }
.svc-hero .hero-wave { position: absolute; bottom: -1px; left: 0; right: 0; }

.svc-features { padding: 5rem 1.5rem; background: #fff; }
.svc-features-inner { max-width: 1280px; margin: 0 auto; }
.svc-features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px)  { .svc-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-features-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-feature-card { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 1rem; padding: 1.5rem; transition: box-shadow .2s; }
.svc-feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.svc-feature-icon { font-size: 1.875rem; margin-bottom: .75rem; }
.svc-feature-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.svc-feature-card p { font-size: .875rem; color: #64748b; line-height: 1.6; }

.svc-split { padding: 5rem 1.5rem; background: #f8fafc; }
.svc-split-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .svc-split-inner { grid-template-columns: repeat(2, 1fr); } }
.svc-split h2 { font-size: 1.75rem; font-weight: 800; color: var(--navy); margin-bottom: 1.5rem; }
.svc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.svc-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: 1rem; color: #334155; line-height: 1.5; }
.svc-list .svc-list-icon { flex-shrink: 0; margin-top: .15rem; width: 1.25rem; height: 1.25rem; color: var(--teal); }

.svc-other { padding: 4rem 1.5rem; background: #fff; }
.svc-other-inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.svc-other h3 { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin-bottom: 1.5rem; }
.svc-chips { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.svc-chip { background: #f1f5f9; color: #334155; padding: .5rem 1.25rem; border-radius: 9999px; font-size: .875rem; font-weight: 600; transition: background .15s, color .15s; text-decoration: none; }
.svc-chip:hover { background: #e0f7fa; color: var(--teal); }

/* ── Services index page (page-services-index.php, the "Services" parent) ── */
.svc-index-grid { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1rem; }