/* ═══════════════════════════════════════════════════════════
   FANAVAR STEEL - CENTRALIZED TYPOGRAPHY SYSTEM
   Nielsen Norman Group Typography Standards for LTR
   Single point of control for ALL typography across the site

   LTR (English) Typography - NNgroup Standard:
   - Headings: Inter (wght 700-800)
   - Body/UI: Inter variable (wght 100-900)
   - Body size: 18px, Line-height: ~1.7
   - H1: 50px/800, H2: 32px/700 (following NNgroup proportions)

   RTL (Persian/Arabic/Pashto) Typography:
   - Pashto: Bahij Muna
   - Persian/Arabic: Dibaj FaNum

   PORTO DOCS: https://www.okler.net/previews/porto/docs/
   NN/G REFERENCE: https://www.nngroup.com/
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FONT FAMILY - Nielsen Norman Group Typography Standards
   LTR: Inter variable for body + headings
   RTL: Language-specific fonts (Bahij Muna, Dibaj FaNum)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Nielsen Norman Group Typography (Inter Variable, opsz + wght) */
html[dir="ltr"] body,
html[dir="ltr"] html,
html[dir="ltr"] .body {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    /* NNgroup body: 18px, line-height ~1.7; opsz 18 optimizes for body text */
    font-variation-settings: "opsz" 18;
    letter-spacing: normal;
}

/* RTL - Language-specific fonts via CSS variables
   CRITICAL: Do NOT set font-size here. custom.css and inline critical styles
   set RTL sizes (18px fa/ar, 24px ps). Setting 16px here caused flash:
   inline 24px → typography 16px → custom 24px. See Issue #23. */
html[dir="rtl"] body,
html[dir="rtl"] html,
html[dir="rtl"] .body,
body,
html,
.body {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    /* font-size: omitted - RTL sizes from custom.css + inline critical styles */
    line-height: 1.7;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   HEADINGS (H1-H6) - Nielsen Norman Group Standard
   LTR: Inter font for headings
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter Variable for headings (NNgroup standard); opsz 32 for display sizes */
html[dir="ltr"] h1,
html[dir="ltr"] .h1,
html[dir="ltr"] .text-12 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 50px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    font-variation-settings: "opsz" 32;
}

html[dir="ltr"] h2,
html[dir="ltr"] .h2,
html[dir="ltr"] .text-10,
html[dir="ltr"] .text-11 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.3px;
    font-variation-settings: "opsz" 32;
}

html[dir="ltr"] h3,
html[dir="ltr"] .h3,
html[dir="ltr"] .text-9 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 27px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] h4,
html[dir="ltr"] .h4,
html[dir="ltr"] .text-8 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] h5,
html[dir="ltr"] .h5,
html[dir="ltr"] .text-7 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: normal;
}

html[dir="ltr"] h6,
html[dir="ltr"] .h6,
html[dir="ltr"] .text-6 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base headings (fallback for all directions) */
h1,
.h1,
.text-12 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 60px;
    line-height: 72px;
    letter-spacing: -0.3px;
}

h2,
.h2,
.text-10,
.text-11 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 45px;
    line-height: 54px;
    letter-spacing: -0.3px;
}

h3,
.h3,
.text-9 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 27px;
    line-height: 36px;
    letter-spacing: normal;
}

h4,
.h4,
.text-8 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 18px;
    line-height: 27px;
    letter-spacing: normal;
}

h5,
.h5,
.text-7 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 17px;
    line-height: 22px;
    letter-spacing: normal;
}

h6,
.h6,
.text-6 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   BODY TEXT - Paragraphs & Content
   LTR: Inter for body text (NNgroup standard)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter for body */
html[dir="ltr"] p,
html[dir="ltr"] .paragraph,
html[dir="ltr"] .text-default {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    /* NNgroup: 18px body, ~1.7 line-height */
    letter-spacing: normal;
}

html[dir="ltr"] p.text-sm,
html[dir="ltr"] .text-small {
    font-size: 16px;
    line-height: 1.6;
}

html[dir="ltr"] .lead,
html[dir="ltr"] p.lead {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
}

/* Base (fallback for RTL) */
p,
.paragraph,
.text-default {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: normal;
}

p.text-sm,
.text-small {
    font-size: 14px;
    line-height: 1.5;
}

.lead,
p.lead {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════
   PRIMARY NAVIGATION — nngroup.com .label-m-500 (verified live CSS)
   .label-m-500 {
     font-family: var(--font-source-inter);
     font-size: 1rem;
     line-height: 1.25em;
     --font-weight: 500;
   }
   Top-level labels use Title Case / sentence style, not ALL CAPS.
   Porto theme.css defaults (14px, 600, uppercase) are overridden below for LTR.
   Loaded after custom.css so these win without !important on metrics.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    html[dir="ltr"] #header .header-nav-main nav > ul > li > a,
    html[dir="ltr"] #header .header-nav-main nav > ul > li > a.nav-link,
    html[dir="ltr"] #header .header-nav-main nav > ul > li > a.dropdown-item,
    html[dir="ltr"] #header .header-nav-main nav > ul > li > a.dropdown-toggle {
        font-family: 'Inter Variable', 'Inter', sans-serif;
        font-style: normal;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: normal;
        text-transform: none;
        font-variation-settings: "wght" 500, "opsz" 16;
    }

    html[dir="ltr"] #header .header-nav-main nav > ul > li.open > a,
    html[dir="ltr"] #header .header-nav-main nav > ul > li:hover > a,
    html[dir="ltr"] #header .header-nav-main nav > ul > li.accessibility-open > a {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.25;
        text-transform: none;
        font-variation-settings: "wght" 500, "opsz" 16;
    }

    html[dir="ltr"] #header .header-nav-main nav > ul > li.dropdown:not(.dropdown-mega) .dropdown-menu li > a,
    html[dir="ltr"] #header .header-nav-main .dropdown-mega .dropdown-menu .dropdown-item {
        font-family: 'Inter Variable', 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: normal;
        text-transform: none;
        font-variation-settings: "wght" 500, "opsz" 16;
    }
}

/* Mobile full-screen menu — same scale as NNG nav labels (1rem / 500 / 1.25) */
@media (max-width: 991.98px) {
    html[dir="ltr"] .mobile-menu-link,
    html[dir="ltr"] .mobile-submenu-link,
    html[dir="ltr"] .mobile-submenu-title,
    html[dir="ltr"] .mobile-submenu-back {
        font-family: 'Inter Variable', 'Inter', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: normal;
        text-transform: none;
        font-variation-settings: "wght" 500, "opsz" 16;
    }
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS - Call to Actions
   LTR: Inter for buttons (NNgroup uses Inter for UI)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter for buttons */
html[dir="ltr"] .btn,
html[dir="ltr"] button,
html[dir="ltr"] input[type="submit"],
html[dir="ltr"] input[type="button"],
html[dir="ltr"] .button {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

html[dir="ltr"] .btn-lg,
html[dir="ltr"] .btn-large {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

html[dir="ltr"] .btn-sm,
html[dir="ltr"] .btn-small {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.4px;
}

/* Base buttons (fallback for RTL) */
.btn,
button,
input[type="submit"],
input[type="button"],
.button {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.btn-lg,
.btn-large {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.8px;
}

.btn-sm,
.btn-small {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.6px;
}


/* ═══════════════════════════════════════════════════════════
   SERVICE CARDS - Consistent Typography
   LTR: Inter for titles and descriptions
   ═══════════════════════════════════════════════════════════ */

/* LTR - Service cards */
html[dir="ltr"] .service-card-new__content h5,
html[dir="ltr"] .service-card-grid .service-content h5,
html[dir="ltr"] .service-title {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
}

html[dir="ltr"] .service-card-new__content p,
html[dir="ltr"] .service-card-grid .service-content p,
html[dir="ltr"] .service-description {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* Base service cards (fallback for RTL) */
.service-card-new__content h5,
.service-card-grid .service-content h5,
.service-title {
    font-family: var(--font-primary) !important;
    font-size: 18px !important;
    /* font-weight inherited or managed by component */
    line-height: 27px !important;
    letter-spacing: normal !important;
}

.service-card-new__content p,
.service-card-grid .service-content p,
.service-description {
    font-family: var(--font-primary) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   HERO SECTIONS - Large Impact Text
   LTR: Inter for hero headings (NNgroup standard)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Inter for hero headings */
html[dir="ltr"] .hero h1,
html[dir="ltr"] .hero-title,
html[dir="ltr"] [class*="hero"] h1,
html[dir="ltr"] .page-header h1 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(40px, 5vw, 50px);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

html[dir="ltr"] #hero-section h1.hero-new-headline,
html[dir="ltr"] .hero h1.hero-new-headline {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4vw, 50px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
}

html[dir="ltr"] .hero h2,
html[dir="ltr"] .hero-subtitle,
html[dir="ltr"] [class*="hero"] h2 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    /* font-weight inherited or managed by component */
    font-size: clamp(18px, 2.5vw, 20px);
    line-height: 1.5;
    letter-spacing: normal;
}

/* Base hero (fallback for RTL) */
.hero h1,
.hero-title,
[class*="hero"] h1,
.page-header h1 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: clamp(48px, 6vw, 72px);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

#hero-section h1.hero-new-headline,
.hero h1.hero-new-headline {
    /* font-weight inherited or managed by component */
    font-size: clamp(32px, 5vw, 48px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
}

.hero h2,
.hero-subtitle,
[class*="hero"] h2 {
    font-family: var(--font-primary) !important;
    /* font-weight inherited or managed by component */
    font-size: clamp(20px, 3vw, 24px);
    line-height: 1.4;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   LISTS - Unordered & Ordered
   LTR: Inter for list items
   ═══════════════════════════════════════════════════════════ */

/* LTR - Lists use body font */
html[dir="ltr"] ul,
html[dir="ltr"] ol,
html[dir="ltr"] li {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
}

/* Base lists (fallback for RTL) */
ul,
ol,
li {
    font-family: var(--font-primary) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════
   BADGES & LABELS - Small Info Elements
   LTR: Inter for badges (NNgroup uses Inter for UI elements)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Badges use Inter */
html[dir="ltr"] .badge,
html[dir="ltr"] .label,
html[dir="ltr"] .tag {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base badges (fallback for RTL) */
.badge,
.label,
.tag {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   IMPACT NUMBERS - Statistics & Metrics
   LTR: Inter for numbers and labels
   ═══════════════════════════════════════════════════════════ */

/* LTR - Impact numbers */
html[dir="ltr"] .counter,
html[dir="ltr"] .impact-number,
html[dir="ltr"] .stat-number,
html[dir="ltr"] .counter-number {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 800;
    font-size: 50px;
    line-height: 1;
    letter-spacing: -0.3px;
}

html[dir="ltr"] .counter-label,
html[dir="ltr"] .stat-label {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base impact numbers (fallback for RTL) */
.counter,
.impact-number,
.stat-number,
.counter-number {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.3px;
}

.counter-label,
.stat-label {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   FORMS - Input Fields & Labels
   LTR: Inter for forms (NNgroup style)
   ═══════════════════════════════════════════════════════════ */

/* LTR - Forms use Inter */
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select,
html[dir="ltr"] .form-control {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
}

html[dir="ltr"] label,
html[dir="ltr"] .form-label {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: normal;
}

/* Base forms (fallback for RTL) */
input,
textarea,
select,
.form-control {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

label,
.form-label {
    font-family: var(--font-primary) !important;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER - Footer Typography
   LTR: Inter for footer and headings
   ═══════════════════════════════════════════════════════════ */

/* LTR - Footer typography */
html[dir="ltr"] footer,
html[dir="ltr"] #footer,
html[dir="ltr"] .footer {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

html[dir="ltr"] footer h1,
html[dir="ltr"] footer h2,
html[dir="ltr"] footer h3,
html[dir="ltr"] footer h4,
html[dir="ltr"] footer h5,
html[dir="ltr"] footer h6 {
    font-family: 'Inter Variable', 'Inter', sans-serif !important;
    font-weight: 700;
}

/* Base footer (fallback for RTL) */
footer,
#footer,
.footer {
    font-family: var(--font-primary) !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    font-family: var(--font-primary) !important;
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════
   FONT WEIGHT UTILITIES - SendCutSend Standard
   Variable font (100-900) loaded but brand restricts to: 400
   ═══════════════════════════════════════════════════════════ */

.font-weight-light,
.font-weight-normal,
.fw-normal,
.fw-light {
    /* font-weight inherited or managed by component */
}

.font-weight-bold,
.fw-bold,
.font-weight-semibold,
.fw-semibold {
    /* font-weight inherited or managed by component */
}

.font-weight-extra-bold,
.font-weight-bolder,
.fw-bolder,
.font-weight-black,
.fw-black {
    /* font-weight inherited or managed by component */
}


/* Override any 500 or 600 weights to 400 (brand compliance) */

.font-weight-500,
.fw-500,
.font-weight-medium,
.fw-medium,
.font-weight-600,
.fw-600 {
    /* font-weight inherited or managed by component */
}


/* ═══════════════════════════════════════════════════════════
   PORTO TEXT SIZE CLASSES - Override with SendCutSend Scale
   Porto provides .text-1 to .text-15 for font sizes
   ═══════════════════════════════════════════════════════════ */

.text-1 {
    font-size: 11px !important;
    line-height: 1.5;
}

.text-2 {
    font-size: 13px !important;
    line-height: 1.5;
}

.text-3 {
    font-size: 14px !important;
    line-height: 1.5;
}

.text-4 {
    font-size: 16px !important;
    line-height: 1.7;
}

.text-5 {
    font-size: 17px !important;
    line-height: 1.6;
}

.text-6 {
    font-size: 18px !important;
    line-height: 1.5;
}

.text-7 {
    font-size: 21px !important;
    line-height: 1.4;
}

.text-8 {
    font-size: 24px !important;
    line-height: 1.4;
}

.text-9 {
    font-size: 27px !important;
    line-height: 1.3;
}

.text-10 {
    font-size: 36px !important;
    line-height: 1.3;
}

.text-11 {
    font-size: 45px !important;
    line-height: 1.2;
}

.text-12 {
    font-size: 60px !important;
    line-height: 1.2;
}

.text-13 {
    font-size: 72px !important;
    line-height: 1.1;
}

.text-14 {
    font-size: 80px !important;
    line-height: 1.1;
}

.text-15 {
    font-size: 90px !important;
    line-height: 1.1;
}

/* =====================================================
   RTL READABILITY OVERRIDES
   Increase baseline sizes for RTL scripts where glyphs render smaller
   ===================================================== */

html[dir="rtl"] body,
html[dir="rtl"] .body {
    font-size: 18px !important;
    line-height: 1.8;
}

html[dir="rtl"] .custom-font-secondary {
    font-family: var(--font-primary) !important;
}

html[dir="rtl"] .text-1 {
    font-size: 12px !important;
    line-height: 1.6;
}

html[dir="rtl"] .text-2 {
    font-size: 14px !important;
    line-height: 1.6;
}

html[dir="rtl"] .text-3 {
    font-size: 16px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-3-5 {
    font-size: 16px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-4 {
    font-size: 18px !important;
    line-height: 1.8;
}

html[dir="rtl"] .text-4-5 {
    font-size: 18px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-5 {
    font-size: 19px !important;
    line-height: 1.7;
}

html[dir="rtl"] .text-5-5 {
    font-size: 21px !important;
    line-height: 1.6;
}

html[dir="rtl"] .text-6 {
    font-size: 20px !important;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════
   LETTER SPACING UTILITIES - SendCutSend Pattern
   ═══════════════════════════════════════════════════════════ */

.ls-tight {
    letter-spacing: -0.3px !important;
}

.ls-normal {
    letter-spacing: normal !important;
}

.ls-wide {
    letter-spacing: 0.5px !important;
}

.ls-wider {
    letter-spacing: 0.8px !important;
}


/* ═══════════════════════════════════════════════════════════
   PORTO LINE-HEIGHT CLASSES - Brand Compliance
   ═══════════════════════════════════════════════════════════ */

.line-height-1,
.line-height-2,
.line-height-3,
.line-height-4,
.line-height-5,
.line-height-6,
.line-height-7,
.line-height-8,
.line-height-9 {
    font-family: var(--font-primary) !important;
}


/* ═══════════════════════════════════════════════════════════
   IMPORTANT OVERRIDES - Force Typography System
   Remove conflicting inline styles and enforce brand
   ═══════════════════════════════════════════════════════════ */


/* Remove prohibited fonts */

[style*="font-family: 'Lexend'"],
[style*="font-family: 'Poppins'"],
[style*="font-family: 'Playfair'"],
[style*="font-family: 'Open Sans'"] {
    font-family: var(--font-primary) !important;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE TYPOGRAPHY - Mobile Adjustments
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    h1,
    .h1 {
        font-size: 48px;
        line-height: 56px;
    }
    h2,
    .h2 {
        font-size: 36px;
        line-height: 44px;
    }
    h3,
    .h3 {
        font-size: 24px;
        line-height: 32px;
    }
    .hero h1,
    .hero-title {
        font-size: clamp(36px, 8vw, 48px);
    }
}

@media (max-width: 575px) {
    body,
    html {
        font-size: 15px;
        line-height: 1.6;
    }
    h1,
    .h1 {
        font-size: 36px;
        line-height: 42px;
    }
    h2,
    .h2 {
        font-size: 28px;
        line-height: 34px;
    }
    h3,
    .h3 {
        font-size: 21px;
        line-height: 28px;
    }
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL SECTION TITLE STYLES - Command Center
   Centralized typography for all service/product section h2s
   Affects: doors, lift-package, and all other product pages
   EXCLUDES: Hero sections (they have their own styling)
   ═══════════════════════════════════════════════════════════ */

/* Main centralized class - use this for all non-hero section h2s */
.fs-section-title,
.cs-service-title,
.wsd-section-title,
.services-header-new__title,
.section-title,
.projects-section-title,
.cs-cta-title,
.cta-title {
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    margin-bottom: 0.75rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Inter Variable', 'Inter', sans-serif) !important;
}

.fs-section-title em,
.cs-service-title em,
.wsd-section-title em,
.services-header-new__title em,
.section-title em,
.projects-section-title em,
.cs-cta-title em,
.cta-title em {
    color: var(--secondary, #FCDA03);
    font-style: normal;
}

/* Gallery section h2 override (targets font-weight-bold text-9) */
.shared-gallery-section h2.font-weight-bold.text-9,
#wsd-gallery h2.font-weight-bold.text-9 {
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    margin-bottom: 0.75rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Inter Variable', 'Inter', sans-serif) !important;
}

/* Ensure all included partial section titles are consistent */
#services .services-header-new__title,
#benefits .cs-service-title,
#wsd-gallery h2,
#faq h2 {
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    margin-bottom: 0.75rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Inter Variable', 'Inter', sans-serif) !important;
}

/* Page-specific overrides to ensure centralized styles take precedence */
#lift-page .cs-service-title,
#wood-steel-page .cs-service-title,
#cutting-page .cs-service-title,
#powder-coating-page .cs-service-title,
#bending-page .cs-service-title,
#signage-page .cs-service-title,
#wood-steel-page .wsd-section-title,
#lift-page .section-title,
#cutting-page .section-title,
#lift-page h2.cs-service-title,
#wood-steel-page h2.cs-service-title,
#wood-steel-page h2.wsd-section-title,
#cutting-page h2.cs-service-title,
#powder-coating-page h2.cs-service-title,
#bending-page h2.cs-service-title,
#signage-page h2.cs-service-title,
#lift-page .cs-cta-title,
#wood-steel-page .cs-cta-title,
#wood-steel-page .wsd-cta-title,
#cutting-page .cs-cta-title,
#powder-coating-page .cs-cta-title,
#bending-page .cs-cta-title,
#signage-page .cs-cta-title,
#powder-coating-page .color-showcase-title,
#powder-coating-page h2.font-weight-bold.text-9,
#powder-coating-page h2.font-weight-bold.text-white,
#bending-page h2.font-weight-bold.text-9,
#signage-page h2.font-weight-bold.text-9,
#signage-page .signage-faq-title,
.cinematic-about-wrapper .ca-headline-lg,
.projects-page h2.projects-section-title,
.projects-page h2.projects-section-title.appear-animation-visible,
.projects-page .cta-title,
.projects-page h2.modal-section-title {
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    margin-bottom: 0.75rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Inter Variable', 'Inter', sans-serif) !important;
}

/* Contact page typography — LTR only, desktop + mobile (27px, 400, 36px, var(--font-heading)) */
html[dir="ltr"] .fs-contact-page .fs-contact-hero.powder-coating-hero h1.fs-contact-hero__title.cs-service-title,
html[dir="ltr"] .fs-contact-page .fs-info-group__title.cs-service-title,
html[dir="ltr"] .fs-contact-page .fs-map-section .fs-section-title.cs-service-title {
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    margin-bottom: 0.75rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Inter Variable', 'Inter', sans-serif) !important;
}

/* Info group titles need slightly more bottom margin */
html[dir="ltr"] .fs-contact-page .fs-info-group__title.cs-service-title {
    margin-bottom: 1.25rem !important;
}

/* Ensure included partials work across all pages */
#lift-page #services .services-header-new__title,
#lift-page #elevator-types .services-header-new__title,
#lift-page #lift-gallery h2.font-weight-bold.text-9,
#wood-steel-page #services .services-header-new__title,
#wood-steel-page #wsd-gallery h2.font-weight-bold.text-9,
#wood-steel-page #benefits .cs-service-title,
#cutting-page #services .services-header-new__title,
#cutting-page #cutting-gallery h2.font-weight-bold.text-9,
#powder-coating-page #services .services-header-new__title,
#bending-page #services .services-header-new__title,
#signage-page #services .services-header-new__title {
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    margin-bottom: 0.75rem !important;
    color: #fff !important;
    font-family: var(--font-heading, 'Inter Variable', 'Inter', sans-serif) !important;
}