/* =============================================================================
 * Regilyze — SHELL STYLES (site header, nav, mobile drawer, shared tokens)
 * =============================================================================
 * EXTRACTED FROM includes/header.php ON 2026-08-18 (SXO fix S1).
 *
 * WHY. This block was 24.7 KB of CSS inlined into a <style> tag in <head> on
 * EVERY page. Inline CSS cannot be cached: the browser re-downloads and
 * re-parses all 24.7 KB on every single page view, forever. Together with the
 * 18 KB inlined by includes/footer.php that was ~43 KB of byte-for-byte
 * identical CSS being resent on every navigation.
 *
 * As an external file it is fetched once and then served from cache — and
 * .htaccess already sets `Cache-Control: public, max-age=31536000, immutable`
 * for /css/, so the second page view onwards costs zero bytes for this file.
 * The ?v= cache-buster in the <link> means a deploy still invalidates it.
 *
 * ORDER IS LOAD-BEARING. The <link> that replaced the old <style> sits at the
 * exact same position (last thing in <head>, after styles.min.css and
 * ux-enhancements.css). Do not move it above those two: this file overrides
 * them, and it also defines the :root custom properties every page-level
 * <style> block depends on.
 * =============================================================================
 */
/* =====================================================
       REGILYZE HEADER STYLES v2.0
       ===================================================== */
    
    :root {
        /* Brand Colors */
        --bg-cream: #FAF9F7;
        --bg-white: #FFFFFF;
        --bg-warm: #F5F3EF;
        --bg-dark: #1A1A1A;
        --bg-navy: #0F172A;
        
        /* Text Colors */
        --text-primary: #1A1A1A;
        --text-secondary: #6B6B6B;
        --text-tertiary: #9A9A9A;
        --text-light: #B0B0B0;
        
        /* Accent Colors */
        --accent-orange: #FF6B35;
        --accent-orange-hover: #E85A28;
        --accent-orange-light: #FFF0EB;
        --accent-green: #22C55E;
        --accent-green-light: #DCFCE7;
        --accent-blue: #2563EB;
        --accent-blue-light: #DBEAFE;
        --accent-gold: #F59E0B;
        --accent-gold-light: rgba(251, 191, 36, 0.15);
        --accent-purple: #7C3AED;
        --trustpilot: #00B67A;
        
        /* Borders & Shadows */
        --border-light: #EAEAEA;
        --border-medium: #E0E0E0;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
        --shadow-card: 0 4px 24px rgba(0,0,0,0.06);
        --shadow-float: 0 12px 40px rgba(0,0,0,0.08);
        
        /* Border Radius */
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 20px;
        --radius-2xl: 24px;
        --radius-pill: 50px;
        
        /* Typography */
        --font-display: 'Sora', sans-serif;
        --font-body: 'DM Sans', sans-serif;
        
        /* Transitions */
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Reset */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    /* FIX #9 (2026-08-10 audit) — `scroll-padding-top` makes the BROWSER
       offset every anchor jump (native #hash, scrollIntoView(), and
       scrollTo()) by the height of the sticky header. Previously each page
       invented its own offset (faq 120px, sic-codes 88px, legal 100px) while
       animations.js hard-coded 80px in JS, so the two fought and the target
       heading landed at a different spot depending on which handler won.
       One declaration here is now the single source of truth. */
    /* FIX B (2026-08-10) — "SCROLLING FEELS STUCK / NOT SMOOTH".
       `scroll-behavior: smooth` on <html> does NOT only affect anchor links.
       It makes the browser ANIMATE every scroll it performs itself: clicking
       the scrollbar track, Page Up / Page Down, the arrow keys, the spacebar,
       Home / End, and focus-driven scrolling. Instead of jumping instantly,
       each of those glides over ~300-500ms, which reads as lag — the page
       "resists" the input for a moment before catching up. On a long page
       like services.php that delay is very noticeable.

       It is not needed: every place that WANTS a smooth scroll already asks
       for it explicitly in JS (`behavior: 'smooth'` in animations.js, faq.php,
       sic-codes.php, services.php, blog-public.js), and those keep working.
       Removing the global declaration restores instant, native-feeling page
       scrolling while leaving deliberate anchor animations intact.

       `scroll-padding-top` stays — it keeps a jump target clear of the sticky
       header, and it applies to instant scrolls too. */
    html { scroll-padding-top: 90px; }
    @media (max-width: 768px) { html { scroll-padding-top: 80px; } }
    @media (max-width: 480px) { html { scroll-padding-top: 74px; } }
    body { 
        font-family: var(--font-body); 
        font-size: 16px; 
        line-height: 1.6; 
        color: var(--text-secondary); 
        background: var(--bg-cream); 
    }
    h1, h2, h3, h4, h5, h6 { 
        font-family: var(--font-display); 
        font-weight: 700; 
        line-height: 1.15; 
        color: var(--text-primary); 
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* Accessibility: Skip to content
       FIX #14 (2026-08-10 audit): background was `transparent`, so when the
       link received focus it rendered as WHITE text on the cream page — i.e.
       invisible. The whole point of a skip link is that it becomes visible on
       focus, so it now has the dark brand background it was designed for. */
    .skip-link { position: absolute; top: -100px; left: 16px; background: var(--bg-dark); color: #fff; padding: 12px 24px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; z-index: 100002; transition: top 0.2s; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
    .skip-link:focus { top: 16px; }

    /* Accessibility: Focus visible */
    :focus-visible { outline: 3px solid var(--accent-orange); outline-offset: 2px; border-radius: 4px; }
    :focus:not(:focus-visible) { outline: none; }

    /* Accessibility: Minimum touch targets
       FIX #12 (2026-08-10 audit): this used to be a blanket `a { min-height:
       44px }`. `min-height` is a no-op on inline elements, so it silently did
       nothing for body-copy links — but it DID apply to every anchor that is
       display:flex/block (.top-bar-link, .footer-link, .breadcrumb a,
       .sicf-nav-link ...), inflating the thin top utility bar to ~58px on
       desktop and ~88px on mobile. Now scoped to the components that are
       genuinely tap targets. .top-bar-link gets its own 32px rule in
       css/ux-enhancements.css (still above the WCAG 2.2 AA 24px minimum). */
    button, input[type="submit"], input[type="button"], select,
    .btn, .nav-link, .mobile-nav-link, .footer-link { min-height: 44px; }
    
    /* Container */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .container-sm { max-width: 800px; }

    /* =====================================================
       BUTTONS
       ===================================================== */
    .btn { 
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        gap: 8px; 
        font-family: var(--font-body); 
        font-size: 14px; 
        font-weight: 600; 
        padding: 12px 24px; 
        border-radius: var(--radius-pill); 
        transition: all 0.3s var(--ease); 
        border: none; 
        cursor: pointer; 
    }
    .btn-primary { background: var(--text-primary); color: white; }
    .btn-primary:hover { background: #333; transform: translateY(-2px); }
    .btn-orange { background: var(--accent-orange); color: white; }
    .btn-orange:hover { background: var(--accent-orange-hover); transform: translateY(-2px); }
    .btn-outline { background: transparent; color: var(--text-secondary); border: 2px solid var(--border-medium); }
    .btn-outline:hover { border-color: var(--text-primary); color: var(--text-primary); }
    .btn-white { background: white; color: var(--text-primary); }
    .btn-lg { padding: 16px 32px; font-size: 16px; }
    .btn-block { width: 100%; }

    /* =====================================================
       TOP BAR
       ===================================================== */
    .top-bar { 
        background: var(--bg-dark); 
        color: white; 
        padding: 7px 0; 
        font-size: 13px; 
    }
    .top-bar-inner { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    }
    .top-bar-left { display: flex; align-items: center; gap: 24px; }
    .top-bar-link { 
        display: flex; 
        align-items: center; 
        gap: 6px; 
        color: rgba(255,255,255,0.7); 
        transition: color 0.2s; 
    }
    .top-bar-link:hover { color: white; }
    .top-bar-link svg { width: 14px; height: 14px; }
    .top-bar-right { display: flex; align-items: center; gap: 16px; }
    .top-bar-badge { 
        display: flex; 
        align-items: center; 
        gap: 6px; 
        padding: 4px 12px; 
        background: rgba(255,255,255,0.1); 
        border-radius: var(--radius-pill); 
        font-size: 12px; 
    }
    .top-bar-badge svg { width: 14px; height: 14px; stroke: var(--accent-orange); }
    .login-btn { 
        padding: 6px 16px; 
        background: white; 
        color: var(--text-primary); 
        border-radius: var(--radius-pill); 
        font-weight: 600; 
        font-size: 13px; 
    }

    /* =====================================================
       HEADER
       ===================================================== */
    /* FIX C (2026-08-10) — SCROLL JANK FROM THE HEADER BLUR.
       `backdrop-filter: blur(20px)` forces the compositor to re-sample and
       re-blur everything behind the full-width sticky header on EVERY scroll
       frame. It is one of the most expensive things a sticky element can do,
       and on mid-range Android or older laptops it alone can drop scrolling
       from 60fps into visible stutter — the "sticky / not smooth" feeling.

       The background is already 95% opaque, so the blur contributed almost
       nothing visually. It now applies ONLY where the device can afford it:
       a fine pointer with hover (desktop) and no reduced-motion preference.
       Touch devices — highest cost, least visible benefit — get a plain
       opaque background instead. */
    .header { 
        position: sticky; 
        top: 0; 
        z-index: 1000; 
        background: rgba(250,249,247,0.98); 
        border-bottom: 1px solid var(--border-light);
        transition: box-shadow 0.3s ease;
    }
    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
        .header {
            background: rgba(250,249,247,0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
    }
    .header.scrolled {
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }
    .header-inner { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        height: 70px; 
    }
    
    /* Logo */
    .logo { display: flex; align-items: center; gap: 10px; }
    .logo-icon { 
        width: 36px; 
        height: 36px; 
        background: transparent; 
        border-radius: var(--radius-sm); 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    .logo-icon img { width: 28px; height: 28px; object-fit: contain; }
    .logo-text { 
        font-family: var(--font-display); 
        font-size: 1.375rem; 
        font-weight: 700; 
        color: var(--text-primary); 
    }
    
    /* Navigation */
    .nav { display: flex; align-items: center; gap: 32px; }
    .nav-link { 
        font-size: 14px; 
        font-weight: 500; 
        color: var(--text-secondary); 
        transition: color 0.2s; 
        position: relative;
    }
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: transparent;
        transition: width 0.3s ease;
    }
    .nav-link:hover,
    .nav-link.active { color: var(--accent-orange); }
    .nav-link:hover::after,
    .nav-link.active::after { width: 100%; }
    
    .header-cta { display: flex; align-items: center; gap: 12px; }
    
    /* Menu Toggle */
    .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: var(--bg-cream);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        cursor: pointer;
        color: var(--text-primary);
        transition: all 0.2s var(--ease);
    }
    .menu-toggle:hover {
        background: var(--bg-white);
        border-color: var(--accent-orange);
        color: var(--accent-orange);
    }
    .menu-toggle svg { width: 22px; height: 22px; }

    /* =====================================================
       MOBILE NAV (Slide-in Drawer)
       ===================================================== */
    /* FIX #2 (2026-08-10 audit) — the drawer used to toggle
       `display: none` -> `display: block` in the SAME frame as
       `opacity: 0 -> 1`. A transition can't run across a display change, so
       neither the backdrop fade nor the panel slide ever played: the drawer
       just snapped in, and snapped out again on close. The element now stays
       in the layout permanently and is hidden with
       visibility + opacity + pointer-events, which ARE transitionable.

       FIX #3 (same audit) — z-index was 9998/9999, below the GDPR cookie
       banner (99999). On a first visit the banner covered the drawer's
       Login / Get Started buttons. Drawer now sits above it. */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 100000;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }
    .mobile-nav.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease, visibility 0s linear 0s;
    }
    .mobile-nav-content {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        max-width: 85vw;
        height: 100%;
        background: #fff;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        z-index: 100001;
        transform: translateX(100%);
        transition: transform 0.3s var(--ease);
        overflow-y: auto;
        /* Notch / home-indicator safe area so the CTA buttons are reachable */
        padding-bottom: env(safe-area-inset-bottom);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .mobile-nav.active .mobile-nav-content {
        transform: translateX(0);
    }
    .mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid var(--border-light);
    }
    .mobile-nav-close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-secondary);
        border-radius: var(--radius-sm);
        transition: all 0.2s ease;
    }
    .mobile-nav-close:hover {
        color: var(--accent-orange);
        background: var(--bg-cream);
    }
    .mobile-nav-close svg { width: 22px; height: 22px; }
    .mobile-nav-links {
        padding: 20px;
    }
    .mobile-nav-link {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-light);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        color: var(--accent-orange);
    }
    .mobile-nav-cta {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .mobile-nav-cta .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* =====================================================
       PAGE HEADER
       ===================================================== */
    .page-header { 
        padding: 48px 0; 
        background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-white) 100%); 
        text-align: center; 
    }
    .page-header h1 { 
        font-size: clamp(2rem, 4vw, 2.75rem); 
        margin-bottom: 12px; 
    }
    .page-header > .container > p { 
        font-size: 1.0625rem; 
        color: var(--text-secondary); 
        max-width: 600px; 
        margin: 0 auto; 
    }
    .breadcrumb { 
        display: flex; 
        align-items: baseline; 
        justify-content: center; 
        gap: 8px; 
        font-size: 14px; 
        color: var(--text-tertiary); 
        margin-bottom: 16px; 
    }
    .breadcrumb a, .breadcrumb span { 
        line-height: 1.4; 
        vertical-align: baseline; 
    }
    .breadcrumb a { color: var(--accent-orange); text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }

    /* =====================================================
       SECTIONS
       ===================================================== */
    .section { padding: 80px 0; }
    .section-header { 
        text-align: center; 
        max-width: 600px; 
        margin: 0 auto 48px; 
    }
    .section-label { 
        display: inline-block; 
        font-size: 12px; 
        font-weight: 600; 
        color: var(--accent-orange); 
        text-transform: uppercase; 
        letter-spacing: 0.1em; 
        margin-bottom: 12px; 
    }
    .section-title { 
        font-size: clamp(1.75rem, 4vw, 2.25rem); 
        margin-bottom: 12px; 
    }
    .section-subtitle { 
        font-size: 1rem; 
        color: var(--text-secondary); 
    }

    /* =====================================================
       CARDS
       ===================================================== */
    .card { 
        background: var(--bg-white); 
        border: 1px solid var(--border-light); 
        border-radius: var(--radius-xl); 
        padding: 32px; 
        transition: all 0.3s var(--ease); 
    }
    .card:hover { 
        box-shadow: var(--shadow-card); 
        transform: translateY(-4px); 
    }

    /* =====================================================
       FORMS
       ===================================================== */
    .form-group { margin-bottom: 20px; }
    .form-label { 
        display: block; 
        font-size: 14px; 
        font-weight: 600; 
        margin-bottom: 8px; 
        color: var(--text-primary); 
    }
    .form-input { 
        width: 100%; 
        padding: 14px 16px; 
        font-size: 15px; 
        border: 2px solid var(--border-light); 
        border-radius: var(--radius-md); 
        outline: none; 
        font-family: var(--font-body); 
        transition: border-color 0.2s; 
        background: var(--bg-white); 
    }
    .form-input:focus { border-color: var(--accent-orange); }
    .form-textarea { min-height: 120px; resize: vertical; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    /* =====================================================
       REVEAL ANIMATION (Base - animations.js will enhance)
       ===================================================== */
    .reveal { 
        opacity: 0; 
        transform: translateY(20px); 
        transition: all 0.6s var(--ease); 
    }
    .reveal.visible { 
        opacity: 1; 
        transform: translateY(0); 
    }

    /* =====================================================
       RESPONSIVE
       ===================================================== */
    /* ============================================================
       DESKTOP-SITE-MODE GRACEFUL DEGRADATION
       Same approach as landing/about/contact/footer pages.
       Top-bar + header never overflow viewport, safe-area aware.
       ============================================================ */
    .top-bar, .header, .mobile-nav {
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }
    @supports not (overflow-x: clip) {
        .top-bar, .header { overflow-x: hidden; }
    }
    .top-bar .container, .header .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        box-sizing: border-box;
    }
    /* Long contact info breaks naturally instead of overflowing */
    .top-bar-link, .top-bar-badge, .nav-link, .logo-text {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    /* iOS auto-zoom prevention on form inputs (header may have search bar later) */
    .header input, .header select, .header textarea {
        font-size: 16px;
    }

    /* ============================================================
       RESPONSIVE — landing-page-grade coverage
       1280 / 1024 / 768 / 640 / 480 / 360 + touch device
       ============================================================ */

    @media (max-width: 1280px) {
        .top-bar .container, .header .container {
            padding-left: max(20px, env(safe-area-inset-left));
            padding-right: max(20px, env(safe-area-inset-right));
        }
        .nav { gap: 24px; }
    }

    @media (max-width: 1024px) {
        .form-row { grid-template-columns: 1fr; }
        .top-bar-left { gap: 18px; }
        .top-bar-right { gap: 10px; }
        .top-bar-badge { font-size: 11px; padding: 3px 10px; }
        .nav { gap: 20px; }
        .nav-link { font-size: 13.5px; }
    }

    @media (max-width: 900px) {
        /* Hide desktop nav + CTA early to prevent crowding */
        .nav, .header-cta { display: none; }
        .menu-toggle { display: inline-flex; }

        /* Top bar — show ALL 4 items, wrap into 2 rows naturally */
        .top-bar { padding: 8px 0; }
        .top-bar-inner {
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .top-bar-left, .top-bar-right {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }
    }

    @media (max-width: 768px) {
        .top-bar { padding: 7px 0; }
        .top-bar .container, .header .container {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
        .top-bar-inner { gap: 5px; }
        .top-bar-left, .top-bar-right { gap: 12px; }
        .top-bar-link { font-size: 12px; }
        .top-bar-link svg { width: 12px; height: 12px; }
        .top-bar-badge { font-size: 11px; padding: 3px 9px; }
        .top-bar-badge svg { width: 12px; height: 12px; }
        .header-inner { height: 64px; }
        .logo-text { font-size: 1.25rem; }
        .logo-icon { width: 32px; height: 32px; }
        .logo-icon img { width: 26px; height: 26px; }
    }

    @media (max-width: 640px) {
        .top-bar { padding: 6px 0; }
        .top-bar-inner { gap: 4px; }
        .top-bar-left, .top-bar-right { gap: 10px; }
        .top-bar-link { font-size: 11.5px; gap: 5px; }
        .top-bar-badge { font-size: 10.5px; padding: 2px 8px; gap: 5px; }
    }

    @media (max-width: 480px) {
        .top-bar { padding: 5px 0; }
        .top-bar-inner { gap: 4px; }
        .top-bar-left, .top-bar-right { gap: 8px; }
        .top-bar-link { font-size: 11px; gap: 4px; }
        .top-bar-link svg { width: 11px; height: 11px; }
        .top-bar-badge { font-size: 10px; padding: 2px 7px; gap: 4px; }
        .top-bar-badge svg { width: 11px; height: 11px; }
        .header-inner { height: 60px; }
        .logo-text { font-size: 1.125rem; }
        .logo-icon { width: 30px; height: 30px; }
        .logo-icon img { width: 24px; height: 24px; }
        .menu-toggle { width: 40px; height: 40px; }
        .menu-toggle svg { width: 20px; height: 20px; }
        /* Mobile nav drawer — slightly narrower */
        .mobile-nav-content { width: 280px; }
        .mobile-nav-link { font-size: 15px; padding: 12px 0; }
    }

    @media (max-width: 360px) {
        .top-bar-left, .top-bar-right { gap: 6px; }
        .top-bar-link { font-size: 10px; gap: 3px; }
        .top-bar-link svg { width: 10px; height: 10px; }
        .top-bar-badge { font-size: 9px; padding: 2px 6px; gap: 3px; }
        .top-bar-badge svg { width: 10px; height: 10px; }
        .header-inner { height: 56px; }
        .logo-text { font-size: 1rem; }
        .logo { gap: 8px; }
        .menu-toggle { width: 38px; height: 38px; }
        .menu-toggle svg { width: 18px; height: 18px; }
        .mobile-nav-content { width: 260px; }
        .mobile-nav-header { padding: 16px; }
        .mobile-nav-links { padding: 16px; }
        .mobile-nav-cta { padding: 16px; }
    }

    /* Touch device hover guards — no stuck-up hover transforms */
    @media (hover: none) and (pointer: coarse) {
        .menu-toggle:hover {
            background: var(--bg-cream);
            border-color: var(--border-light);
            color: var(--text-primary);
        }
        .nav-link:hover { color: var(--text-secondary); }
        .nav-link:hover::after { width: 0; }
        .nav-link.active { color: var(--accent-orange); }
        .nav-link.active::after { width: 100%; }
    }

    /* =====================================================
       Override styles.min.css legacy purple theme
       ===================================================== */
    :root {
        --primary: #FF6B35 !important;
        --primary-light: #FF8E53 !important;
        --primary-dark: #E85A28 !important;
        --primary-bg: #FFF0EB !important;
        --shadow-primary: 0 8px 30px rgba(255,107,53,0.25) !important;
    }
    .hero::before { display: none !important; }
    .process-steps::before { background: var(--border-light) !important; }
