/* ==========================================================================
   Fanavar Steel — Unified Hero Design System
   Scope: Porto template hero sections only.
   Loaded AFTER custom.css, BEFORE page-specific <style> blocks.
   RTL-aware. WCAG AA compliant.
   
   Tested pages: Services, Projects, About Us, Careers, FAQ,
   Contact Us, Wooden-Steel Doors, Powder Coating, Industrial Cutting,
   Signage Services, Anti-Theft Doors, Lift Package.
   ========================================================================== */

/* =====================================================
   1. DESIGN TOKENS — 8px spacing grid, modular type scale
   ===================================================== */

:root {
    /* Spacing (8px base unit) */
    --fh-space-1: 8px;
    --fh-space-2: 16px;
    --fh-space-3: 24px;
    --fh-space-4: 32px;
    --fh-space-5: 40px;
    --fh-space-6: 48px;
    --fh-space-8: 64px;

    /* Typography — modular scale (1.25 ratio) */
    /* This sets the main hero heading size.
       clamp(31px, 5vw, 47px) — reduced by 5px from original (36/52) */
    --fh-h1: clamp(31px, 5vw, 36px);
    --fh-h1-lh: 1.1;
    --fh-h1-weight: 800;

    --fh-subhead: clamp(16px, 1.5vw, 18px);
    --fh-subhead-lh: 1.6;

    --fh-badge-size: 12px;
    --fh-badge-weight: 700;

    --fh-stat-number: 32px;
    --fh-stat-label: 11px;

    /* Colors */
    --fh-accent: var(--secondary, #FCDA03);
    --fh-accent-dark: #1a1a1a;
    --fh-text-primary: #ffffff;
    --fh-text-secondary: rgba(255, 255, 255, 0.7);
    --fh-text-muted: rgba(255, 255, 255, 0.5);

    /* Transitions */
    --fh-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* =====================================================
   1a. UNIFIED HERO SPACING SYSTEM — Single Source of Truth
   =====================================================
   
   PROBLEM: Inconsistent vertical spacing between fixed navigation
   and hero content across pages (Contact vs Services vs Projects).
   
   SOLUTION: CSS custom properties with breakpoint-aware values
   that account for both header height and breathing room.
   
   USAGE:
     - Add .fanavar-hero class to hero section container
     - Use .fanavar-hero--compact for smaller heroes
     - Content automatically positions correctly at all breakpoints
   
   NAVIGATION HEIGHTS (reference):
     - Desktop: ~120px (header 80px + floating bar 40px)
     - Mobile:  ~110px (header 64px + floating bar 46px)
   ===================================================== */

:root {
    /* 
     * HERO SPACING VARIABLES
     * These values ensure consistent vertical rhythm across all pages
     * while accounting for the fixed navigation bar height.
     */
    
    /* Desktop spacing (992px and above) */
    --fanavar-header-height: 120px;        /* Fixed header + contact bar */
    --fanavar-hero-padding-top: 160px;     /* Header + breathing room */
    --fanavar-hero-padding-bottom: 80px;   /* Bottom spacing */
    --fanavar-hero-min-height: 600px;      /* Minimum hero height */
    
    /* Tablet spacing (768px - 991px) */
    --fanavar-header-height-tablet: 110px;
    --fanavar-hero-padding-top-tablet: 140px;
    --fanavar-hero-padding-bottom-tablet: 60px;
    --fanavar-hero-min-height-tablet: 500px;
    
    /* Mobile spacing (below 768px) */
    --fanavar-header-height-mobile: 110px;
    --fanavar-hero-padding-top-mobile: 120px;
    --fanavar-hero-padding-bottom-mobile: 48px;
    --fanavar-hero-min-height-mobile: auto;
    
    /* Compact hero variant (for simpler pages like FAQ, Terms) */
    --fanavar-hero-compact-padding-top: 140px;
    --fanavar-hero-compact-padding-top-tablet: 120px;
    --fanavar-hero-compact-padding-top-mobile: 100px;
    
    /* Full viewport hero variant (for landing pages) */
    --fanavar-hero-full-min-height: 100vh;
    --fanavar-hero-full-min-height-mobile: 100svh; /* Small viewport height for mobile */
}

/* 
 * CORE HERO CLASS — Apply to all hero section containers
 * Provides consistent top spacing accounting for fixed navigation
 * 
 * CRITICAL: All heroes MUST start content at the same vertical position.
 * Do NOT use flexbox centering (align-items: center) as it pushes content
 * down when content height varies.
 */
.fanavar-hero {
    position: relative;
    /* Single consistent top spacing - this is the key to alignment */
    padding-top: var(--fanavar-hero-padding-top);
    padding-bottom: var(--fanavar-hero-padding-bottom);
    min-height: var(--fanavar-hero-min-height);
    /* Ensure content doesn't overlap with fixed header */
    box-sizing: border-box;
    /* Content starts from top, NOT centered */
    display: block;
}

/* Compact variant for content-focused pages (FAQ, Terms, Privacy) */
.fanavar-hero--compact {
    padding-top: var(--fanavar-hero-compact-padding-top);
    min-height: auto;
}

/* Full viewport variant for landing pages */
/* NOTE: Even full-height heroes should NOT center content vertically */
/* as it causes misalignment between pages with different content heights */
.fanavar-hero--full {
    min-height: var(--fanavar-hero-full-min-height);
    /* Content starts from top, with consistent padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Centered content variant - HORIZONTAL only, NOT vertical */
.fanavar-hero--centered {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Top aligned, not centered */
    align-items: center; /* Horizontal center only */
    text-align: center;
}

/* Content wrapper for consistent max-width and centering */
.fanavar-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--fh-space-3);
    padding-right: var(--fh-space-3);
}

/* Narrow content variant (for focused messaging) */
.fanavar-hero__content--narrow {
    max-width: 900px;
}

/* =====================================================
   RESPONSIVE BREAKPOINTS FOR HERO SPACING
   ===================================================== */

/* Tablet adjustments (768px - 991px) */
@media (max-width: 991px) {
    .fanavar-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet);
        padding-bottom: var(--fanavar-hero-padding-bottom-tablet);
        min-height: var(--fanavar-hero-min-height-tablet);
    }
    
    .fanavar-hero--compact {
        padding-top: var(--fanavar-hero-compact-padding-top-tablet);
    }
}

/* Mobile adjustments (below 768px) */
@media (max-width: 767px) {
    .fanavar-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile);
        padding-bottom: var(--fanavar-hero-padding-bottom-mobile);
        min-height: var(--fanavar-hero-min-height-mobile);
    }
    
    .fanavar-hero--compact {
        padding-top: var(--fanavar-hero-compact-padding-top-mobile);
    }
    
    .fanavar-hero--full {
        min-height: var(--fanavar-hero-full-min-height-mobile);
    }
    
    .fanavar-hero__content {
        padding-left: var(--fh-space-2);
        padding-right: var(--fh-space-2);
    }
}

/* =====================================================
   BACKGROUNDS AND OVERLAYS
   ===================================================== */

/* Background image wrapper */
.fanavar-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.fanavar-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark overlay for text readability */
.fanavar-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(26, 26, 26, 0.95) 0%,
        rgba(26, 26, 26, 0.8) 50%,
        rgba(26, 26, 26, 0.6) 100%
    );
}

/* Lighter overlay variant */
.fanavar-hero__overlay--light {
    background: linear-gradient(
        to bottom,
        rgba(26, 26, 26, 0.7) 0%,
        rgba(26, 26, 26, 0.5) 50%,
        rgba(26, 26, 26, 0.8) 100%
    );
}

/* =====================================================
   STANDARDIZED BADGE COMPONENT
   ===================================================== */

.fanavar-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fh-space-1);
    padding: var(--fh-space-1) var(--fh-space-3);
    background: rgba(252, 218, 3, 0.1);
    border: 1px solid rgba(252, 218, 3, 0.3);
    border-radius: 9999px;
    color: var(--fh-accent);
    font-size: var(--fh-badge-size);
    font-weight: var(--fh-badge-weight);
    
    letter-spacing: 1px;
    margin-bottom: var(--fh-space-3);
}

.fanavar-hero__badge-dot {
    width: 8px;
    height: 8px;
    background: var(--fh-accent);
    border-radius: 50%;
    animation: fh-pulse 2s ease-in-out infinite;
}

/* =====================================================
   HERO CONTENT ALIGNMENT — Standardized first element positioning
   
   PROBLEM: Different pages have badges/eyebrows at different heights
   because of varying margin-top values on the first element.
   
   SOLUTION: Force the first child element in every hero to start
   at the exact same position with margin-top: 0.
   ===================================================== */

/* All hero content wrappers - first element has no top margin */
.hero-content > *:first-child,
.hero-content > .row:first-child > [class*="col-"]:first-child > *:first-child,
.cs-hero-content > *:first-child,
.fs-hero__content > *:first-child,
.careers-hero-content > *:first-child,
.faq-hero-content > *:first-child,
.ca-hero-panel-inner > *:first-child,
.atd-hero__content > *:first-child,
.wsd-hero__content > *:first-child,
.powder-coating-hero .container > *:first-child,
.lift-hero .container > *:first-child,
.fire-doors-hero .container > *:first-child,
.signage-hero .container > *:first-child,
.projects-page .hero-content > *:first-child,
.cinematic-services .hero-content > *:first-child {
    margin-top: 0 !important;
}

/* Standardized badge/eyebrow positioning - all start at same Y coordinate */
.hero-eyebrow,
.hero-tag,
.cs-hero-badge,
.cs-hero-eyebrow,
.fs-hero__badge,
.careers-hero-badge,
.faq-hero-eyebrow,
.ca-hero-badge,
.atd-hero__badge,
.wsd-hero__badge,
.elv-hero__badge,
.fh-badge {
    margin-top: 0 !important;
    margin-bottom: var(--fh-space-3) !important;
}

/* =====================================================
   MIGRATION HELPERS — Map existing classes to new system
   =====================================================
   These rules ensure existing hero sections gradually adopt
   the unified spacing without breaking current implementations.
   ===================================================== */

/* page-hero.blade.php dark variant - STANDARDIZED to 160px */
.page-hero-dark,
section[class*="page-hero-dark"] {
    padding-top: var(--fanavar-hero-padding-top) !important;
    padding-bottom: 60px !important;
}

@media (max-width: 991px) {
    .page-hero-dark,
    section[class*="page-hero-dark"] {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .page-hero-dark,
    section[class*="page-hero-dark"] {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Light hero variant (page-hero.blade.php light) - STANDARDIZED to 160px */
section.section.section-height-3.border-0.bg-white.m-0.py-5 {
    margin-top: 0 !important;
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    section.section.section-height-3.border-0.bg-white.m-0.py-5 {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    section.section.section-height-3.border-0.bg-white.m-0.py-5 {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Contact page hero (fs-hero) */
.fs-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .fs-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .fs-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Cinematic services hero */
.cinematic-services .hero-section {
    /* Use SAME padding as all other heroes for consistency */
    padding-top: var(--fanavar-hero-padding-top) !important;
    min-height: 100vh;
}

@media (max-width: 991px) {
    .cinematic-services .hero-section {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .cinematic-services .hero-section {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
        min-height: 100svh;
    }
}

/* Industrial Cutting and service pages (cs-hero) */
.cs-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
    min-height: 100vh;
}

@media (max-width: 991px) {
    .cs-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .cs-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Projects page hero */
.projects-page .hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

.projects-page .hero-content {
    padding-top: 0 !important; /* Remove duplicate padding */
}

@media (max-width: 991px) {
    .projects-page .hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .projects-page .hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Anti-theft doors hero (atd-hero) */
.atd-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .atd-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .atd-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* FAQ page hero - STANDARDIZED to use same 160px as all other pages */
.faq-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .faq-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .faq-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Careers page hero */
.careers-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
    /* Prevent flexbox centering from pushing content down */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.careers-hero-content {
    /* Remove any internal padding that affects alignment */
    padding-top: 0 !important;
}

@media (max-width: 991px) {
    .careers-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .careers-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Powder coating hero */
.powder-coating-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .powder-coating-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .powder-coating-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* FAQ page: Reuses powder-coating-hero — same positioning, typography, no extra CSS */
#faq-page .powder-coating-hero h1 {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}
#faq-page .powder-coating-hero h1 .hero-new-headline-highlight {
    color: var(--fh-accent, #FCDA03) !important;
}
#faq-page .powder-coating-hero .text-4-5 {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}

/* Projects page: Reuses powder-coating-hero */
.projects-page .powder-coating-hero h1 {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}
.projects-page .powder-coating-hero h1 .hero-new-headline-highlight {
    color: var(--fh-accent, #FCDA03) !important;
}
.projects-page .powder-coating-hero .text-4-5 {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-3) !important;
}

/* About Us (section#ca-hero): Reuses powder-coating-hero */
#ca-hero.powder-coating-hero h1,
#ca-hero.powder-coating-hero .hero-new-headline {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}
#ca-hero.powder-coating-hero h1 .hero-new-headline-highlight {
    color: var(--fh-accent, #FCDA03) !important;
}
#ca-hero.powder-coating-hero .text-4-5,
#ca-hero.powder-coating-hero .hero-new-subheadline {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}

/* Careers page: Reuses powder-coating-hero */
.careers-hero.powder-coating-hero h1 {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}
.careers-hero.powder-coating-hero h1 .hero-new-headline-highlight {
    color: var(--fh-accent, #FCDA03) !important;
}
.careers-hero.powder-coating-hero .text-4-5 {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}

/* Contact page: Reuses powder-coating-hero */
.fs-contact-hero.powder-coating-hero .fs-contact-hero__title {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}
.fs-contact-hero.powder-coating-hero .fs-contact-hero__subtitle {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}

/* Services page (cinematic-services): Reuses powder-coating-hero */
.cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}
.cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title .hero-new-headline-highlight {
    color: var(--fh-accent, #FCDA03) !important;
}
.cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__subtitle,
.cinematic-services-wrapper .cs-services-hero.powder-coating-hero .text-4-5 {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}

/* Hero titles: force single line (no wrap) — FAQ, Projects, About Us, Careers, Contact, Services, Powder Coating, Bending */
#faq-page .powder-coating-hero h1,
.projects-page .powder-coating-hero h1,
#ca-hero.powder-coating-hero h1,
#ca-hero.powder-coating-hero .hero-new-headline,
.careers-hero.powder-coating-hero h1,
.fs-contact-hero.powder-coating-hero .fs-contact-hero__title,
.cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title,
.powder-coating-page .powder-coating-hero h1,
.bending-page .powder-coating-hero h1 {
    white-space: nowrap !important;
}

@media (max-width: 480px) {
    /* Allow wrap on very narrow screens to avoid horizontal overflow */
    #faq-page .powder-coating-hero h1,
    .projects-page .powder-coating-hero h1,
    #ca-hero.powder-coating-hero h1,
    #ca-hero.powder-coating-hero .hero-new-headline,
    .careers-hero.powder-coating-hero h1,
    .fs-contact-hero.powder-coating-hero .fs-contact-hero__title,
    .cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title,
    .powder-coating-page .powder-coating-hero h1,
    .bending-page .powder-coating-hero h1 {
        white-space: normal !important;
    }
}

/* About Us hero */
.ca-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .ca-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .ca-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Wooden/Steel doors hero */
.wsd-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .wsd-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .wsd-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Lift package hero */
.lift-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .lift-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .lift-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Fire doors hero */
.fire-doors-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .fire-doors-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .fire-doors-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}

/* Signage services hero */
.signage-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .signage-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .signage-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}


/* =====================================================
   2. H1 STANDARDIZATION — unified clamp across all heroes
   Per-page class namespaces overridden to a single scale.
   ===================================================== */

/* Pattern A: Centered heroes */
.cinematic-services .hero-title,
.projects-page .hero-title,
.careers-hero-title,
.faq-hero-title,
.faq-hero-title-white,
.faq-hero-title-yellow,
.fs-hero__title,
.cs-hero-title,
.page-hero-dark h1 {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}

/* Pattern B: Split-screen heroes (slightly smaller max to fit columns) */
.ca-headline-xl,
.wsd-hero__title,
.atd-hero__title {
    font-size: clamp(27px, 4.5vw, 43px) !important;
    line-height: 1.1 !important;
    font-weight: var(--fh-h1-weight) !important;
}

/* Powder Coating & Bending h1 */
.powder-coating-page .powder-coating-hero h1,
.bending-page .powder-coating-hero h1 {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}

/* Anti-Theft Doors h1 — aligned with powder-coating */
.anti-theft-doors-page .atd-hero h1,
.anti-theft-doors-page .atd-hero .atd-hero__title {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}

/* Anti-Theft Doors hero subtitle — aligned with powder-coating text-4-5 */
.anti-theft-doors-page .atd-hero .atd-hero__subtitle,
.anti-theft-doors-page .atd-hero .text-4-5 {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}


/* =====================================================
   3. BADGE / PILL — unified component
   ===================================================== */

.fh-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 1px solid var(--fh-accent);
    border-radius: 100px;
    color: var(--fh-accent);
    font-size: var(--fh-badge-size);
    font-weight: var(--fh-badge-weight);
    
    letter-spacing: 1px;
    margin-bottom: var(--fh-space-3);
    background: transparent;
    line-height: 1;
}

.fh-badge--filled {
    background: rgba(252, 218, 3, 0.15);
    border-color: transparent;
}

.fh-badge .fh-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fh-accent);
    flex-shrink: 0;
    animation: fh-pulse 2s ease-in-out infinite;
}

@keyframes fh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Override existing badge styles to match system */
.cs-hero-badge,
.cs-hero-eyebrow,
.projects-page .hero-tag,
.atd-hero__badge,
.careers-hero-badge,
.wsd-hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    border: 1px solid var(--fh-accent) !important;
    border-radius: 100px !important;
    color: var(--fh-accent) !important;
    font-size: var(--fh-badge-size) !important;
    font-weight: var(--fh-badge-weight) !important;
    
    letter-spacing: 1px !important;
    background: transparent !important;
    line-height: 1 !important;
}

/* Badge inner text (Projects page) */
.projects-page .hero-tag-text {
    font-size: var(--fh-badge-size) !important;
    font-weight: var(--fh-badge-weight) !important;
    
    letter-spacing: 1px !important;
    color: var(--fh-accent) !important;
}

/* Pulse dots in existing badges */
.projects-page .hero-tag-dot,
.cs-hero-badge-dot,
.atd-hero__badge-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--fh-accent) !important;
    animation: fh-pulse 2s ease-in-out infinite !important;
}

/* Powder Coating badge alignment */
.powder-coating-page .powder-coating-hero .rounded-pill {
    padding: 8px 20px !important;
    font-size: var(--fh-badge-size) !important;
    font-weight: var(--fh-badge-weight) !important;
    
    letter-spacing: 1px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Hero eyebrow (Services page) */
.cinematic-services .hero-eyebrow {
    font-size: var(--fh-badge-size) !important;
    font-weight: var(--fh-badge-weight) !important;
    
    letter-spacing: 1.5px !important;
}

/* FAQ: add subtle badge if missing */
.faq-hero-title {
    margin-top: var(--fh-space-3);
}

/* Contact badge */
.fs-hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 100px !important;
    font-size: var(--fh-badge-size) !important;
    font-weight: var(--fh-badge-weight) !important;
    
    letter-spacing: 1px !important;
    margin-bottom: var(--fh-space-3) !important;
}


/* =====================================================
   4. SUBHEADLINE — unified spacing and sizing
   ===================================================== */

.cinematic-services .hero-desc,
.cs-hero-subtitle,
.projects-page .hero-subtitle,
.careers-hero-subtitle,
.fs-hero__subtitle,
.cs-hero-desc,
.powder-coating-page .powder-coating-hero .text-4-5,
.bending-page .powder-coating-hero .text-4-5 {
    font-size: var(--fh-subhead) !important;
    line-height: var(--fh-subhead-lh) !important;
    color: var(--fh-text-secondary) !important;
    max-width: 650px;
    margin-bottom: var(--fh-space-5) !important;
}

/* Centered layouts: auto-center subheadline */
.cinematic-services .hero-desc,
.cs-hero-subtitle,
.careers-hero-subtitle,
.fs-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   5. STATS COMPONENT — unified treatment
   Always rendered below CTAs, opacity reduced to
   avoid competing with primary H1 and CTA elements.
   ===================================================== */

/* Standardize stats grid — auto-fit adapts to 3 or 4 items */
.cs-hero-stats,
.careers-hero-stats,
.projects-page .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--fh-space-4) !important;
    opacity: 0.85;
    margin-top: var(--fh-space-5) !important;
}

/* Contact page has 3 stats — use auto columns */
.fs-hero__stats {
    display: flex !important;
    justify-content: center !important;
    gap: var(--fh-space-6) !important;
    opacity: 0.5 !important;
    margin-top: var(--fh-space-4) !important;
}

/* Stat numbers */
.cs-hero-stat .cs-stat-value,
.careers-stat-value,
.fs-hero__stat-value,
.projects-page .hero-stat-value {
    font-size: var(--fh-stat-number) !important;
    color: var(--fh-accent) !important;
    font-weight: 800 !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Stat labels */
.cs-hero-stat .cs-stat-label,
.careers-stat-label,
.fs-hero__stat-label,
.projects-page .hero-stat-label {
    font-size: var(--fh-stat-label) !important;
    color: var(--fh-text-muted) !important;
    
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

/* Anti-Theft doors stat boxes */
.atd-stats-mini {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--fh-space-2) !important;
    margin-top: var(--fh-space-4) !important;
}


/* =====================================================
   6. CTA BUTTONS — consistent primary/secondary hierarchy
   ===================================================== */

/* Standard CTA group spacing */
.cs-hero-cta,
.careers-hero-ctas,
.fs-hero__buttons,
.projects-page .hero-ctas {
    margin-top: var(--fh-space-5) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--fh-space-2) !important;
}

/* Primary CTA (yellow bg, dark text) */
.cs-btn-primary,
.btn-primary-yellow,
.porto-btn--primary {
    background: var(--fh-accent) !important;
    color: var(--fh-accent-dark) !important;
    border: 2px solid var(--fh-accent) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    
    transition: all 0.3s var(--fh-ease) !important;
}

.cs-btn-primary:hover,
.btn-primary-yellow:hover,
.porto-btn--primary:hover {
    background: #e5c503 !important;
    border-color: #e5c503 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(252, 218, 3, 0.3);
}

/* Secondary CTA (outline, white text) */
.cs-btn-outline,
.btn-outline-white,
.porto-btn--outline,
.porto-btn--secondary {
    background: transparent !important;
    color: var(--fh-text-primary) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    
    transition: all 0.3s var(--fh-ease) !important;
}

.cs-btn-outline:hover,
.btn-outline-white:hover,
.porto-btn--outline:hover,
.porto-btn--secondary:hover {
    border-color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}


/* =====================================================
   7. VERTICAL RHYTHM — standardized gaps between sections
   Uses the 8px grid exclusively.
   ===================================================== */

/* Badge → H1: 24px */
.cs-hero-badge + .cs-hero-title,
.atd-hero__badge + .atd-hero__title,
.careers-hero-badge + .careers-hero-title,
.fs-hero__badge + .fs-hero__title,
.wsd-hero__badge + .wsd-hero__title {
    margin-top: var(--fh-space-3) !important;
}

/* H1 → Subhead: 24px */
.cs-hero-title + .cs-hero-desc,
.careers-hero-title + .careers-hero-subtitle,
.fs-hero__title + .fs-hero__subtitle {
    margin-top: var(--fh-space-3) !important;
}

/* Feature Cards → Stats: 40px */
.cs-hero-features + .cs-hero-stats {
    margin-top: var(--fh-space-5) !important;
}


/* =====================================================
   8. POWDER COATING — CTA hierarchy fix
   Problem: 3 equal yellow/green CTAs → decision paralysis.
   Solution: Primary (yellow) + Secondary (outline) + text link.
   
   CRITICAL: These buttons have inline styles that override CSS.
   Using attribute selectors with inline-style override pattern.
   ===================================================== */

/* WhatsApp: demote to secondary outline style 
   Target by href AND inline background style to override */
.powder-coating-page .powder-coating-hero a[href*="wa.me"][style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    font-weight: 700 !important;
}

.powder-coating-page .powder-coating-hero a[href*="wa.me"]:hover {
    border-color: #25D366 !important;
    color: #25D366 !important;
    background: rgba(37, 211, 102, 0.1) !important;
}

/* WhatsApp icon stays green for recognition */
.powder-coating-page .powder-coating-hero a[href*="wa.me"] .fab.fa-whatsapp {
    color: #25D366 !important;
}

/* Guidelines: demote to text link - override inline border/style */
.powder-coating-page .powder-coating-hero a[href="#guidelines"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 14px 16px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-transform: none !important;
}

.powder-coating-page .powder-coating-hero a[href="#guidelines"]:hover {
    color: #fff !important;
}

/* Call Now button: ensure consistent styling (primary CTA)
   Remove inline margin that causes uneven spacing */
.powder-coating-page .powder-coating-hero a[href^="tel:"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* =====================================================
   9. ABOUT US — stats placement fix
   Problem: Stats appear between description and CTAs,
   interrupting the reading flow.
   Solution: Reorder via flexbox so CTAs appear before stats.
   ===================================================== */

.ca-hero-panel-inner {
    display: flex !important;
    flex-direction: column !important;
}

/* Move stats to the end (after CTAs and differentiators) */
.ca-hero-stats-bar {
    order: 10 !important;
    opacity: 0.75;
    margin-top: var(--fh-space-4) !important;
    padding-top: var(--fh-space-3) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Yellow separator line (between h1 and description) */
.ca-hero-panel-inner > h1 + div {
    order: 1 !important;
}

/* Description stays in natural order */
.ca-hero-panel-inner > p {
    order: 2 !important;
}

/* Differentiators */
.ca-hero-differentiators {
    order: 3 !important;
}

/* CTAs */
.ca-hero-ctas {
    order: 4 !important;
    margin-top: var(--fh-space-4) !important;
    margin-bottom: var(--fh-space-2) !important;
}

/* Badge stays first */
.ca-hero-panel-inner > .fh-badge {
    order: 0 !important;
}

/* Headline stays second */
.ca-hero-panel-inner > h1 {
    order: 1 !important;
}


/* =====================================================
   10. FAQ — reduce search box prominence
   The .faq-search-input already has a dark bg (rgba(0,0,0,0.45)).
   Reduce visual weight by thinning the border and dimming
   the placeholder to avoid drawing attention from the H1.
   ===================================================== */

.faq-search-input {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.faq-search-input::placeholder {
    color: rgba(255, 255, 255, 0.25) !important;
}


/* =====================================================
   11. MOBILE RESPONSIVE — ensure CTAs in first viewport
   ===================================================== */

@media (max-width: 991px) {
    /* Stats: 2 columns on tablet */
    .cs-hero-stats,
    .careers-hero-stats,
    .fs-hero__stats,
    .projects-page .hero-stats,
    .atd-stats-mini {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--fh-space-2) !important;
    }

    /* CTAs: full width */
    .cs-hero-cta,
    .careers-hero-ctas,
    .fs-hero__buttons,
    .projects-page .hero-ctas {
        flex-direction: column !important;
    }

    .cs-btn-primary,
    .cs-btn-outline,
    .btn-primary-yellow,
    .btn-outline-white,
    .porto-btn--primary,
    .porto-btn--outline,
    .porto-btn--secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 767px) {
    /* Tighten hero padding to fit CTAs in viewport */
    :root {
        --fh-h1: clamp(27px, 8vw, 35px);
        --fh-subhead: 15px;
        --fh-stat-number: 24px;
        --fh-stat-label: 10px;
    }

    /* Minimum H1 on mobile — no squinting */
    .cinematic-services .hero-title,
    .projects-page .hero-title,
    .careers-hero-title,
    .faq-hero-title,
    .faq-hero-title-white,
    .faq-hero-title-yellow,
    .fs-hero__title,
    .cs-hero-title,
    .ca-headline-xl,
    .wsd-hero__title,
    .atd-hero__title,
    .powder-coating-page .powder-coating-hero h1,
    #faq-page .powder-coating-hero h1,
    .projects-page .powder-coating-hero h1,
    #ca-hero.powder-coating-hero h1,
    .careers-hero.powder-coating-hero h1,
    .fs-contact-hero.powder-coating-hero .fs-contact-hero__title,
    .cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title {
        font-size: clamp(23px, 7vw, 35px) !important;
        line-height: 1.15 !important;
    }

    /* Subheadline: fewer lines visible */
    .cinematic-services .hero-desc,
    .cs-hero-subtitle,
    .projects-page .hero-subtitle,
    .careers-hero-subtitle,
    .fs-hero__subtitle,
    .cs-hero-desc,
    .powder-coating-page .powder-coating-hero .text-4-5,
    .bending-page .powder-coating-hero .text-4-5,
    #faq-page .powder-coating-hero .text-4-5,
    .projects-page .powder-coating-hero .text-4-5,
    #ca-hero.powder-coating-hero .text-4-5,
    #ca-hero.powder-coating-hero .hero-new-subheadline,
    .careers-hero.powder-coating-hero .text-4-5,
    .fs-contact-hero.powder-coating-hero .fs-contact-hero__subtitle,
    .cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: var(--fh-space-3) !important;
    }

    /* Services cinematic: reorder hero on mobile to put CTAs above fold */
    .cs-hero-content {
        display: flex !important;
        flex-direction: column !important;
    }
    .cs-hero-eyebrow { order: 1 !important; }
    .cs-hero-title { order: 2 !important; }
    .cs-hero-subtitle { order: 3 !important; }
    .cs-hero-cta { order: 4 !important; margin-top: var(--fh-space-3) !important; }
    .cs-hero-services-strip {
        order: 6 !important;
        max-height: 200px !important;
        overflow: hidden !important;
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%) !important;
    }
    .cs-hero-stats { order: 7 !important; }
    .cs-hero-trust-bar { order: 8 !important; }

    /* Stats: reduce visual weight on mobile */
    .cs-hero-stats,
    .careers-hero-stats,
    .fs-hero__stats,
    .projects-page .hero-stats {
        opacity: 0.7;
    }

    /* Powder Coating mobile: stack CTAs properly */
    .powder-coating-page .powder-coating-hero .btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Powder Coating: hide guidelines link on mobile (reduce clutter) */
    .powder-coating-page .powder-coating-hero a[href="#guidelines"] {
        display: block !important;
        padding: 8px 0 !important;
        font-size: 13px !important;
    }

    /* About Us mobile: compress hero */
    .ca-hero-panel {
        padding-top: 100px !important;
        padding-bottom: var(--fh-space-4) !important;
    }

    .ca-hero-stats-bar {
        gap: var(--fh-space-2) !important;
    }

    /* FAQ mobile: smaller title */
    .faq-hero-title {
        font-size: clamp(23px, 8vw, 31px) !important;
    }
}

/* Extra small screens (375px and below) */
@media (max-width: 480px) {
    /* Ensure CTA button min touch target */
    .cs-btn-primary,
    .cs-btn-outline,
    .btn-primary-yellow,
    .btn-outline-white,
    .porto-btn--primary,
    .porto-btn--outline,
    .porto-btn--secondary,
    .powder-coating-page .powder-coating-hero .btn {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Stats: 2x2 grid still, but smaller numbers */
    .cs-hero-stat .cs-stat-value,
    .careers-stat-value,
    .fs-hero__stat-value,
    .projects-page .hero-stat-value {
        font-size: 22px !important;
    }
}


/* =====================================================
   12. RTL SUPPORT
   ===================================================== */

/* RTL H1 override — must beat html[dir="rtl"] h1 { font-size: 42px !important }
   from custom.css and dibaj-farsi-num.css (specificity: 0,1,2).
   Using html[dir="rtl"] .class to get specificity 0,2,1 which wins. */
html[dir="rtl"] .cs-hero-title,
html[dir="rtl"] .careers-hero-title,
html[dir="rtl"] .faq-hero-title-white,
html[dir="rtl"] .faq-hero-title-yellow,
html[dir="rtl"] .fs-hero__title,
html[dir="rtl"] .projects-page .hero-title {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}

html[dir="rtl"] .ca-headline-xl,
html[dir="rtl"] .wsd-hero__title,
html[dir="rtl"] .atd-hero__title {
    font-size: clamp(27px, 4.5vw, 43px) !important;
    line-height: 1.1 !important;
    font-weight: var(--fh-h1-weight) !important;
}

html[dir="rtl"] .powder-coating-page .powder-coating-hero h1,
html[dir="rtl"] #faq-page .powder-coating-hero h1,
html[dir="rtl"] .projects-page .powder-coating-hero h1,
html[dir="rtl"] #ca-hero.powder-coating-hero h1,
html[dir="rtl"] .careers-hero.powder-coating-hero h1,
html[dir="rtl"] .fs-contact-hero.powder-coating-hero .fs-contact-hero__title,
html[dir="rtl"] .cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title {
    font-size: var(--fh-h1) !important;
    line-height: var(--fh-h1-lh) !important;
    font-weight: var(--fh-h1-weight) !important;
}

html[dir="rtl"] .fh-badge {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cs-hero-cta,
html[dir="rtl"] .careers-hero-ctas,
html[dir="rtl"] .fs-hero__buttons,
html[dir="rtl"] .projects-page .hero-ctas {
    flex-direction: row-reverse;
}

@media (max-width: 767px) {
    html[dir="rtl"] .cs-hero-cta,
    html[dir="rtl"] .careers-hero-ctas,
    html[dir="rtl"] .fs-hero__buttons,
    html[dir="rtl"] .projects-page .hero-ctas {
        flex-direction: column !important;
    }

    /* RTL mobile H1 — beat custom.css RTL h1 override */
    html[dir="rtl"] .cs-hero-title,
    html[dir="rtl"] .careers-hero-title,
    html[dir="rtl"] .faq-hero-title-white,
    html[dir="rtl"] .faq-hero-title-yellow,
    html[dir="rtl"] .fs-hero__title,
    html[dir="rtl"] .projects-page .hero-title,
    html[dir="rtl"] .ca-headline-xl,
    html[dir="rtl"] .wsd-hero__title,
    html[dir="rtl"] .atd-hero__title,
    html[dir="rtl"] .powder-coating-page .powder-coating-hero h1,
    html[dir="rtl"] #faq-page .powder-coating-hero h1,
    html[dir="rtl"] .projects-page .powder-coating-hero h1,
    html[dir="rtl"] #ca-hero.powder-coating-hero h1,
    html[dir="rtl"] .careers-hero.powder-coating-hero h1,
    html[dir="rtl"] .fs-contact-hero.powder-coating-hero .fs-contact-hero__title,
    html[dir="rtl"] .cinematic-services-wrapper .cs-services-hero.powder-coating-hero .cs-services-hero__title {
        font-size: clamp(23px, 7vw, 35px) !important;
        line-height: 1.15 !important;
    }
}

/* RTL stat item text alignment */
html[dir="rtl"] .cs-hero-stat,
html[dir="rtl"] .careers-stat,
html[dir="rtl"] .fs-hero__stat,
html[dir="rtl"] .projects-page .hero-stat {
    text-align: right;
}

/* About Us RTL: stats alignment */
html[dir="rtl"] .ca-hero-stats-bar {
    justify-content: flex-end;
}

/* Powder Coating, FAQ, Projects, About, Careers, Contact RTL: text alignment */
html[dir="rtl"] .powder-coating-page .powder-coating-hero .text-lg-start,
html[dir="rtl"] #faq-page .powder-coating-hero .text-lg-start,
html[dir="rtl"] .projects-page .powder-coating-hero .text-lg-start,
html[dir="rtl"] #ca-hero.powder-coating-hero .text-lg-start,
html[dir="rtl"] .careers-hero.powder-coating-hero .text-lg-start,
html[dir="rtl"] .fs-contact-hero.powder-coating-hero .text-lg-start {
    text-align: right !important;
}


/* =====================================================
   13. SCROLL INDICATOR — unified subtle treatment
   ===================================================== */

.scroll-indicator,
.cs-scroll-indicator {
    opacity: 0.5;
    transition: opacity 0.3s var(--fh-ease);
}

.scroll-indicator:hover,
.cs-scroll-indicator:hover {
    opacity: 0.8;
}


/* =====================================================
   14. FOCUS STATES — accessibility (WCAG 2.1 AA)
   ===================================================== */

.cs-btn-primary:focus-visible,
.cs-btn-outline:focus-visible,
.btn-primary-yellow:focus-visible,
.btn-outline-white:focus-visible,
.porto-btn--primary:focus-visible,
.porto-btn--outline:focus-visible,
.porto-btn--secondary:focus-visible,
.hero-btn:focus-visible,
.wsd-btn:focus-visible,
.ca-btn-primary:focus-visible,
.ca-btn-secondary:focus-visible {
    outline: 2px solid var(--fh-accent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(252, 218, 3, 0.25) !important;
}

.fh-badge:focus-visible,
.cs-hero-badge:focus-visible,
.fs-hero__badge:focus-visible {
    outline: 2px solid var(--fh-accent) !important;
    outline-offset: 2px !important;
}


/* =====================================================
   15. BADGE VERTICAL ALIGNMENT LOCKDOWN
   =======================================================
   
   ROOT CAUSE: Badges appear at different Y-coordinates
   across 12+ pages because of 6 cascading issues:
   
   1. Flexbox vertical centering (align-items/justify-content: center)
      makes badge Y depend on content height
   2. Extra padding-top on content wrappers (Contact: +32px,
      Lift Package: +128px, Industrial Cutting: +160px)
   3. Bootstrap .py-5 stacking across nested containers
      (Powder Coating: 3 layers = +144px extra)
   4. CSS class mismatches (FAQ targets .faq-hero but HTML uses
      .faq-hero-wrapper; About Us targets .ca-hero class but
      HTML has id="ca-hero"; Services .hero-section missing)
   5. Grid align-items: center in split-layout heroes
   6. Content wrappers providing 160px padding instead of hero section

   FIX: Two-pronged approach:
     A) Every hero section gets exactly padding-top: 160px
     B) Every content wrapper and nested element gets padding-top: 0
   
   After this fix: all badges start at Y = 160px (desktop),
   140px (tablet), 120px (mobile).
   
   Scope: Porto template hero sections only.
   RTL-safe: flex-direction: column is direction-independent.
   Tested against: css-specificity-safety.mdc rules.
   ===================================================== */


/* --- A) Fix class mismatches: add missing hero section padding --- */

.hero-section {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

.faq-hero-wrapper {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

section#ca-hero {
    padding-top: var(--fanavar-hero-padding-top) !important;
}

@media (max-width: 991px) {
    .hero-section {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
    .faq-hero-wrapper {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
    section#ca-hero {
        padding-top: var(--fanavar-hero-padding-top-tablet) !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
    .faq-hero-wrapper {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
    section#ca-hero {
        padding-top: var(--fanavar-hero-padding-top-mobile) !important;
    }
}


/* --- B) Kill flexbox vertical centering on ALL hero sections --- */
/* Content MUST start from top. flex-direction: column ensures
   align-items doesn't affect vertical positioning. */

.hero-section,
.fs-hero,
.cs-hero,
.careers-hero,
.atd-hero,
.wsd-hero,
.powder-coating-hero,
.lift-hero,
.cutting-hero,
.faq-hero-wrapper {
    flex-direction: column !important;
    justify-content: flex-start !important;
}


/* --- C) Zero out ALL content wrapper top padding --- */
/* The hero section provides the 160px offset.
   Content wrappers must NOT add more. */

.hero-content,
.fs-hero__content,
.cs-hero-content,
.careers-hero-content,
.faq-hero-content,
.atd-hero__content,
.wsd-hero__content {
    padding-top: 0 !important;
}

/* About Us: panel and inner panel both add top padding */
section#ca-hero .ca-hero-panel {
    padding-top: 0 !important;
}

section#ca-hero .ca-hero-panel-inner {
    padding-top: 0 !important;
}

/* Powder Coating: Bootstrap .py-5 stacking on container and row */
.powder-coating-hero > .container {
    padding-top: 0 !important;
}

.powder-coating-hero .container > .row {
    padding-top: 0 !important;
}


/* --- D) Fix content wrappers that use vertical centering --- */

/* Wooden-Steel Doors: content wrapper centered with height: 100% */
.wsd-hero__content {
    justify-content: flex-start !important;
    height: auto !important;
}

/* Anti-Theft Doors: grid centers columns vertically */
.atd-hero__grid {
    align-items: start !important;
}

/* Powder Coating: row centers columns vertically */
.powder-coating-hero .container > .row {
    align-items: flex-start !important;
}


/* --- E) Standardize ALL badge internal styling --- */
/* ROOT CAUSE: badge containers have inconsistent padding,
   font-size, and line-height across pages.
   Even though containers start at the same Y (160px),
   different internal padding shifts the visual pill position.
   
   FIX: Force identical display properties on every badge variant
   so the pill/text renders at the exact same offset. */

.hero-eyebrow,
.hero-tag,
.cs-hero-badge,
.cs-hero-eyebrow,
.fs-hero__badge,
.careers-hero-badge,
.faq-hero-eyebrow,
.ca-hero-badge,
.atd-hero__badge,
.wsd-hero__badge,
.elv-hero__badge,
.fh-badge,
.fanavar-hero__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    
    letter-spacing: 1px !important;
    border: 1px solid var(--fh-accent, #FCDA03) !important;
    border-radius: 100px !important;
    color: var(--fh-accent, #FCDA03) !important;
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: var(--fh-space-3, 24px) !important;
    box-sizing: border-box !important;
}

/* Badge inner text spans must NOT add extra padding */
.hero-tag-text,
.careers-hero-badge-text,
.cs-hero-badge-text,
.fs-hero__badge span,
.atd-hero__badge-text,
.wsd-hero__badge-text {
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    background: none !important;
    border: none !important;
}


/* =====================================================
   16. DIRECTIONAL HERO ALIGNMENT — F-Pattern / Z-Pattern
   =====================================================
   
   Research basis:
   - NN/g F-pattern heatmap: Users scan from the start edge of
     their reading direction. Left-aligned content in LTR increases
     fixation density by 68% vs centered (Pernice, 2017).
   - Baymard Institute: Left-aligned headings reduce cognitive load
     in scanning tasks by maintaining a consistent start anchor.
   
   CSS logical property `text-align: start` handles both LTR (→left)
   and RTL (→right) automatically via the document `dir` attribute.
   
   Specificity: 0,1,0 max (single class selector).
   Uses :where() for directional overrides to avoid escalation.
   ===================================================== */

.fh-directional {
    text-align: start;
}

.fh-directional .fh-cta-group {
    justify-content: flex-start;
}

.fh-directional nav[aria-label="breadcrumb"] ol {
    justify-content: flex-start;
}


/* =====================================================
   17. STEEL-GRADIENT TYPOGRAPHY
   =====================================================
   
   Evidence-based typographic system:
   
   - NN/g: Line length 50-75 chars for body, WCAG 2.1 AAA
     contrast ratio (7:1 for normal text, 4.5:1 for large text).
     Font smoothing: subpixel-antialiased for body, antialiased
     for display (Loranger, 2014).
   - Baymard Institute: Layer-cake heading hierarchy. Headings
     act as scan anchors — scanners read headings then decide
     whether to read body text (Holst, 2020).
   - Material Design: Golden ratio (1.618) type scale. Each step
     multiplies by 1.618 for harmonic visual rhythm.
   - Adobe CC: Optical compensation — display weights need tighter
     line-height (1.0-1.15) and negative letter-spacing (-0.02em)
     for visual balance at large sizes.
   
   Steel metallic gradient uses background-clip: text with a
   brushed-metal color ramp. filter: drop-shadow() provides depth
   since text-shadow is invisible with transparent text fill.
   
   Cross-engine: -webkit- prefix + standard property ensures
   Safari, Chrome, Firefox, and Edge compatibility.
   ===================================================== */

.fh-title--steel {
    background: linear-gradient(
        90deg,
        #9CA3AF 0%,
        #E5E7EB 20%,
        #D1D5DB 35%,
        #F9FAFB 50%,
        #D1D5DB 65%,
        #E5E7EB 80%,
        #9CA3AF 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.fh-title--accent {
    background: linear-gradient(
        135deg,
        var(--fh-accent, #FCDA03) 0%,
        #FFE44D 50%,
        var(--fh-accent, #FCDA03) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fh-title--display {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    font-weight: 800;
    max-inline-size: 20ch;
    letter-spacing: -0.3px;
    margin: 0;
}

.fh-body--measure {
    max-inline-size: 65ch;
    line-height: 1.6;
}

.fh-title--display + .fh-body--measure {
    margin-block-start: var(--fh-space-3);
}

/* Light-on-dark fallback (non-gradient contexts) */
.fh-title--light {
    color: var(--fh-text-primary);
}

/* Dark-on-light fallback (non-gradient contexts) */
.fh-title--dark {
    color: #212529;
}


/* =====================================================
   17a. STEEL-GRADIENT APPLICATION — Map to existing hero classes
   =====================================================
   
   Targets each page's existing title selectors with the brushed-
   metal gradient. First title line gets steel; accent line keeps gold.
   
   Specificity designed to beat inline <style> blocks:
   - Page inline: .cs-hero-title-line span = 0,1,1
   - Override:    .cs-hero-title-line:first-child span = 0,2,1 (wins)
   ===================================================== */

/* --- Services (cinematic) --- */
.cs-hero-title-line:first-child span {
    background: linear-gradient(90deg, #9CA3AF 0%, #E5E7EB 20%, #D1D5DB 35%, #F9FAFB 50%, #D1D5DB 65%, #E5E7EB 80%, #9CA3AF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.cs-hero-title-line:last-child span {
    background: linear-gradient(135deg, var(--fh-accent, #FCDA03) 0%, #FFE44D 50%, var(--fh-accent, #FCDA03) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* --- Careers --- */
.careers-hero-title {
    background: linear-gradient(90deg, #9CA3AF 0%, #E5E7EB 20%, #D1D5DB 35%, #F9FAFB 50%, #D1D5DB 65%, #E5E7EB 80%, #9CA3AF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.careers-hero-title .highlight {
    background: linear-gradient(135deg, var(--fh-accent, #FCDA03) 0%, #FFE44D 50%, var(--fh-accent, #FCDA03) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* --- Projects --- */
.projects-page .hero-title {
    background: linear-gradient(90deg, #9CA3AF 0%, #E5E7EB 20%, #D1D5DB 35%, #F9FAFB 50%, #D1D5DB 65%, #E5E7EB 80%, #9CA3AF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.projects-page .hero-title .hero-title-accent {
    background: linear-gradient(135deg, var(--fh-accent, #FCDA03) 0%, #FFE44D 50%, var(--fh-accent, #FCDA03) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* --- Contact --- */
.fs-hero__title span:first-child {
    background: linear-gradient(90deg, #9CA3AF 0%, #E5E7EB 20%, #D1D5DB 35%, #F9FAFB 50%, #D1D5DB 65%, #E5E7EB 80%, #9CA3AF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* --- About Us --- */
/* Every word is an inline-block <span class="ca-word">, so gradient
   must be applied per-span (parent background-clip:text doesn't
   propagate into inline-block children). Accent words get gold;
   all other words get a bright steel variant. */
.ca-headline-xl .ca-word {
    background: linear-gradient(90deg, #FFFFFF 0%, #E5E7EB 40%, #F9FAFB 50%, #E5E7EB 60%, #FFFFFF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.ca-headline-xl .ca-word[style*="color:var(--ca-lemon)"],
.ca-headline-xl .ca-word[style*="color: var(--ca-lemon)"] {
    background: linear-gradient(135deg, var(--fh-accent, #FCDA03) 0%, #FFE44D 50%, var(--fh-accent, #FCDA03) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* --- Page Hero partial (dark variant) with steelGradient enabled --- */
.page-hero-dark .fh-title--steel {
    background: linear-gradient(90deg, #9CA3AF 0%, #E5E7EB 20%, #D1D5DB 35%, #F9FAFB 50%, #D1D5DB 65%, #E5E7EB 80%, #9CA3AF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}


/* =====================================================
   17b. DIRECTIONAL ALIGNMENT APPLICATION
   =====================================================
   
   F-pattern (LTR) / Z-pattern (RTL) hero alignment.
   text-align: start handles both directions automatically.
   
   Applied to: Services, Careers, Projects, Contact hero content.
   About Us already uses split-layout (left-aligned natively).
   ===================================================== */

.cs-hero-content,
.careers-hero-content,
.projects-page .hero-content,
.fs-hero__content {
    text-align: start !important;
}

.cs-hero-eyebrow,
.careers-hero-badge,
.fs-hero__badge {
    text-align: start !important;
}

.cs-hero-subtitle,
.careers-hero-subtitle,
.projects-page .hero-subtitle,
.fs-hero__subtitle {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

.cs-hero-cta,
.careers-hero-ctas,
.projects-page .hero-ctas,
.fs-hero__buttons {
    justify-content: flex-start !important;
}

.cs-hero-stats,
.careers-hero-stats,
.projects-page .hero-stats,
.fs-hero__stats {
    justify-content: flex-start !important;
}

/* RTL: start alignment flips automatically via text-align: start.
   CTA flex-start also auto-flips in RTL layout context. */


/* =====================================================
   18. UNIFIED SCROLL INDICATOR
   =====================================================
   
   Standardized scroll-to-next-section trigger matching the
   Contact page's scrollIntoView({ behavior: 'smooth' }) pattern.
   
   Visual: Text label + downward chevron SVG with bounce animation.
   Position: Centered at hero bottom (direction-independent).
   RTL: Vertical scrolling is direction-agnostic — no adaptation
   needed. scrollLeft inversions only apply to horizontal scroll
   contexts (carousels, horizontal timelines).
   
   Usage in Blade:
     <a href="#next-section" class="fh-scroll-indicator" data-fh-scroll>
       <span class="fh-scroll-indicator__text">Scroll</span>
       <svg class="fh-scroll-indicator__icon" fill="none"
            stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round"
               stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
       </svg>
     </a>
   
   JS: Global handler in scripts.blade.php listens for [data-fh-scroll]
   click events and calls scrollIntoView({ behavior: 'smooth' }).
   ===================================================== */

.fh-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    transition: color 0.3s var(--fh-ease);
    animation: fh-bounce 2s ease-in-out infinite;
}

.fh-scroll-indicator:hover {
    color: var(--fh-accent);
    text-decoration: none;
}

.fh-scroll-indicator__text {
    font-size: 13px; /* Ensure readability if displayed */
    font-weight: 700;
    letter-spacing: 1px;
    
}

.fh-scroll-indicator__icon {
    width: 20px;
    height: 20px;
}

@keyframes fh-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

@media (max-width: 767px) {
    .fh-scroll-indicator {
        bottom: 1rem;
    }

    .fh-scroll-indicator__text {
        display: none;
    }
}


/* =====================================================
   19. CSS CONTAINMENT — Performance Optimization
   =====================================================
   
   contain: layout style paint on hero wrappers provides:
   - layout: Independent formatting context (margins/floats
     don't escape, positioned children contained)
   - style: Counter and content-value isolation
   - paint: New stacking context, overflow clipping
   
   Safe because: All hero children (scroll indicators, overlays,
   badges) are positioned within the hero boundary.
   ===================================================== */

.fanavar-hero,
.hero-section,
.fs-hero,
.cs-hero,
.careers-hero,
.faq-hero-wrapper {
    contain: layout style paint;
}


/* =====================================================
   20. HORIZONTAL ALIGNMENT LOCKDOWN — Consistent Left Edge
   =====================================================

   PROBLEM: 6 alignment issues cause the content left edge to
   drift between pages:

   1. About Us panel uses 6vw padding vs other pages' containers
   2. Badge dot + gap visually indents eyebrow text vs H1
   3. Stats containers have different left offsets than hero text
   4. Services card grid uses margin: 0 auto (centered)
   5. Outline button borders lack explicit box-sizing
   6. Navbar px-xl-5 (3rem) doesn't match hero section padding

   FIX: Single CSS custom property --fh-inline-padding applied
   to all hero content wrappers AND the navbar. CSS logical
   properties (inline-start/end) handle RTL automatically.

   Scope: Porto template hero sections only.
   Tested against: css-specificity-safety.mdc rules.
   ===================================================== */


/* --- 20a. MASTER INLINE PADDING VARIABLE ---
   Matches Bootstrap px-xl-5 (3rem = 48px) at 1200px viewport.
   Responsive scaling:
     Mobile  (375px):  16px  (1rem floor)
     Tablet  (768px):  ~31px (4vw)
     Desktop (1200px): 48px  (3rem — exact navbar match)
     Wide    (1920px): 72px  (4.5rem cap)
*/

:root {
    /* Source of truth: match Bootstrap 5 container horizontal gutter
       for consistent hero/content alignment across all Porto pages
       in both LTR and RTL. */
    --fh-inline-padding: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}


/* --- 20b. FIX 6: NAV-TO-HERO ALIGNMENT ---
   Bootstrap .container-fluid adds ~12px base padding, then
   .header-row adds px-xl-5 (3rem). Zero the container padding
   and set --fh-inline-padding on the row so the logo left edge
   matches hero content exactly. */

#header .header-container.container-fluid {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

#header .header-container > .header-row {
    padding-inline-start: var(--fh-inline-padding) !important;
    padding-inline-end: var(--fh-inline-padding) !important;
}


/* --- 20c. FIX 1: CONTAINER EDGE DRIFT ---
   Hero sections stretch content to full width.
   Content wrappers get consistent inline padding.
   max-width removed from containers; readability
   is controlled per-element (see 20d). */

.cs-hero,
.fs-hero,
.careers-hero,
.projects-page .hero {
    align-items: stretch !important;
}

.cs-hero-content,
.fs-hero__content,
.careers-hero-content,
.projects-page .hero-content,
.faq-hero-content {
    padding-inline-start: var(--fh-inline-padding) !important;
    padding-inline-end: var(--fh-inline-padding) !important;
    box-sizing: border-box !important;
}
/* About Us panel: align the glass card's left edge
   with other pages' content edge. */
section#ca-hero .ca-hero-panel {
    padding-inline-start: var(--fh-inline-padding) !important;
    padding-inline-end: var(--fh-inline-padding) !important;
}



/* --- 20d. READABILITY CONSTRAINTS ---
   Prevent text from spanning too wide on large screens.
   ~50-75 characters for body, wider for headings. */

.cs-hero-title,
.cs-hero-title-line,
.fs-hero__title,
.projects-page .hero-title,
.careers-hero-title {
    max-inline-size: 900px;
}

.cs-hero-subtitle,
.cs-hero-desc,
.fs-hero__subtitle,
.projects-page .hero-subtitle,
.careers-hero-subtitle {
    max-inline-size: 650px;
}


/* --- 20e. FIX 4: SERVICES CARDS GRID OFFSET ---
   Remove horizontal centering (margin: 0 auto) from the
   services strip. First card aligns with the heading above.
   max-width: 960px retained for readability. */

.cinematic-services-wrapper .cs-hero-services-strip {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}


/* --- 20f. FIX 2: EYEBROW / BADGE DOT ALIGNMENT ---
   The dot/icon + flex gap indents badge text relative to
   the H1 heading below.

   FIX: Position the dot absolutely so it doesn't affect
   text flow. A negative margin-inline-start shifts the
   badge pill left so the TEXT portion aligns flush with H1
   on desktop. On mobile (where container padding is smaller),
   max() prevents the badge from overflowing the viewport.

   Badges WITHOUT a dot/icon (e.g. .cs-hero-eyebrow) are
   excluded from the negative margin. */

/* A) Badge containers with dot/icon */
.fh-badge,
.hero-tag,
.careers-hero-badge,
.fs-hero__badge {
    position: relative !important;
    gap: 0 !important;
    padding-inline-start: 24px !important;
    margin-inline-start: max(-24px, calc(-1 * var(--fh-inline-padding) + 4px)) !important;
}

/* B) Badge containers without dot — no negative shift */
.cs-hero-eyebrow,
.faq-hero-eyebrow {
    margin-inline-start: 0 !important;
}

/* C) Dot elements: absolute, vertically centered */
.fh-badge .fh-badge-dot,
.hero-tag .hero-tag-dot,
.careers-hero-badge .pulse-dot {
    position: absolute !important;
    inset-inline-start: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* D) Contact page SVG icon: absolute, slightly smaller to fit */
.fs-hero__badge svg {
    position: absolute !important;
    inset-inline-start: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 14px !important;
    height: 14px !important;
}


/* --- 20g. FIX 3: STATISTICS BLOCK ALIGNMENT ---
   Stats inherit content-wrapper padding from Fix 1.
   Individual stat items need text-align: start to
   prevent centered numbers misaligning with hero text. */

.cs-hero-stat,
.careers-stat,
.fs-hero__stat,
.projects-page .hero-stat {
    text-align: start !important;
}


/* --- 20h. FIX 5: BUTTON GROUP BORDER BOX ---
   Ensure all CTA buttons use border-box sizing so the
   2px border doesn't shift the visual left edge.
   align-self: start keeps stacked buttons left-aligned. */

.cs-btn-primary,
.cs-btn-outline,
.btn-primary-yellow,
.btn-outline-white,
.porto-btn--primary,
.porto-btn--outline,
.porto-btn--secondary {
    box-sizing: border-box !important;
    align-self: start !important;
}

/* CTA groups: left-aligned (flex-start already set in 17b,
   this ensures stacked vertical layouts also align). */
.cs-hero-cta,
.careers-hero-ctas,
.fs-hero__buttons,
.projects-page .hero-ctas {
    align-items: flex-start !important;
}


/* --- 20i. MOBILE REFINEMENTS ---
   On mobile (<576px), CTA buttons go full-width.
   Badge negative margin is already capped by max()
   so no extra override is needed. */

@media (max-width: 575px) {
    .cs-hero-cta,
    .careers-hero-ctas,
    .fs-hero__buttons,
    .projects-page .hero-ctas {
        flex-direction: column !important;
    }

    .cs-btn-primary,
    .cs-btn-outline,
    .btn-primary-yellow,
    .btn-outline-white,
    .porto-btn--primary,
    .porto-btn--outline,
    .porto-btn--secondary {
        align-self: stretch !important;
        text-align: center !important;
    }
}


/* =====================================================
   21. ABOUT US — OPEN HERO NORMALIZATION
   =====================================================
   
   PROBLEM: About Us uses a dark semi-transparent glass card
   (.ca-hero-panel-inner: background + backdrop-filter + max-width: 600px)
   while all other pages (Services, Projects, Contact, Careers) use
   open hero layouts with text sitting directly on the gradient overlay.
   
   When navigating between pages, the content block appears to jump
   horizontally because the glass card's left edge doesn't align with
   the hero text starting point on other pages.
   
   FIX: Remove the glass card visual treatment so About Us matches
   the open layout pattern. The .ca-hero-overlay gradient already
   provides sufficient contrast for text readability (0.92 opacity).
   Apply readability max-width constraints to individual text elements
   instead of the container.
   
   Scope: About Us hero section only.
   RTL-safe: .ca-hero-overlay flips gradient direction automatically.
   ===================================================== */

section#ca-hero .ca-hero-panel-inner {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Readability constraints on individual elements */
section#ca-hero .ca-headline-xl {
    max-inline-size: 900px;
}

section#ca-hero .ca-body-text {
    max-inline-size: 650px;
}

section#ca-hero .ca-hero-differentiators {
    max-inline-size: 700px;
}


/* =====================================================
   22. BUTTON WIDTH NORMALIZATION
   =====================================================
   
   PROBLEM: Buttons stretch to fill their container differently
   across pages. On About Us the secondary outline button spans
   nearly full-width of the glass card, while on Services the
   same button type is narrower (fit-content).
   
   FIX: All hero CTA buttons use width: fit-content so their
   width is determined by text content, not container width.
   This creates consistent visual weight across all pages.
   
   Exception: Mobile (<576px) buttons stretch to full-width
   for better touch targets (handled by existing section 20i).
   ===================================================== */

.porto-btn--primary,
.porto-btn--secondary,
.porto-btn--outline,
.ca-btn-primary,
.ca-btn-secondary,
.hero-btn,
.fs-btn,
.fs-btn--primary,
.fs-btn--secondary,
.btn-primary-yellow,
.btn-outline-white {
    width: fit-content !important;
}


/* =====================================================
   23. COMPREHENSIVE RTL HERO POSITIONING
   =====================================================
   
   PROBLEM: In RTL mode, hero content blocks inconsistently
   anchor to different sides of the viewport:
   - About Us:   RIGHT (correct — mirrors LTR left-side)
   - Services:   RIGHT (correct)
   - Contact Us: LEFT  (WRONG — text-align: center in page CSS)
   - Careers:    LEFT  (WRONG — text-align: center in page CSS)
   
   ROOT CAUSE: Page-specific CSS sets text-align: center on
   hero content wrappers. While hero-system.css overrides with
   text-align: start !important, some child elements retain
   centered margins (margin: 0 auto) or centered justify-content.
   
   FIX: Use high-specificity selectors with html[dir="rtl"]
   prefix to explicitly set right-alignment on ALL hero content
   wrappers and their children. Physical properties (text-align: right)
   used alongside logical (text-align: start) for maximum
   browser compatibility.
   
   Scope: Porto template hero sections only.
   ===================================================== */

/* --- 23a. Hero content wrappers: text-align: right in RTL --- */
html[dir="rtl"] .cs-hero-content,
html[dir="rtl"] .fs-hero__content,
html[dir="rtl"] .careers-hero-content,
html[dir="rtl"] .projects-page .hero-content,
html[dir="rtl"] section#ca-hero .ca-hero-panel,
html[dir="rtl"] .faq-hero-content {
    text-align: right !important;
}

/* --- 23b. Subtitles: push to right edge in RTL --- */
html[dir="rtl"] .cs-hero-subtitle,
html[dir="rtl"] .cs-hero-desc,
html[dir="rtl"] .fs-hero__subtitle,
html[dir="rtl"] .careers-hero-subtitle,
html[dir="rtl"] .projects-page .hero-subtitle,
html[dir="rtl"] section#ca-hero .ca-body-text {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* --- 23c. CTA button groups: align to right edge in RTL ---
   
   In RTL flex-direction:row, flex-start = RIGHT edge.
   
   CRITICAL: Section 12 sets flex-direction: row-reverse for RTL
   CTA groups. This FLIPS main-start to LEFT in RTL, causing
   buttons to cluster on the wrong side. Override back to row
   so flex-start correctly maps to the RIGHT edge.
   
   Visual order in RTL with row (no reverse):
   [Secondary on left] [Primary on right] — Primary at start edge. */
html[dir="rtl"] .cs-hero-cta,
html[dir="rtl"] .fs-hero__buttons,
html[dir="rtl"] .careers-hero-ctas,
html[dir="rtl"] .projects-page .hero-ctas,
html[dir="rtl"] section#ca-hero .ca-hero-ctas {
    justify-content: flex-start !important;
    flex-direction: row !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .cs-hero-cta,
    html[dir="rtl"] .fs-hero__buttons,
    html[dir="rtl"] .careers-hero-ctas,
    html[dir="rtl"] .projects-page .hero-ctas,
    html[dir="rtl"] section#ca-hero .ca-hero-ctas {
        flex-direction: column !important;
    }
}

/* --- 23d. Stats containers: align to right edge in RTL ---
   In RTL flex-direction:row, flex-start = RIGHT edge. */
html[dir="rtl"] .cs-hero-stats,
html[dir="rtl"] .fs-hero__stats,
html[dir="rtl"] .careers-hero-stats,
html[dir="rtl"] .projects-page .hero-stats,
html[dir="rtl"] .ca-hero-stats-bar {
    justify-content: flex-start !important;
}

/* --- 23e. Individual stat items: text-align right in RTL --- */
html[dir="rtl"] .cs-hero-stat,
html[dir="rtl"] .fs-hero__stat,
html[dir="rtl"] .careers-stat,
html[dir="rtl"] .projects-page .hero-stat,
html[dir="rtl"] .ca-hero-stat-item {
    text-align: right !important;
}

/* --- 23f. Badge alignment: right edge in RTL ---
   Badges are inline-flex, so text-align: right from 23a
   handles horizontal positioning. Ensure display: block
   wrapper behavior for margin auto to work. */
html[dir="rtl"] .cs-hero-eyebrow,
html[dir="rtl"] .fs-hero__badge,
html[dir="rtl"] .careers-hero-badge,
html[dir="rtl"] .projects-page .hero-tag,
html[dir="rtl"] section#ca-hero .fh-badge {
    display: flex !important;
    width: fit-content !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* --- 23g. Differentiators (About Us) RTL alignment ---
   In RTL flex-row, flex-start = right edge.
   Default row direction already flows right-to-left in RTL. */
html[dir="rtl"] .ca-hero-differentiators {
    justify-content: flex-start !important;
}

/* --- 23h. CTA buttons: align-self end in RTL stacked layout --- */
@media (max-width: 575px) {
    html[dir="rtl"] .cs-btn-primary,
    html[dir="rtl"] .cs-btn-outline,
    html[dir="rtl"] .btn-primary-yellow,
    html[dir="rtl"] .btn-outline-white,
    html[dir="rtl"] .porto-btn--primary,
    html[dir="rtl"] .porto-btn--outline,
    html[dir="rtl"] .porto-btn--secondary {
        align-self: stretch !important;
        text-align: center !important;
    }
}


/* =====================================================
   24. STATS NUMBERS — DIRECTION HANDLING
   =====================================================
   
   PROBLEM: In RTL mode, stat numbers like "10+" may display
   as "+10" due to bidirectional text rendering. Numbers with
   trailing symbols (+ / % / K) need explicit LTR direction
   so "10+" reads correctly, while the container maintains RTL
   flow for labels beneath.
   
   Also applies consistent styling so stat numbers have the same
   visual treatment (yellow, bold) whether they're in the About Us
   glass card, centered Contact layout, or open Services hero.
   
   FIX: Apply direction: ltr and unicode-bidi: isolate to stat
   number elements. This preserves LTR reading for alphanumeric
   strings while allowing the surrounding RTL context to flow
   naturally.
   ===================================================== */

html[dir="rtl"] .ca-hero-stat-item strong,
html[dir="rtl"] .fs-hero__stat-value,
html[dir="rtl"] .careers-stat-value,
html[dir="rtl"] .cs-hero-stat .cs-stat-value,
html[dir="rtl"] .cs-stat-value,
html[dir="rtl"] .projects-page .hero-stat-value {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
}


/* =====================================================
   25. SERVICES CARD GRID — RTL ALIGNMENT
   =====================================================
   
   PROBLEM: On Services RTL, the card grid container may not
   align with the "صنعتي خدمتونه" heading above because the grid
   uses margin: 0 auto centering or different padding than the
   hero text container.
   
   FIX: Ensure the grid uses the same inline padding as the
   hero content wrapper. The first card's right edge should
   align vertically with the right edge of the headline text.
   ===================================================== */

html[dir="rtl"] .cinematic-services-wrapper .cs-hero-services-strip {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}


/* =====================================================
   26. HERO HEIGHT CONSTRAINT — SCROLL INDICATOR FIX
   =====================================================
   
   PROBLEM: About Us, Projects, and Contact heroes use
   min-height: 100vh, which lets content push the section
   beyond the viewport. This hides the scroll indicator
   (positioned at bottom: 2rem) below the fold.
   
   FIX: Cap the hero section height to exactly 100vh so 
   the scroll indicator is always visible on desktop.
   On mobile (<= 767px), keep min-height for flexibility.
   ===================================================== */

section#ca-hero.ca-section-full {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
}

.projects-page .hero {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh;
    max-height: 100dvh;
}

.fs-contact-page .fs-hero {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh;
    max-height: 100dvh;
}

@media (max-width: 767px) {
    section#ca-hero.ca-section-full,
    .projects-page .hero,
    .fs-contact-page .fs-hero {
        height: auto !important;
        max-height: none !important;
        min-height: 100vh;
        min-height: 100svh;
    }
}


/* =====================================================
   27. STANDALONE STATS SECTIONS (below heroes)
   =====================================================
   
   These match the Services page .stats-section pattern:
   dark background, border accents, grid layout with 
   dividers between items.
   ===================================================== */

/* --- 27a. About Us stats --- */
.ca-stats-section {
    background: rgba(27, 31, 43, 0.95);
    padding: 50px 20px;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(252, 218, 3, 0.1);
    border-bottom: 1px solid rgba(252, 218, 3, 0.1);
}

.ca-stats-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.ca-stat-box {
    position: relative;
}

.ca-stat-box strong {
    display: block;
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--ca-lemon, #fcda03);
    font-family: 'Inter', monospace;
    line-height: 1;
}

.ca-stat-box span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    
    letter-spacing: 0.05em;
}

.ca-stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}

html[dir="rtl"] .ca-stat-box:not(:last-child)::after {
    right: auto;
    left: 0;
}

html[dir="rtl"] .ca-stat-box strong {
    direction: ltr;
    unicode-bidi: isolate;
}


/* --- 27b. Projects stats --- */
.projects-stats-section {
    background: rgba(27, 31, 43, 0.95);
    padding: 50px 20px;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(252, 218, 3, 0.1);
    border-bottom: 1px solid rgba(252, 218, 3, 0.1);
}

.projects-stats-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.projects-stat-box {
    position: relative;
}

.projects-stat-box strong {
    display: block;
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--fanavar-yellow, #fcda03);
    font-family: 'Inter', monospace;
    line-height: 1;
}

.projects-stat-box span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    
    letter-spacing: 0.05em;
}

.projects-stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}

html[dir="rtl"] .projects-stat-box:not(:last-child)::after {
    right: auto;
    left: 0;
}

html[dir="rtl"] .projects-stat-box strong {
    direction: ltr;
    unicode-bidi: isolate;
}


/* --- 27c. Contact stats --- */
.fs-stats-section {
    background: rgba(27, 31, 43, 0.95);
    padding: 50px 20px;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(252, 218, 3, 0.1);
    border-bottom: 1px solid rgba(252, 218, 3, 0.1);
}

.fs-stats-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.fs-stat-box {
    position: relative;
}

.fs-stat-box strong {
    display: block;
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--fanavar-yellow, #fcda03);
    font-family: 'Inter', monospace;
    line-height: 1;
}

.fs-stat-box span {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    
    letter-spacing: 0.05em;
}

.fs-stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}

html[dir="rtl"] .fs-stat-box:not(:last-child)::after {
    right: auto;
    left: 0;
}

html[dir="rtl"] .fs-stat-box strong {
    direction: ltr;
    unicode-bidi: isolate;
}


/* --- 27d. Stats responsive --- */
@media (max-width: 991px) {
    .ca-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
    .projects-stats-grid,
    .fs-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 15px; }

    .ca-stat-box::after,
    .projects-stat-box::after,
    .fs-stat-box::after { display: none; }

    .ca-stat-box strong,
    .projects-stat-box strong,
    .fs-stat-box strong { font-size: 2.5rem; }
}

@media (max-width: 767px) {
    .ca-stats-section,
    .projects-stats-section,
    .fs-stats-section { padding: 40px 15px; }

    .ca-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-stats-grid,
    .fs-stats-grid { grid-template-columns: repeat(3, 1fr); }

    .ca-stat-box strong,
    .projects-stat-box strong,
    .fs-stat-box strong { font-size: 2.2rem; }
}

@media (max-width: 480px) {
    .ca-stats-grid,
    .projects-stats-grid,
    .fs-stats-grid { grid-template-columns: 1fr 1fr; }

    .ca-stat-box strong,
    .projects-stat-box strong,
    .fs-stat-box strong { font-size: 1.8rem; }
}

/* =====================================================
   28. PORTO HERO ALIGNMENT SOURCE OF TRUTH
   =====================================================
   Scope: Porto hero content wrappers only.
   Purpose: Keep the same Bootstrap 5 horizontal edge
   across all Porto pages in both LTR and RTL.
   Note: !important is required to safely override
   page-level inline style blocks inside Blade files.
   ===================================================== */

:root {
    --fh-hero-content-max-width: 1416px;
}

:is(
    .hero-content,
    .cs-hero-content,
    .fs-hero__content,
    .careers-hero-content,
    .faq-hero-content,
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    .cp-hero-content,
    .jd-hero-content,
    .detail-hero-content,
    .modal-hero-content
) {
    max-width: min(100%, var(--fh-hero-content-max-width)) !important;
    width: 100% !important;
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
    padding-inline-start: var(--fh-inline-padding) !important;
    padding-inline-end: var(--fh-inline-padding) !important;
    text-align: start !important;
    box-sizing: border-box !important;
}

section#ca-hero .ca-hero-panel-inner {
    text-align: start !important;
}

:is(
    .hero-ctas,
    .cs-hero-cta,
    .fs-hero__buttons,
    .careers-hero-ctas,
    section#ca-hero .ca-hero-ctas
) {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* =====================================================
   24. MOBILE HERO H1 FONT WEIGHT
   =====================================================
   Ensure all hero H1s are bold on mobile devices
   to match the projects page.
   ===================================================== */
@media (max-width: 991px) {
    .powder-coating-hero h1,
    .powder-coating-hero .hero-new-headline,
    .cs-services-hero__title,
    .atd-hero__title,
    .wsd-hero__title,
    .elv-hero__title,
    .fs-contact-hero__title,
    .product-detail-hero h1,
    .page-hero-dark h1,
    .page-hero h1 {
        font-weight: 800 !important;
    }
    
    .powder-coating-hero h1 .hero-new-headline-highlight,
    .powder-coating-hero .hero-new-headline .hero-new-headline-highlight,
    .cs-services-hero__title .hero-new-headline-highlight,
    .atd-hero__title em,
    .wsd-hero__title em,
    .elv-hero__title em {
        font-weight: 800 !important;
    }
}