/*
 * Digitnetic typography system
 * One responsive scale for editorial content across the public website.
 * Poppins is used consistently across display, reading and UI text.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
    --font-display: "Poppins", sans-serif;
    --font-body: "Poppins", sans-serif;
    --fs-hero: clamp(2.25rem, calc(1.45rem + 3.35vw), 4rem);
    --fs-h1: clamp(2.125rem, calc(1.45rem + 2.8vw), 3.5rem);
    --fs-h2: clamp(1.75rem, calc(1.15rem + 2.1vw), 3rem);
    --fs-h3: clamp(1.1875rem, calc(1.05rem + .7vw), 1.5rem);
    --fs-body: clamp(.9375rem, calc(.9rem + .25vw), 1.125rem);
    --fs-small: clamp(.75rem, calc(.71rem + .16vw), .875rem);
    --fs-button: clamp(.875rem, calc(.83rem + .18vw), 1rem);
    --lh-display: 1.08;
    --lh-heading: 1.16;
    --lh-body: 1.68;
    --lh-small: 1.45;
    --tracking-label: .12em;
}

body { font-family: var(--font-body); font-weight: 400; }

/* One family across the public site; preserve icon-font declarations. */
body :is(a, p, span, small, strong, label, input, textarea, select, button, li, td, th, blockquote, figcaption):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.bi) {
    font-family: var(--font-body) !important;
}

body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
}

body :is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn, .cta-button, .hero-btn) {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
}

/* Shared content defaults. Dashboard and data-visualisation labels remain local. */
:is(.home-page, .about-page, .services-page, .service-detail-page,
    .case-studies-page-body, .digitnetic-blog-page, .digitnetic-contact-page,
    .service-architecture, .legacy-page) :is(h1, h2, h3) {
    font-family: var(--font-display) !important;
}

/* Legacy individual article template. */
.post-header h1 {
    font-family: var(--font-display) !important;
    font-size: var(--fs-hero) !important;
    font-weight: 800 !important;
    line-height: var(--lh-display) !important;
}
.post-content :is(h2, h3) {
    font-family: var(--font-display) !important;
    line-height: var(--lh-heading) !important;
}
.post-content h2 { font-size: var(--fs-h2) !important; font-weight: 700 !important; }
.post-content h3 { font-size: var(--fs-h3) !important; font-weight: 700 !important; }
.post-content, .post-content p, .recent-post, .category-link {
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
}

:is(.home-page, .about-page, .services-page, .service-detail-page,
    .case-studies-page-body, .digitnetic-blog-page, .digitnetic-contact-page,
    .service-architecture, .legacy-page) h1 {
    font-size: var(--fs-h1) !important;
    font-weight: 800 !important;
    line-height: var(--lh-display) !important;
}

:is(.home-page, .about-page, .services-page, .service-detail-page,
    .case-studies-page-body, .digitnetic-blog-page, .digitnetic-contact-page,
    .service-architecture, .legacy-page) h2 {
    font-size: var(--fs-h2) !important;
    font-weight: 700 !important;
    line-height: var(--lh-heading) !important;
}

:is(.home-page, .about-page, .services-page, .service-detail-page,
    .case-studies-page-body, .digitnetic-blog-page, .digitnetic-contact-page,
    .service-architecture, .legacy-page) h3 {
    font-size: var(--fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Primary hero titles intentionally sit one level above the regular page H1. */
:is(.hero-title, .about-hero h1, .services-hero h1, .service-detail-hero h1,
    .case-studies-hero-title, .blog-hero h1, .contact-hero h1,
    .service-architecture-hero h1) {
    font-size: var(--fs-hero) !important;
    font-weight: 800 !important;
    line-height: var(--lh-display) !important;
}

/* Reading copy and descriptions use a comfortable, consistent measure. */
:is(.hero-description, .about-hero p, .about-who p, .about-story p,
    .about-value-grid p, .about-team-head p, .services-hero-description,
    .services-section-heading > p:last-child, .services-performance-copy > p,
    .services-why-grid p, .faq-list details p, .service-detail-intro,
    .service-section-heading > span, .service-challenge-card p,
    .service-why-grid p, .service-process-grid p, .service-results-grid p,
    .service-final-cta > .container > p:not(.service-section-kicker),
    .case-studies-page-body .page-header p, .case-studies-page p,
    .blog-hero-copy p, .featured-article p, .blog-card p, .blog-newsletter p,
    .contact-hero p, .contact-form-side > p, .contact-info-side > h2,
    .contact-success-modal p, .contact-trust-strip p, .service-architecture-card p,
    .service-architecture-hero span) {
    font-size: var(--fs-body) !important;
    font-weight: 400;
    line-height: var(--lh-body) !important;
}

/* Keep long-form and section copy within an easy-to-scan line length. */
:is(.hero-description, .about-hero p, .services-hero-description,
    .service-detail-intro, .blog-hero-copy p, .contact-hero p,
    .post-content) { max-width: 65ch; }

/* Labels and eyebrow text share one compact treatment. */
:is(.hero-tag, .services-eyebrow, .service-detail-kicker, .service-section-kicker,
    .case-studies-hero-label, .blog-kicker, .article-kicker, .contact-eyebrow,
    .about-kicker, .portfolio-label, .trusted-brands-label) {
    font-size: var(--fs-small) !important;
    font-weight: 700 !important;
    letter-spacing: var(--tracking-label) !important;
    line-height: var(--lh-small) !important;
}

/* Actions are legible without changing their existing shape, colour or spacing. */
:is(.cta-button, .hero-btn, .services-button, .about-primary, .about-secondary,
    .service-primary-cta, .service-secondary-cta, .blog-primary-btn,
    .blog-newsletter button, .contact-primary-btn, .contact-secondary-btn,
    .contact-submit, .case-study-link-btn) {
    font-size: var(--fs-button) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Card headings stay visibly below section titles while avoiding undersized copy. */
:is(.service-architecture-card h3, .service-challenge-card h3,
    .service-why-grid h3, .service-process-grid h3, .service-results-grid h3,
    .services-why-grid h3, .process-step h3, .blog-card h3,
    .case-study-card h3, .case-study-overlay h3, .contact-trust-strip h3,
    .about-value-grid h3, .about-team-grid h3, .project-title) {
    font-size: var(--fs-h3) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Homepage process cards use a compact timeline layout, not a standard card
   heading. Reset the legacy list-item display and reserve vertical space for
   the icon before the larger typography is applied. */
.home-page .process-step {
    padding-top: 66px;
}

.home-page .process-step .process-number,
.home-page .process-step h3,
.home-page .process-step p {
    display: block;
    list-style: none;
}

.home-page .process-step .process-number {
    margin: 0 0 5px;
    line-height: 1.2;
}

.home-page .process-step h3 {
    margin: 0 0 8px;
    font-size: clamp(1rem, .82rem + .45vw, 1.25rem) !important;
    line-height: 1.2 !important;
}

.home-page .process-step p {
    width: auto;
    max-width: 100%;
    margin: 0;
    font-size: clamp(.8125rem, .75rem + .18vw, .9375rem);
    line-height: 1.45;
}

/* Insight titles use the shared, larger heading scale. Two wider cards give
   that copy a readable measure alongside its image. */
.home-page .latest-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.home-page .latest-insight-card {
    gap: 22px;
    min-height: 204px;
    padding: 20px;
}

.home-page .latest-insight-card img {
    width: 148px;
    height: 118px;
    flex-basis: 148px;
}

.home-page .latest-insight-card h3 {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.35;
}

.home-page .latest-insight-card > div {
    display: flex;
    flex-direction: column;
}

.home-page .latest-insight-card time {
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1.3;
}

.home-page .latest-insight-card a {
    margin-top: auto;
    font-size: 11px;
    font-weight: 700;
}

.home-page .latest-insights-head a {
    font-size: 12px;
    font-weight: 700;
}

/* This is a semantic section heading styled as an eyebrow label. */
.home-page h2.client-testimonials-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Footer/navigation are UI text, not body copy. */
:is(.nav-link, .footer-reference-brand p, .footer-reference-column h3,
    .footer-reference-column > a, .footer-reference-contact span,
    .footer-reference-bottom) {
    font-size: var(--fs-small) !important;
    line-height: var(--lh-small) !important;
}

@media (max-width: 767.98px) {
    :root { --tracking-label: .1em; }
    :is(.hero-description, .about-hero p, .services-hero-description,
        .service-detail-intro, .blog-hero-copy p, .contact-hero p, .post-content) {
        max-width: 100%;
    }

    .home-page .latest-insights-grid { grid-template-columns: 1fr; }
    .home-page .latest-insight-card { gap: 16px; min-height: 174px; padding: 16px; }
    .home-page .latest-insight-card img { width: 126px; height: 100px; flex-basis: 126px; }
    .home-page .latest-insight-card h3 { font-size: 13px; }
    .home-page .latest-insight-card time { font-size: 10px; }
    .home-page .latest-insight-card a { font-size: 10px; }
    .home-page .latest-insights-head a { font-size: 11px; }
}