/* =========================================================
   ALIVE INC. TYPOGRAPHY SYSTEM  (css/typography.css)
   One place for every type decision on the site: font family, the heading scale, body / card / lead text,
   eyebrows, buttons, navigation, forms and the footer. Pages and templates keep their own layout CSS;
   this file only decides how text looks.

   How it wins: it loads after the template styles and every selector below is prefixed `html body`
   (and, where a template uses deeper class chains, boosted with :not(#_)). That out-ranks class based
   template rules without !important. Text that carries an inline style="" attribute (icons, big stat numbers,
   a few labels) is left alone on purpose.

   Scale (desktop / tablet <=1023px / mobile <=767px):
     H1 55 / 48 / 37   H2 45 / 36 / 32   H3 32 / 28 / 25   H4 24 / 22 / 21   H5 20   H6 18
     body 16, card text 16, lead 18, eyebrow 15 / 14, button 16, small 14, meta 13
   Archivo is loaded in 400-700; weights above 700 render as 700, so 800 is declared only where the
   design has always asked for the heaviest cut.
========================================================= */
:root {
    --ff-base: Archivo, sans-serif;

    --fs-h1: 55px;  --lh-h1: 1.15;  --fw-h1: 800;  --ls-h1: -.015em;
    --fs-h2: 45px;  --lh-h2: 1.2;   --fw-h2: 800;  --ls-h2: -.015em;
    --fs-h3: 32px;  --lh-h3: 1.25;  --fw-h3: 700;  --ls-h3: -.01em;
    --fs-h4: 24px;  --lh-h4: 1.3;   --fw-h4: 700;  --ls-h4: 0;
    --fs-h5: 20px;  --lh-h5: 1.35;  --fw-h5: 700;  --ls-h5: 0;
    --fs-h6: 18px;  --lh-h6: 1.4;   --fw-h6: 700;  --ls-h6: 0;

    --fs-body: 16px;       --lh-body: 1.65;       --fw-body: 400;
    --fs-lead: 18px;       --lh-lead: 1.6;
    --fs-card-text: 16px;  --lh-card-text: 1.55;
    --fs-list: 16px;       --lh-list: 1.55;

    --fs-eyebrow: 15px;    --lh-eyebrow: 1.3;     --fw-eyebrow: 700;  --ls-eyebrow: .12em;
    --fs-btn: 16px;        --lh-btn: 1.2;         --fw-btn: 700;
    --fs-nav: 15px;        --lh-nav: 1.3;         --fw-nav: 600;
    --fs-chip: 14px;       --fw-chip: 600;
    --fs-label: 14px;      --fw-label: 600;
    --fs-input: 16px;
    --fs-footer-link: 15px;
    --fs-small: 14px;      --lh-small: 1.5;
    --fs-meta: 13px;       --lh-meta: 1.5;
}
@media (max-width: 1023px) {
    :root {
        --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px;
        --fs-eyebrow: 14px;
    }
}
@media (max-width: 767px) {
    :root {
        --fs-h1: 37px; --fs-h2: 32px; --fs-h3: 25px; --fs-h4: 21px;
        --fs-eyebrow: 14px;
        --lh-h1: 1.15; --lh-h2: 1.2;
    }
}


/* ---------------------------------------------------------
   1. FONT FAMILY: Archivo everywhere text is set (icon fonts, code and the logo artwork are left alone)
--------------------------------------------------------- */
html body { font-family: var(--ff-base); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); }
html body :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, label, small, blockquote, figcaption, summary, input, textarea, select, button, .h1, .h2, .h3, .h4, .h5, .h6):not(#_) { font-family: var(--ff-base); }

/* ---------------------------------------------------------
   2. HEADINGS (by level). Every <h2> is a section title, every <h1> a page title.
   Card, step and list-item titles are <h3>/<h4>/<h5> in the templates; they use the H5 / H6 tokens (section 3).
--------------------------------------------------------- */
html body :is(h1, .h1):not(#_) { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
html body :is(h2, .h2):not(#_) { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
html body :is(h3, .h3):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
html body :is(h4, .h4):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(h5, .h5):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
html body :is(h6, .h6):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
/* Bootstrap size helpers win over the tag they sit on (e.g. <h4 class="h5">) */
html body :is(h1, h2, h3, h4, h5, h6).h1:not(#_) { font-size: var(--fs-h1); line-height: var(--lh-h1); }
html body :is(h1, h2, h3, h4, h5, h6).h2:not(#_) { font-size: var(--fs-h2); line-height: var(--lh-h2); }
html body :is(h1, h2, h3, h4, h5, h6).h3:not(#_) { font-size: var(--fs-h3); line-height: var(--lh-h3); }
html body :is(h1, h2, h3, h4, h5, h6).h4:not(#_) { font-size: var(--fs-h4); line-height: var(--lh-h4); }
html body :is(h1, h2, h3, h4, h5, h6).h5:not(#_) { font-size: var(--fs-h5); line-height: var(--lh-h5); }
html body :is(h1, h2, h3, h4, h5, h6).h6:not(#_) { font-size: var(--fs-h6); line-height: var(--lh-h6); }

/* Headings that are not section titles: sub-section CTA titles, accordion wrappers, uppercase mini labels, legal clauses, article subheads */
html body h3.fw-bold:not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }
html body :is(.accordion-header):not(#_) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
html body :is(.s2-sum h2, .sl3-groups h3, .hub-anchor h3, .mfd-header h3, .abt-eyebrow):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
html body :is(.tos-content h2, .tos-section h2, .lm-box h2):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.hb-hero h2):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.iv3-faq h3, .sv3-faq h3, .sl3-faq h3, .hp-faq-item h3):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); }

/* Article / long-form reading: sub-headings step down one level (H2 -> H3 size, H3 -> H4, H4 -> H5) so the page title stays the biggest thing */
html body :is(.post-body h2):not(#_) { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
html body :is(.post-body h3):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.post-body h4):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }

/* Titles of cards inside the templates that are <h3>/<h4> but small by design: keep them on the H5 token, and the blog card title one step smaller */
html body :is(.blog-card-title, .wsg-card-title, .commitment-title, .bento-card h4, .premium-card h4, .tech-box h4):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); }


/* ---------------------------------------------------------
   3. BODY TEXT
   p / li: 16px. Lead paragraphs (hero introductions) 18px. Card text keeps the tighter 1.55 line-height.
--------------------------------------------------------- */
html body p:not(#_) { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); }
html body :is([class*="card"], [class*="tile"], [class*="-mod"], [class*="step"], [class*="-row"], [class*="why-"], [class*="feature-info"], [class*="-item"]) p:not(#_) { line-height: var(--lh-card-text); }
html body :is(.sv3-problem, .sl3-intro, .iv3-intro, .s2-intro p, .lf-hero p, .hb-hero p, .sp-hero p, .header-inner-title p, .hero-p, .s2-final p, .iv3-hero .iv3-intro, .recognition-header p, .ins-hero-text p, .hp-hero-lead-in):not(#_) { font-size: var(--fs-lead); line-height: var(--lh-lead); }
html body :is(.post-body p, .post-body li):not(#_) { font-size: var(--fs-body); line-height: 1.75; }
html body :is(.post-body > p:first-of-type):not(#_) { font-size: var(--fs-lead); line-height: 1.7; }
html body :is(li, dd, dt):not(#_) { font-size: var(--fs-list); line-height: var(--lh-list); }

/* small text and metadata: captions, meta lines, card excerpts, table cells */
html body :is(.portfolio-desc, .blog-card-excerpt, .support-text, .tech-item p, .process-row .content p, .wsg-card-summary, .post-meta, .post-crumb, .post-toc-list a, .post-share a, .post-share button, .post-back, .blog-card-meta, .iv3-gname, .sl3-gname, .portfolio-outcome, .tos-content p.disclaimer):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }
html body :is(.post-author-role, .post-body figcaption, .mfd-label):not(#_) { font-size: var(--fs-meta); line-height: var(--lh-meta); }
html body :is(.alv-consent__text):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------------------------------------------------------
   4. EYEBROW LABELS: 15px / 700 / .12em, always uppercase
--------------------------------------------------------- */
html body :is(.hp-kicker, .sv3-eyebrow, .sv3-kicker, .sl3-kick, .sl3-tag, .iv3-eyebrow, .iv3-tag, .sv3-tag, .sol-eyebrow, .hb-eyebrow, .sv2-kicker, .csx-cards-eyebrow, .cs-eyebrow, .lf-eyebrow, .lf-tag, .sp-eyebrow, .sp-tag, .s2-tag, .rt2-kicker, .hire2-kicker, .crm2-kicker, .post-cat-pill, .benefits-eyebrow, .tech-collection-count, .fq3-sub, .hp-topics-eyebrow, .ticket-kicker, .process-kicker, .hero-eyebrow, .section-tag):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* ---------------------------------------------------------
   5. BUTTONS: 16px / 700. Colours, shapes and hover effects stay with each button's own CSS.
--------------------------------------------------------- */
html body :is(.btn, .btn1, .alive-btn, .hp-more, .sv3-btn, .sl3-btn, .iv3-btn, .hp3-more, .hp3-ctabar-btn, .ow3-btn, .read-more-btn, .btn-read-more, .btn-apply-card, .s2-sumbtn, .cta-rounded-red, .alv-consent__btn, .hp-inq-submit, .rs-cta, button[type="submit"], input[type="submit"]):not(#_) { font-size: var(--fs-btn); font-weight: var(--fw-btn); line-height: var(--lh-btn); letter-spacing: 0; text-transform: none; }
html body :is(.btn1, .btn):not(#_) { text-transform: none; }

/* filter chips, tabs and tags */
html body :is(.portfolio-filter-btn, .mfd-topic-btn, .bfbtn, .elite-pill, .dash-tab, .hp3-chip, .sl3-tech span, .iv3-chips span, .sp-tech span, .blog-tag, .btag):not(#_) { font-size: var(--fs-chip); font-weight: var(--fw-chip); line-height: 1.3; letter-spacing: 0; text-transform: none; }

/* FAQ questions: H6 token */
html body :is(.accordion-button, .sv3-faq summary, .fq3-card summary, .sl3-faq summary, .hp-faq-item summary, button.btn.collapsed):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); text-transform: none; }

/* ---------------------------------------------------------
   6. FORMS: label 14/600, fields 16/400 (16px also stops iOS zooming into a field), messages 13-14
--------------------------------------------------------- */
html body :is(label, .form-label):not(#_) { font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4; letter-spacing: 0; text-transform: none; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select, .form-control, .form-select):not(#_) { font-size: var(--fs-input); font-weight: var(--fw-body); line-height: 1.5; }
html body :is(.invalid-feedback, .form-text, .help-block, .error-message):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------------------------------------------------------
   7. NAVIGATION (header)
   Menu links (16px / 600), sub-menu links (15px / 600) and the compact header buttons are sized by the header files and already
   match the scale; the list reset below only stops the body list size from reaching menu items.
--------------------------------------------------------- */
html body :is(header, nav, .an2-header, .an2-menu, .navbar) li:not(#_) { font-size: inherit; line-height: inherit; }

/* ---------------------------------------------------------
   8. FOOTER
--------------------------------------------------------- */
html body :is(footer h6, .footer-title):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); letter-spacing: 0; }
html body :is(footer li, footer li a, .footer-links a, .ft2-list a, .ft2-group a):not(#_) { font-size: var(--fs-footer-link); line-height: 1.6; }
html body :is(.ft2-tag):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); }
html body :is(.ft2-blurb):not(#_) { font-size: var(--fs-body); line-height: var(--lh-body); }
html body :is(footer p.mb-0, footer .copyright p):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }


/* ---------------------------------------------------------
   9. COMPONENT EXCEPTIONS (found by comparing every page before / after this file existed)
--------------------------------------------------------- */
/* An <h4> that is a card / panel / tile title uses the H5 token; an <h4> that is a section subtitle keeps the H4 token */
html body :is([class*="card"], [class*="tile"], [class*="panel"], [class*="why-alive"], [class*="bento"], [class*="premium"], [class*="-mod"], [class*="project"]) h4:not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); text-transform: none; }
html body :is(.accordion-icon h4):not(#_) { font-size: var(--fs-h6); font-weight: var(--fw-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }

/* Large panel / featured-item titles are H3 */
html body :is(.sol-panel h4, .ins-feature h5, .hp-topics-head h4):not(#_) { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

/* Uppercase label headings inside bands and cards use the eyebrow token */
html body :is(.hp-region__item-top h4, .ai2-intro-services-heading h4):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* Section subtitles (the line under a section title) are H4 */
html body :is(p.hp-sub, .hp-sub, .sol-new-subtitle, .hb-h3, .iv3-split-sub):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

/* Lead paragraphs that are not named above */
html body :is(.hp-hero-connect, .hp-region__intro):not(#_) { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* Footer copyright 14px; the cookie-banner buttons stay compact */
html body :is(.ft2-bottom p, footer .copyright p, footer p.mb-0):not(#_) { font-size: var(--fs-small); line-height: var(--lh-small); }
html body .alv-consent__btns .alv-consent__btn:not(#_) { font-size: var(--fs-small); line-height: 1.3; }

/* ---------------------------------------------------------
   10. TEMPLATE EXCEPTIONS (second pass: every page compared before / after)
--------------------------------------------------------- */
/* h2 / p used as a card title: H4 (large content cards) or H5 (small cards) */
html body :is(.s2-card h2):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.indh-card h2, p.card-title, .solh-journey-step h4, .solh-tech-item h4):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }

/* a heading that sits under the page title as its subtitle: H4 */
html body :is(.solh-hero h2, .sv2-hero h2, .indh-hero-content h2, .abt-lead, .abt-final-lead, .abt-hero-sub, .abt-copy h3.abt-sub):not(#_) { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
html body :is(.abt-brand):not(#_) { font-size: var(--fs-h5); font-weight: var(--fw-h5); line-height: var(--lh-h5); }

/* big feature titles, stat numbers and sub-section titles that are <h3>: H3 token */
html body :is(.cs-item-title, .abt-row-head h3, .abt-trio h3, .abt-beyond h3, .blog-featured-title, .stat-item h3, .floating-card h3, .consult-box h3, .p-5 h3.yellow, .p-5 h3.green, .feature-content h3.text-white, .display-title, .support-display-title, .related-wrap h2, .showcase-card .card-text h3):not(#_) { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

/* closing statements on the About page: H2 token */
html body :is(.abt-statement h3, .abt-close p):not(#_) { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }

/* small uppercase label headings: eyebrow token */
html body :is(.sol-tech-group h4, .tos-sidebar h3, .sol-rel h3):not(#_) { font-size: var(--fs-eyebrow); font-weight: var(--fw-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* lead paragraphs: Bootstrap .lead and the page-specific lead classes */
html body :is(p.lead, .sv2-lead, .hdd-lead2, .indh-lead, .insh-lead, .dt-big):not(#_) { font-size: var(--fs-lead); font-weight: var(--fw-body); line-height: var(--lh-lead); }

/* micro labels (badges, tags, pills, step numbers, card captions): 13px floor. Only the size changes; weight, spacing and shape stay with each component. */
html body :is(.badge, .ptag, .portfolio-cat-badge, .feat-badge span, .country-badge, .hp-chip, .cs-item-tag, .cs-item-type, .cs-rel a, .s2-links span, .s2-side b, .ft2-ct b, .blog-card-link, .lm-row b, .sl3-step b, .hp-pbar em, .hp-project-tag, .hp-insight-tag, .hp-review-src, .mfd-count, .ticket-file-name, .card-badge, .csx-cta-label, .solh-cta-label, .solh-faq-answer-label, .solh-faq-answer-bottom span, .solh-category-nav-label span, .badge-open-status, .solh-crm-node span, .solh-crm-center small, .solh-tech-center small, .solh-journey-number, .solh-faq-nav-number, .solh-tech-number, .solh-category-number, .solh-map-number, .solh-faq-answer-number):not(#_) { font-size: var(--fs-meta); }