/* ==========================================================================
   KYNVEA — Content Display System
   A restrained, technical "engineering spec sheet" aesthetic for content
   areas. Loaded last so it wins the cascade over legacy per-page styles.
   Header / navigation / footer are intentionally left untouched — nothing
   here targets .site-header, .site-nav, or .site-footer.
   ========================================================================== */

:root {
    --font-display: "Space Grotesk", var(--font-sans);
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ink: #0b1220;
    --paper: #fcfbf8;
    --line: #e2e5ee;
    --line-strong: #c7cce0;
}

/* -------------------- Typography -------------------- */

main h1,
main h2,
main h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--ink);
}

main h1 {
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

main h2 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

main h3 {
    font-weight: 600;
}

/* Signature label — the mono "spec sheet" eyebrow used throughout */
main .eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--primary);
    font-weight: 500;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

main .eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--accent);
}

/* -------------------- Hero (page-hero + home hero) -------------------- */

main .page-hero {
    background: var(--paper);
    padding: 5.5rem 0 4.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}

main .page-hero::before,
main .page-hero::after {
    content: none !important;
}

main .page-hero h1 {
    font-size: clamp(2.2rem, 3.4vw, 3rem);
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
    max-width: 34rem;
}

main .page-hero p {
    color: var(--muted);
    font-size: 1.08rem;
    max-width: 40rem;
    margin: 0;
    line-height: 1.65;
}

main .hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

main .hero-text h2 {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.12;
}

main .hero-card {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
    border-radius: 4px;
}

main .hero-card h2 {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-dark);
}

main .hero-card ul li {
    font-family: var(--font-sans);
}

/* -------------------- Section titles -------------------- */

main .services-title h2,
main .solutions-title h2,
main .section-title h2,
main .delivery-title h2,
main .assurance-title h2,
main .industry-title h2,
main .differentiators-title h2,
main .faq-title h2,
main .benefits-title h2,
main .section-header h2 {
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
}

main .services-title h2::after,
main .solutions-title h2::after,
main .section-title h2::after {
    content: none;
}

main .services-title,
main .solutions-title,
main .section-title,
main .delivery-title,
main .assurance-title,
main .industry-title,
main .differentiators-title,
main .faq-title,
main .benefits-title {
    text-align: left;
    max-width: 42rem;
    margin-bottom: 3rem;
}

main .services-section,
main .solutions-section {
    background: #fff;
}

main .services-title p,
main .solutions-title p,
main .section-title p {
    text-align: left;
    margin: 0;
}

/* -------------------- Spec cards --------------------
   Applies to every card family across the site: numbered index,
   hairline border, flat icon chip, restrained hover.
   ------------------------------------------------------ */

main .services-grid,
main .solutions-grid {
    counter-reset: spec-card;
}

main .service-card,
main .solution-card,
main .card {
    counter-increment: spec-card;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--line);
    box-shadow: none;
    padding: 2.25rem 2rem 2rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

main .service-card::before,
main .card::before {
    background: none;
}

main .service-card:hover,
main .solution-card:hover,
main .card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(11, 18, 32, 0.08);
    scale: 1;
}

main .services-grid .service-card::after,
main .solutions-grid .solution-card::after {
    content: counter(spec-card, decimal-leading-zero);
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
}

main .service-card,
main .solution-card {
    padding-top: 3.5rem;
}

main .service-icon,
main .solution-icon {
    width: 46px;
    height: 46px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: none;
    font-size: 1.3rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

main .service-card:hover .service-icon,
main .solution-card:hover .solution-icon {
    border-color: var(--accent);
    background: var(--primary-dark);
    transform: none;
}

main .service-card h3,
main .solution-card h3,
main .card h3 {
    font-size: 1.28rem;
    color: var(--ink);
}

main .service-features li::before,
main .solution-features li::before {
    content: "—";
    color: var(--primary);
}

main .card-icon-container {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: none;
}

main .card-icon-container::after {
    content: none;
}

main .card-icon {
    background: var(--primary-dark);
    width: 22px;
    height: 22px;
}

main .feature-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    border-radius: 3px;
}

/* NEW badge — reskinned as a spec-sheet flag, not a marketing pill */
main .badge-new {
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    box-shadow: none;
    top: 1.75rem;
    right: 1.75rem;
}

/* -------------------- Secondary panels --------------------
   assurance / delivery / industry / differentiator / content-block cards
   ------------------------------------------------------ */

main .assurance-card,
main .delivery-card,
main .industry-card,
main .differentiator-card,
main .content-block,
main .faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: none;
}

main .assurance-icon,
main .industry-icon,
main .differentiator-icon {
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: none;
    border-radius: 4px;
}

main .delivery-section,
main .assurance-section,
main .industry-section,
main .differentiators-section,
main .faq-section,
main .benefits-section,
main .values-container,
main .differentiators-container {
    background: var(--paper);
    border-radius: 4px;
    border: 1px solid var(--line);
}

/* -------------------- Section spacing -------------------- */
/* Several of the legacy sub-sections stacked their own large padding
   AND margin on top of .modern-section's own padding, producing large
   empty bands once backgrounds were flattened. Tighten uniformly. */

main .modern-section {
    padding: 3.5rem 0;
}

main .delivery-section,
main .assurance-section,
main .industry-section,
main .differentiators-section,
main .faq-section,
main .benefits-section,
main .values-container,
main .differentiators-container {
    padding: 2.75rem;
    margin: 0;
}

@media (max-width: 640px) {
    main .delivery-section,
    main .assurance-section,
    main .industry-section,
    main .differentiators-section,
    main .faq-section,
    main .benefits-section,
    main .values-container,
    main .differentiators-container {
        padding: 1.75rem;
    }
}

main .delivery-section::before {
    content: none;
}

main .highlight-box {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
}

/* -------------------- Stats -------------------- */

main .stats-modern {
    background: var(--ink);
    padding: 0;
}

main .stats-grid {
    display: flex !important;
    gap: 0;
    text-align: left;
    padding: 2.75rem 0;
}

main .stat-card {
    flex: 1;
    padding: 0 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

main .stat-card:first-child {
    border-left: none;
    padding-left: 0;
}

main .stat-card h3 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.9rem;
    color: #fff;
    margin: 0 0 0.4rem;
}

main .stat-card p {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

@media (max-width: 768px) {
    main .stats-grid {
        flex-wrap: wrap;
    }

    main .stat-card {
        flex: 1 1 45%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        padding: 1.25rem 0 0;
    }
}

/* -------------------- CTA -------------------- */

main .modern-cta {
    background: var(--ink);
    border-radius: 4px;
    margin: 0;
}

/* -------------------- Contact CTA band (home page) -------------------- */

main .section-cta {
    background: var(--ink);
    border-radius: 4px;
    padding-block: 3rem;
}

main .section-cta h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

main .section-cta-inner {
    align-items: flex-start;
    gap: 2.5rem;
}

main .section-cta-inner > div:first-child {
    max-width: 32rem;
    flex: 1 1 320px;
}

main .cta-actions {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    min-width: 240px;
}

main .cta-actions .btn {
    white-space: nowrap;
}

@media (max-width: 900px) {
    main .cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }
}

/* -------------------- Blog -------------------- */

main .blog-hero-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin: 1.5rem 0 0;
}

main .blog-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

main .blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

main .blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

main .blog-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 18, 32, 0.08);
}

main .blog-card .blog-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

main .blog-card h2,
main .blog-card h3 {
    font-size: 1.35rem;
    margin: 0;
}

main .blog-card p {
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

main .blog-card a.blog-read-more {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-decoration: none;
}

main .blog-card a.blog-read-more:hover {
    text-decoration: underline;
}

main .blog-post-body {
    max-width: 42rem;
    line-height: 1.75;
    color: var(--text);
}

main .blog-post-body h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
}

main .quick-answer {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 3px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

main .quick-answer p {
    margin: 0;
}

main .quick-answer .eyebrow {
    margin-bottom: 0.5rem;
}

main .blog-post-body p {
    margin-bottom: 1.25rem;
}

main .blog-post-body a {
    color: var(--primary);
}

main .blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 2rem;
}

/* -------------------- Form feedback -------------------- */

main .form-success-banner {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-left: 3px solid #16a34a;
    color: #166534;
    padding: 1rem 1.25rem;
    border-radius: 4px;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    main .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------- Motion & accessibility -------------------- */

@media (prefers-reduced-motion: reduce) {
    main .service-card,
    main .solution-card,
    main .card {
        transition: none;
    }
}

@media (max-width: 640px) {
    main .services-title,
    main .solutions-title,
    main .section-title {
        max-width: 100%;
    }
}