/*
 * YAM typography system
 * Five text roles: heading, metric, body, action and accent.
 * Icon sizing remains component-specific and is intentionally excluded.
 */
:root {
    --type-heading: clamp(34px, 3.3vw, 52px);
    --type-metric: clamp(56px, 5vw, 80px);
    --type-metric-label: clamp(34px, 3.3vw, 50px);
    --type-body: 16px;
    --type-action: 16px;
    --type-accent: 12px;
    --leading-heading: 1.08;
    --leading-body: 1.55;
    --leading-accent: 1.35;
}

/* Default readable text - cards, paragraphs, navigation, buttons and forms. */
#website :where(div, p, span, a, button, input, textarea, select, option, li, td, th, h3, h4) {
    font-size: var(--type-body) !important;
}

/* Large numeric proof points in the Experience grid. */
#website #experience .experience_title {
    font-size: var(--type-metric) !important;
    line-height: 1 !important;
}

#website #experience .experience_item_label {
    max-width: 100%;
    font-size: var(--type-metric-label) !important;
    line-height: 1 !important;
}

/* Compact proof-point values keep a distinct metric scale. */
#website .wdd_metric_num {
    font-size: clamp(36px, 4.5vw, 56px) !important;
    line-height: 1 !important;
}

/* Dedicated action size keeps primary and header CTAs legible. */
#website .btn {
    font-size: var(--type-action) !important;
}

/* Primary and outline CTAs use the same type weight throughout the site. */
#website :is(.btn, .cp_hero_outline_btn) {
    font-family: "Neue Montreal", sans-serif;
    font-weight: 500 !important;
}

/* Filled utility CTAs intentionally use the compact button label size. */
#website .btn.btn_fix {
    font-size: 14px !important;
}

/* Estimator checkboxes are body copy, not compact form metadata. */
#website .cp_est_check {
    font-size: var(--type-body) !important;
    line-height: var(--leading-body) !important;
}

/* Keep both service-card actions typographically identical. */
#website .cp_hero_card :is(.btn_fix, .cp_hero_outline_btn) {
    font-family: "Neue Montreal", sans-serif;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 1px;
}

@media (max-width: 600px) {
    #website .cp_hero_card :is(.btn_fix, .cp_hero_outline_btn) {
        font-size: 13px !important;
    }
}

/* Prominent card and FAQ prompts share a larger uppercase treatment. */
#website .faq_question,
#website .faq-question,
#website .approach_title {
    font-size: clamp(18px, 1.5vw, 24px) !important;
    line-height: 1.35 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}

#website .faq_question,
#website .faq-question {
    padding-top: 0;
    padding-bottom: 0;
}

#website .faq_question::before,
#website .faq-question::before {
    top: .25em;
}

/* Preserve shared terminal samples as one typographic run, including linked strings. */
#website .wpd_terminal,
#website .wpd_terminal .wpd_terminal_line,
#website .wpd_terminal .wpd_terminal_line span,
#website .wpd_terminal .wpd_terminal_line a {
    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 2 !important;
}

#website .wpd_terminal .wpd_terminal_title {
    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
    font-size: 13px !important;
}

#website .hero_code_panel,
#website .hero_code_panel .hero_code_line,
#website .hero_code_panel .hero_code_line span,
#website .hero_code_panel .hero_code_line a {
    font-size: var(--type-body) !important;
    line-height: 1.6 !important;
}

#website .wpd_terminal .wpd_terminal_line a {
    font: inherit !important;
}

#website :where(
    p,
    li,
    td,
    th,
    .section_description,
    .hero_subhead,
    .service_hero_subtitle,
    .services_card_desc,
    .approach_text,
    .experience_text,
    .faq_answer,
    .faq-answer,
    .article_body,
    .process_step_desc,
    .cp_hero_card_desc,
    .portfolio_intro,
    .project_info
) {
    line-height: var(--leading-body) !important;
}

/* Standalone paragraph copy gets a more open reading rhythm. */
#website p {
    line-height: 1.8 !important;
}

/* Page and section headings share one responsive scale. */
#website :where(
    h1,
    h2,
    .section_title,
    .section_title h1,
    .service_hero_heading,
    .cp_heading,
    .cp_hero_h1,
    .locations_card_name,
    .run_text,
    .marquee-content
) {
    font-size: var(--type-heading) !important;
    line-height: var(--leading-heading) !important;
}

#website .service_hero_heading {
    color: #fff;
}

/* Homepage hero follows the WordPress Dublin hero's editorial type scale. */
#website .home_hero .hero_h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    line-height: 1.15 !important;
}

#website .home_hero .hero_subhead {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Small uppercase, metadata and utility copy use one accent scale. */
#website :where(
    small,
    label,
    .hero_meta,
    .hero_meta > *,
    .example,
    .project_type,
    .portfolio_card_type,
    .portfolio_disclaimer,
    .blog_category_tag,
    .blog_post_tag,
    .locations_kicker,
    .locations_card_index,
    .locations_card_footer,
    .locations_note_link,
    .cp_label,
    .cp_process_badge,
    .cp_hero_card_badge,
    .cp_calc_label,
    .cp_calc_metric_label,
    .cp_stat_label,
    .loc_mega_group_label,
    .loc_city_services_label,
    .cp_crosslinks_label,
    .wdd_metric_text,
    .wdd_acc_num,
    .tech_name,
    .toc-title,
    .article_body figcaption,
    .cover-image figcaption,
    .cookie_banner_text,
    .cookie_banner_text > *,
    .agreement,
    .agreement > *,
    .form_error,
    .hi-tagline,
    .hi-btn-sub,
    .hi-footer
) {
    font-size: var(--type-accent) !important;
    line-height: var(--leading-accent) !important;
}

/* Breadcrumbs are navigation copy and stay at the regular body size on every viewport. */
#website .breadcrumb_line,
#website .breadcrumb_line > * {
    font-size: var(--type-body) !important;
}

@media (max-width: 1000px) {
    :root {
        --type-heading: clamp(32px, 6vw, 46px);
        --type-body: 16px;
        --type-accent: 11px;
    }
}

@media (max-width: 1023px) {
    #website .hero_code_panel,
    #website .hero_code_panel .hero_code_line,
    #website .hero_code_panel .hero_code_line span,
    #website .hero_code_panel .hero_code_line a {
        font-size: 14px !important;
    }

    #website .hero_code_panel .wpd_terminal_title {
        font-size: 11px !important;
    }
}

@media (max-width: 600px) {
    :root {
        --type-heading: clamp(30px, 8.4vw, 38px);
        --type-body: 16px;
        --type-accent: 10px;
    }

    #website .hero_meta {
        letter-spacing: .65px;
    }

    #website .wdd_metric_num {
        font-size: 28px !important;
        letter-spacing: -.5px;
    }

    #website :is(.cp_label, .wdd_metric_text) {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }
}