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

:root {
    --primary: #1a3a5c;
    --primary-dark: #0f2740;
    --accent: #2d8cf0;
    --accent-hover: #1a6fd4;
    --accent-light: #e8f2ff;
    --text: #1a1a2e;
    --text-light: #555;
    --text-muted: #888;
    --bg: #ffffff;
    --bg-alt: #f7f9fc;
    --bg-dark: #0f1923;
    --border: #e2e8f0;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.3s ease;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    line-height: 1.7;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 700;
}

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

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}

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

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(45, 140, 240, 0.35);
}

/* Default to the light-surface treatment. This button used to be white-on-
   transparent because the only place it appeared was the dark hero; it now
   appears on white cards far more often than on dark ones, where white text on
   a white card is an invisible button. Dark containers opt back in below. */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--border);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Dark surfaces: hero, interior page hero, the lead-magnet band and the
   gradient CTA sections. Add any new dark container here as well. */
.hero .btn-outline,
.cta-section .btn-outline,
.cta-band .btn-outline,
.magnet .btn-outline,
.aside-dark .btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.hero .btn-outline:hover,
.cta-section .btn-outline:hover,
.cta-band .btn-outline:hover,
.magnet .btn-outline:hover,
.aside-dark .btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
}

.btn-nav {
    background: var(--accent);
    color: #fff;
    padding: 10px 24px;
    font-size: 0.9rem;
}

.btn-nav:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-lg {
    padding: 16px 36px;
    font-size: 1.05rem;
}

.btn-full {
    width: 100%;
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: all var(--transition);
    background: transparent;
}

.navbar.scrolled {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    padding: 12px 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.navbar.scrolled .logo {
    color: var(--primary-dark);
}

.logo-icon {
    color: var(--accent);
    font-size: 1.5rem;
}

.logo-accent {
    font-weight: 400;
    opacity: 0.8;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    color: rgba(255,255,255,0.85);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color var(--transition);
}

.nav-links a:hover {
    color: #fff;
}

.navbar.scrolled .nav-links a {
    color: var(--text-light);
}

.navbar.scrolled .nav-links a:hover {
    color: var(--primary-dark);
}

.navbar.scrolled .btn-nav {
    color: #fff;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all var(--transition);
}

.navbar.scrolled .nav-toggle span {
    background: var(--text);
}

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0f2740 0%, #1a3a5c 40%, #1e4d7a 70%, #2d6da8 100%);
    z-index: 0;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(45, 140, 240, 0.15);
    border: 1px solid rgba(45, 140, 240, 0.3);
    border-radius: 50px;
    color: #7bb8f5;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.text-gradient {
    background: linear-gradient(135deg, #7bb8f5, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.75);
    max-width: 640px;
    margin-bottom: 36px;
    line-height: 1.8;
}

.hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: 48px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

/* ===== TRUST BAR ===== */
.trust-bar {
    padding: 20px 0;
    background: var(--accent-light);
    text-align: center;
}

.trust-text {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ===== SECTIONS ===== */
.section {
    padding: 100px 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 640px;
    margin: 0 auto;
}

/* ===== SERVICES GRID ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    transition: all var(--transition);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.service-icon {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--primary-dark);
}

.service-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.card-link {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.card-link:hover {
    color: var(--accent-hover);
}

/* ===== EXPERTISE GRID ===== */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.expertise-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    transition: all var(--transition);
}

.expertise-card:hover {
    box-shadow: var(--shadow);
}

.expertise-card h4 {
    font-size: 1.05rem;
    color: var(--primary-dark);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent);
}

.expertise-card ul {
    list-style: none;
}

.expertise-card li {
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--text-light);
    position: relative;
    padding-left: 18px;
}

.expertise-card li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

/* ===== PROCESS ===== */
.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 48px;
}

.process-step {
    text-align: center;
    max-width: 300px;
    padding: 0 24px;
}

.step-number {
    width: 56px;
    height: 56px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 auto 20px;
}

.process-step h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.process-step p {
    font-size: 0.95rem;
    color: var(--text-light);
}

.process-connector {
    width: 80px;
    height: 2px;
    background: var(--border);
    margin-top: 28px;
    flex-shrink: 0;
}

.process-cta {
    text-align: center;
}

/* ===== INDUSTRIES ===== */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.industry-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    transition: all var(--transition);
}

.industry-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.industry-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.industry-card h4 {
    font-size: 1.05rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.industry-card p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ===== ABOUT ===== */
.about-layout {
    max-width: 800px;
    margin: 0 auto;
}

.about-content .section-tag {
    display: inline-block;
    margin-bottom: 16px;
}

.about-content h2 {
    font-size: 2.2rem;
    color: var(--primary-dark);
    margin-bottom: 24px;
}

.about-content p {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.highlight {
    padding: 20px;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.highlight strong {
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.highlight span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    transition: all var(--transition);
}

.testimonial-card:hover {
    box-shadow: var(--shadow);
}

.stars {
    color: #f5a623;
    font-size: 1.1rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.testimonial-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.7;
}

.testimonial-author strong {
    display: block;
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.testimonial-author span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* ===== BLOG ===== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

.blog-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.blog-category {
    display: inline-block;
    padding: 4px 14px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 16px;
    align-self: flex-start;
}

.blog-card h3 {
    font-size: 1.1rem;
    color: var(--primary-dark);
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-card h3 a {
    color: var(--primary-dark);
    transition: color var(--transition);
}

.blog-card h3 a:hover {
    color: var(--accent);
}

.blog-card > p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 16px;
    flex-grow: 1;
}

.blog-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.blog-date,
.blog-read {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-download:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(45, 140, 240, 0.3);
}

.blog-cta {
    text-align: center;
}

/* ===== CTA / CONTACT ===== */
.cta-section {
    background: linear-gradient(135deg, #0f2740 0%, #1a3a5c 50%, #2d6da8 100%);
    color: #fff;
}

.cta-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.cta-content h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 16px;
}

.cta-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.75);
    margin-bottom: 24px;
}

.cta-benefits {
    list-style: none;
}

.cta-benefits li {
    padding: 8px 0;
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
}

.cta-form-wrapper {
    background: #fff;
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.contact-form h3 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 24px;
    text-align: center;
}

.form-group {
    margin-bottom: 16px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg-alt);
    transition: all var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 140, 240, 0.1);
    background: #fff;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 12px;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--bg-dark);
    color: rgba(255,255,255,0.7);
    padding: 60px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand .logo {
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-links h4 {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    transition: all var(--transition);
}

.social-link:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    text-align: center;
    font-size: 0.85rem;
}

/* ===== DOWNLOAD GATE MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 25, 35, 0.7);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 44px 40px 36px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    position: relative;
    animation: modalSlideIn 0.35s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color var(--transition);
}

.modal-close:hover {
    color: var(--text);
}

.modal-icon {
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 8px;
}

.modal-card h3 {
    font-size: 1.35rem;
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 8px;
}

.modal-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
}

.modal-form .form-group {
    margin-bottom: 14px;
}

.modal-form .form-note {
    margin-top: 10px;
}

.modal-success {
    text-align: center;
    padding: 20px 0;
}

.modal-success .success-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.modal-success h3 {
    color: #22c55e;
    margin-bottom: 8px;
}

.modal-success p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== EMAIL VALIDATION FEEDBACK ===== */
.email-feedback {
    display: block;
    font-size: 0.78rem;
    margin-top: 4px;
    min-height: 18px;
    transition: all var(--transition);
}

.email-feedback.valid {
    color: #22c55e;
}

.email-feedback.invalid {
    color: #ef4444;
}

.form-group input.email-valid {
    border-color: #22c55e;
}

.form-group input.email-invalid {
    border-color: #ef4444;
}

/* Make btn-download work as a button element too */
button.btn-download {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .services-grid,
    .testimonials-grid,
    .industries-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 280px;
        background: var(--primary-dark);
        flex-direction: column;
        padding: 80px 32px 32px;
        gap: 0;
        transition: right var(--transition);
        box-shadow: -4px 0 20px rgba(0,0,0,0.2);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 14px 0;
        color: rgba(255,255,255,0.85) !important;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .nav-links .btn-nav {
        margin-top: 16px;
        text-align: center;
        border-bottom: none;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .hero-stats {
        gap: 24px;
    }

    .stat-number {
        font-size: 1.6rem;
    }

    .section {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 1.9rem;
    }

    .services-grid,
    .testimonials-grid,
    .industries-grid,
    .expertise-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .cta-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-highlights {
        grid-template-columns: 1fr;
    }

    .process-steps {
        flex-direction: column;
        align-items: center;
    }

    .process-connector {
        width: 2px;
        height: 40px;
        margin: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.9rem;
    }

    .cta-form-wrapper {
        padding: 24px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    .modal-card {
        padding: 32px 24px 28px;
    }

    .blog-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================================
   UNIFIED SITE — components added for the multi-page build.
   Everything below reuses the :root custom properties above, so the palette
   stays in one place. Ordered: navigation → interior pages → homepage
   sections → forms.
   ========================================================================= */

/* ===== DROPDOWN NAVIGATION =====
   The nav grew from six flat anchors to five topics with children, which is
   what makes a service page reachable without going through the homepage.
   Hover opens it on a pointer; a tap opens it on touch, where :hover would
   otherwise latch on first tap and swallow the second. initNavDropdowns() in
   lead-capture.js adds .open — every page loads that file, so the blog and
   the service pages get the same menu without duplicating the handler. */
.nav-links li.has-dropdown { position: relative; }

.nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
    padding: 0;
    /* Buttons do not inherit the .nav-links a colour, and `inherit` here picks
       up the near-black body text — invisible over the dark hero. Match the
       sibling links explicitly instead, in every navbar state. */
    color: rgba(255,255,255,0.85);
    transition: color var(--transition);
}

.nav-trigger:hover,
.has-dropdown.open > .nav-trigger {
    color: #fff;
}

.navbar.scrolled .nav-trigger {
    color: var(--text-light);
}

.navbar.scrolled .nav-trigger:hover,
.navbar.scrolled .has-dropdown.open > .nav-trigger {
    color: var(--primary-dark);
}

.nav-trigger::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
}

.has-dropdown.open > .nav-trigger::after { transform: rotate(-135deg) translateY(-2px); }

.dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 268px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 200;
}

/* A gap between the trigger and the panel would close the menu as the pointer
   crossed it, so the panel carries an invisible bridge instead of sitting flush. */
.dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.has-dropdown:hover > .dropdown,
.has-dropdown.open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown li { display: block; }

.dropdown a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

.dropdown a:hover { background: var(--accent-light); color: var(--accent); }
.dropdown a.active { color: var(--accent); font-weight: 600; }

.dropdown .dropdown-note {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.dropdown a:hover .dropdown-note { color: var(--accent); }

/* Mobile: the slide-in panel is a dark column, so the dropdown becomes an
   accordion inside it rather than a floating white card off the screen edge. */
@media (max-width: 768px) {
    .nav-trigger {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 14px 0;
        color: rgba(255,255,255,0.85);
        font-size: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .dropdown {
        position: static;
        transform: none;
        min-width: 0;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 14px;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .dropdown::before { content: none; }

    /* Hover does not exist here, so only the tap-driven .open reveals it —
       without this the panel would be permanently expanded. */
    .has-dropdown:hover > .dropdown { display: none; }
    .has-dropdown.open > .dropdown { display: block; transform: none; }

    .dropdown a {
        color: rgba(255,255,255,0.7) !important;
        padding: 11px 0;
        font-size: 0.92rem;
    }

    .dropdown a:hover { background: none; color: #fff !important; }
    .dropdown .dropdown-note { display: none; }
}

/* ===== INTERIOR PAGE HERO =====
   Service, about and contact pages open on a compact solid-navy band rather
   than the homepage's full-height hero: the visitor arrived with a question,
   not to be sold the brand a second time. */
.page-hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: #fff;
    padding: 150px 0 72px;
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,140,240,0.25) 0%, transparent 68%);
    pointer-events: none;
}

.page-hero-inner { max-width: 820px; position: relative; z-index: 1; }

.page-hero h1 {
    font-size: 2.9rem;
    margin: 14px 0 18px;
    letter-spacing: -0.02em;
}

.page-hero .lede {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.86);
    max-width: 720px;
}

.page-hero .btn-outline {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

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

.page-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.breadcrumb {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.breadcrumb a { color: rgba(255,255,255,0.8); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

/* ===== SERVICE PAGE LAYOUT =====
   Long-form answer on the left, a CTA panel that follows the reader on the
   right. The panel is sticky because these pages are long and the decision to
   make contact is usually reached partway down, not at the end. */
.svc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
    align-items: start;
}

.svc-aside { position: sticky; top: 104px; display: grid; gap: 20px; }

.aside-card {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
}

.aside-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.aside-card p { font-size: 0.92rem; color: var(--text-light); margin-bottom: 18px; }

.aside-card.aside-dark {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    border-color: transparent;
    color: #fff;
}

.aside-card.aside-dark p { color: rgba(255,255,255,0.82); }

.aside-list { list-style: none; display: grid; gap: 9px; }

.aside-list a {
    font-size: 0.9rem;
    color: var(--text-light);
    display: block;
    padding-left: 16px;
    position: relative;
}

.aside-list a::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.aside-list a:hover { color: var(--accent); }
.aside-list a[aria-current="page"] { color: var(--primary); font-weight: 600; }

/* ===== PROSE =====
   Body copy for the service, about and guide pages. */
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 1.75rem; margin-top: 52px; letter-spacing: -0.01em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.18rem; margin-top: 34px; }
.prose p { color: var(--text-light); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 22px; color: var(--text-light); }
.prose li + li { margin-top: 8px; }
.prose ul li::marker { color: var(--accent); }
.prose a:not(.btn) { color: var(--accent); font-weight: 500; }
.prose a:not(.btn):hover { text-decoration: underline; }

.prose .callout {
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 20px 24px;
    color: var(--text);
}

.prose .callout p { color: var(--text); }
.prose .callout > * + * { margin-top: 12px; }

/* ===== TAG LIST =====
   Material systems, process areas and industrial sectors. Chips rather than
   prose because these are scanned for a match, not read. */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }

.tag-list li {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 15px;
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
}

/* ===== FAQ ===== */
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 24px;
    background: #fff;
}

.faq-item + .faq-item { margin-top: 12px; }

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 32px 20px 0;
    font-weight: 600;
    position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 17px;
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 1;
}

.faq-item[open] summary::after { content: "\2013"; }
.faq-item > p, .faq-item > ul { color: var(--text-light); padding-bottom: 22px; }
.faq-item > ul { padding-left: 22px; }

/* ===== PROBLEM SECTION =====
   The visitor self-identifies here before any service is named, which is why
   it sits directly under the hero. */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.problem-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 24px 26px;
}

.problem-card h4 { font-size: 1.02rem; margin-bottom: 8px; }
.problem-card p { font-size: 0.93rem; color: var(--text-light); }

/* ===== PRINCIPAL / CREDIBILITY ===== */
.principal-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 10px 18px 10px 12px;
    border-radius: 100px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.88);
}

.principal-line .pl-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cred-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.cred-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
}

.cred-card strong { display: block; font-size: 0.98rem; margin-bottom: 5px; }
.cred-card span { font-size: 0.88rem; color: var(--text-light); }

.bio-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.bio-card {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 32px 28px;
    position: sticky;
    top: 104px;
}

/* Geometry belongs on .bio-mark itself, not on `.bio-card .bio-mark`. Scoping
   it to the bio card meant the expert-witness rail — same markup, but inside
   .aside-card — inherited no width, height or radius, so the absolutely
   positioned portrait stretched to the full column at one line-height and
   rendered as a letterboxed strip instead of a face. */
.bio-mark {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.bio-card h3 { font-size: 1.2rem; line-height: 1.35; }
.bio-card .bio-post { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-top: 10px; }
.bio-card .bio-letters { font-size: 0.82rem; color: var(--accent); font-weight: 600; margin-top: 4px; }

.bio-card ul {
    list-style: none;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.16);
    display: grid;
    gap: 11px;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.82);
}

/* ===== WHY FLANEY ===== */
.why-list { list-style: none; display: grid; gap: 16px; }

.why-list li {
    position: relative;
    padding-left: 34px;
    color: var(--text-light);
}

.why-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.why-list li strong { display: block; color: var(--text); }

/* ===== LEAD MAGNET BAND ===== */
.magnet {
    background: var(--primary-dark);
    color: #fff;
    border-radius: var(--radius);
    padding: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: center;
}

.magnet h2 { font-size: 1.9rem; letter-spacing: -0.01em; }
.magnet p { color: rgba(255,255,255,0.82); margin-top: 14px; }

.magnet ul {
    list-style: none;
    margin-top: 22px;
    display: grid;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.82);
}

.magnet ul li::before { content: "\2014"; color: var(--accent); margin-right: 10px; }

/* ===== AUDIENCE SPLIT (final CTA) =====
   Manufacturers and attorneys arrive with different first questions, so the
   closing call is two doors rather than one form. */
.audience-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

.audience-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.audience-card .audience-tag {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.audience-card h3 { font-size: 1.3rem; margin: 10px 0 12px; }
.audience-card p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 24px; flex: 1; }

/* ===== INTAKE FORM NOTES ===== */
.intake-note {
    background: #fff8ec;
    border: 1px solid #f0d9ae;
    border-radius: var(--radius-sm);
    padding: 15px 18px;
    font-size: 0.85rem;
    color: #7a5a1e;
    margin-bottom: 20px;
}

.intake-note strong { color: #5c4315; }

.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ===== RESPONSIVE (unified-site components) ===== */
@media (max-width: 1024px) {
    .svc-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .svc-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .bio-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .bio-card { position: static; }
    .magnet { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px; }
}

@media (max-width: 768px) {
    .page-hero { padding: 120px 0 56px; }
    .page-hero h1 { font-size: 2.1rem; }
    .page-hero .lede { font-size: 1.02rem; }
    .page-hero-cta .btn { width: 100%; }
    .magnet { padding: 30px 24px; }
    .magnet h2 { font-size: 1.55rem; }
    .prose h2 { font-size: 1.45rem; margin-top: 40px; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .principal-line { align-items: flex-start; border-radius: var(--radius); }
}

/* Four process steps rather than three: the flex row needs tighter connectors
   to stay inside the container, and a 2x2 grid below tablet width. */
.process-steps.steps-4 .process-step { padding: 0 14px; max-width: 270px; }
.process-steps.steps-4 .process-connector { width: 40px; }

@media (max-width: 1024px) {
    .process-steps.steps-4 { flex-wrap: wrap; gap: 32px 0; }
    .process-steps.steps-4 .process-step { flex: 0 0 50%; max-width: 50%; }
    .process-steps.steps-4 .process-connector { display: none; }
}

@media (max-width: 600px) {
    .process-steps.steps-4 .process-step { flex: 0 0 100%; max-width: 100%; }
}

/* The industry cards became links to the industries page — they were <div>s
   with a heading and nothing to click, which is exactly the dead end the rest
   of this rebuild removed. */
a.industry-card { display: block; color: inherit; }
a.industry-card:hover { border-color: var(--accent); }
a.industry-card:hover h4 { color: var(--accent); }

.blog-cta { margin-top: 40px; }

/* ===== FEATURED ARTICLE BAND =====
   Filled in by featured.js from content/featured/featured.json. Ships with the
   `hidden` attribute and is revealed only once real content lands in it, so a
   missing or unreadable file leaves no trace on the page. */
.featured-band[hidden] { display: none; }

.featured-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: center;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 32px 36px;
    margin-bottom: 48px;
}

.featured-band .featured-tag {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
}

.featured-band h3 { font-size: 1.32rem; line-height: 1.3; margin: 10px 0 12px; }
.featured-band h3 a:hover { color: var(--accent); }

.featured-band .featured-excerpt {
    color: var(--text-light);
    font-size: 0.95rem;
    border-left: 2px solid var(--border);
    padding-left: 16px;
}

.featured-band .featured-why {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin-top: 14px;
}

@media (max-width: 900px) {
    .featured-band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 24px; }
}

/* ===== FEATURED PAGE =====
   featured.html — the same JSON as the homepage band, given room to breathe.
   .featured-empty is the fallback the band does not need: hiding everything on
   a dedicated page would leave a blank page under a heading promising an
   article. */
.featured-page[hidden], .featured-empty[hidden] { display: none; }

.featured-page { max-width: 780px; margin: 0 auto; }

.featured-page h2 { font-size: 2.1rem; line-height: 1.25; margin: 12px 0 22px; }
.featured-page h2 a:hover { color: var(--accent); }

.featured-page .featured-excerpt {
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-light);
    border-left: 3px solid var(--accent);
    padding-left: 22px;
}

.featured-why-block {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-top: 32px;
}

.featured-why-block h3 { font-size: 1rem; margin-bottom: 8px; }
.featured-why-block p { color: var(--text-light); font-size: 0.95rem; }

.featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 24px;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.featured-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.featured-empty { max-width: 620px; margin: 0 auto; text-align: center; }
.featured-empty h2 { font-size: 1.7rem; margin-bottom: 12px; }
.featured-empty p { color: var(--text-light); margin-bottom: 26px; }

@media (max-width: 768px) {
    .featured-page h2 { font-size: 1.6rem; }
    .featured-page .featured-excerpt { font-size: 1rem; padding-left: 16px; }
    .featured-actions .btn { width: 100%; }
}

/* The band's label is the way into featured.html — the band itself sits two
   thirds of the way down the homepage, so it needs to lead somewhere. */
a.featured-tag:hover { text-decoration: underline; }

/* ===== PRINCIPAL HEADSHOT =====
   The photo sits inside the existing .bio-mark circle rather than replacing
   it. The initials stay in the markup underneath: if the image ever fails to
   load, `onerror` removes the <img> and the monogram shows through, so the
   card degrades to exactly what it looked like before the photo existed
   instead of to a broken-image icon.

   object-position is 20% rather than centre because the source is a 4:5
   head-and-shoulders portrait — centring it would crop the top of his head.
   Tuned by rendering the candidates; see CLAUDE.md. */
.bio-mark {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* The rail card is centre-aligned, but text-align does not centre a
   fixed-width block — it needs auto margins. Larger here than the 62px used
   elsewhere: counsel is reading this card to judge how he presents, and a
   face at 62px is a thumbnail rather than a portrait. */
.aside-card .bio-mark {
    width: 116px;
    height: 116px;
    font-size: 2.1rem;
    margin: 0 auto 6px;
}

.bio-mark img,
.pl-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
}

/* About gives it room: the page is about the person, so the portrait is the
   first thing in the card rather than a token beside the name. */
.bio-mark-lg {
    width: 140px;
    height: 140px;
    font-size: 2.4rem;
}

@media (max-width: 768px) {
    .bio-mark-lg { width: 112px; height: 112px; font-size: 2rem; }
}