/**
 * Okuvision Pattern System
 *
 * Alle dekorativen Background-Patterns für Hero, Row und Column Elements
 * 
 * STROKE-WIDTH BERECHNUNG:
 * ------------------------
 * Für konsistente visuelle Strichstärke über alle Patterns:
 * 
 * Formula: target_stroke = (pattern_viewbox_width / reference_viewbox_width) × base_stroke
 * 
 * Referenz: Hero-Right Pattern (234px viewBox)
 * - Desktop: 16px stroke (base)
 * - Tablet:  12px stroke (base)
 * - Mobile:   8px stroke (base)
 * 
 * Beispiel für bottom-right-2 (1113px viewBox):
 * - Desktop: (1113 / 234) × 16 = 76px
 * - Tablet:  (1113 / 234) × 12 = 57px
 * - Mobile:  (1113 / 234) × 8 = 38px
 * 
 * @package Okuvision
 * @since 1.1.0
 */

/* ==========================================================================
   PATTERN CONFIGURATION
   ========================================================================== */

:root {
    /* Pattern Stroke Base (responsive via media queries) */
    --oku-pattern-stroke-base: 16; /* Desktop */
    --oku-pattern-reference-viewbox: 234; /* Hero-right als Referenz */
    
    /* ==========================================================================
       PATTERN SIZES (Desktop)
       ========================================================================== */
    
    /* Hero Image Patterns (mit Bild) */
    --oku-pattern-hero-left-width: 95px;
    --oku-pattern-hero-left-height: 210px;
    --oku-pattern-hero-right-width: 185px;
    --oku-pattern-hero-right-height: 260px;
    
    /* Hero No-Image Patterns (ohne Bild, centered) */
    --oku-pattern-hero-no-image-left-width: 200px;
    --oku-pattern-hero-no-image-left-height: 297px;
    --oku-pattern-hero-no-image-right-width: 150px;
    --oku-pattern-hero-no-image-right-height: 244px;
    
    /* Row/Column Extension Patterns */
    --oku-pattern-top-left-width: 200px;
    --oku-pattern-top-left-height: 250px;
    --oku-pattern-top-left-2-width: 240px;
    --oku-pattern-top-left-2-height: 300px;
    
    --oku-pattern-top-right-width: 220px;
    --oku-pattern-top-right-height: 280px;
    --oku-pattern-top-right-2-width: 240px;
    --oku-pattern-top-right-2-height: 300px;
    
    --oku-pattern-bottom-left-width: 180px;
    --oku-pattern-bottom-left-height: 260px;
    --oku-pattern-bottom-left-2-width: 260px;
    --oku-pattern-bottom-left-2-height: 410px;
    
    --oku-pattern-bottom-right-width: 160px;
    --oku-pattern-bottom-right-height: 200px;
    --oku-pattern-bottom-right-2-width: 600px;
    --oku-pattern-bottom-right-2-height: 400px;
    
    /* Column Patterns (smaller, for columns) */
    --oku-column-pattern-top-left-width: 100px;
    --oku-column-pattern-top-left-height: 120px;
    --oku-column-pattern-bottom-right-width: 90px;
    --oku-column-pattern-bottom-right-height: 105px;
    
    /* ==========================================================================
       CTA PATTERNS (Call-to-Action Element)
       - Mit Bild: bottom-right (im Bild-Container) + bottom-left (im Dark-Wrapper)
       - Ohne Bild: top-right + bottom-left (beide im Dark-Wrapper)
       ========================================================================== */
    
    /* CTA Bottom Right - für "Mit Bild" Variante (385×354 viewBox) */
    --oku-pattern-cta-bottom-right-width: 290px;
    --oku-pattern-cta-bottom-right-height: 265px;
    
    /* CTA Top Right - für "Ohne Bild" Variante (388×232 viewBox) */
    --oku-pattern-cta-top-right-width: 290px;
    --oku-pattern-cta-top-right-height: 174px;
    
    /* CTA Bottom Left - für beide Varianten (369×216.99 viewBox) */
    --oku-pattern-cta-bottom-left-width: 280px;
    --oku-pattern-cta-bottom-left-height: 165px;
    
    /* ==========================================================================
       HERO IMAGE PATTERNS - Desktop (16px stroke)
       ViewBox: 118×261 (left), 234×327 (right)
       ========================================================================== */
    
    --oku-pattern-hero-left: url("data:image/svg+xml,%3Csvg width='118' height='261' viewBox='0 0 118 261' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-19.9609 50.1431L97.2283 128.449' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M22.875 140.143L108.922 251.572' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M-67.4688 107.926L36.0393 203.514' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
    
    --oku-pattern-hero-right: url("data:image/svg+xml,%3Csvg width='234' height='327' viewBox='0 0 234 327' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M166.382 102.928L132.422 237.878' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M275.017 103.092L182.561 206.927' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M150.553 -45.0088L91.168 80.696' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M108.242 170.312L54.3687 298.507' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
    
    /* ==========================================================================
       HERO NO-IMAGE PATTERNS - Desktop (16px stroke)
       ViewBox: 255×379 (left), 192×312 (right)
       ========================================================================== */
    
    --oku-pattern-hero-no-image-left: url("data:image/svg+xml,%3Csvg width='255' height='379' viewBox='0 0 255 379' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112.672 33.8623L163.616 169.466' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M70.248 -12.4546L176.212 86.2845' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M-21.6367 127.042L93.0341 215.962' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M1.8125 201.938L126.857 275.298' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
    
    --oku-pattern-hero-no-image-right: url("data:image/svg+xml,%3Csvg width='192' height='312' viewBox='0 0 192 312' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M172.709 35.014L266.103 -106.702' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M42.5332 106.95L145.895 -27.615' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M8.56641 249.497L109.328 113.415' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M107.137 175.949L244.952 76.9211' stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
    
    /* ==========================================================================
       ROW/COLUMN EXTENSION PATTERNS - Desktop
       Stroke-width berechnet basierend auf viewBox-Größe
       ========================================================================== */
    
    /* Top Left (230×304 viewBox) → stroke: (230/234) × 16 = 16px */
    --oku-pattern-top-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 230 304' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M16.6387 110.361L83.5907 226.755'/%3E%3Cpath d='M-51.8525 262.803L43.9406 356.88'/%3E%3Cpath d='M106.679 171.227L190.798 275.947'/%3E%3Cpath d='M-10.0088 -17.7083L96.2563 64.6944'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Top Left 2 (280×379 viewBox) → stroke: 16px (adjusted for visual consistency) */
    --oku-pattern-top-left-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 379' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M112.672 33.8623L163.616 169.466'/%3E%3Cpath d='M70.248 -12.4541L176.212 86.285'/%3E%3Cpath d='M-21.6367 127.041L93.0341 215.962'/%3E%3Cpath d='M1.8125 201.938L126.857 275.298'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Top Right (329×376 viewBox) → stroke: 16px (adjusted for visual consistency) */
    --oku-pattern-top-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 329 376' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M161.728 45.4998L67.3154 147.735'/%3E%3Cpath d='M294.711 23.4521L187.675 112.352'/%3E%3Cpath d='M283.334 124.261L148.917 159.999'/%3E%3Cpath d='M224.669 64.687L356.419 19.8813'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Top Right 2 (280×363 viewBox) → stroke: 16px (adjusted for visual consistency) */
    --oku-pattern-top-right-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 363' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M260.881 35.0143L354.275 -106.702'/%3E%3Cpath d='M130.705 106.95L234.067 -27.6152'/%3E%3Cpath d='M96.7383 249.497L197.5 113.415'/%3E%3Cpath d='M195.309 175.949L333.124 76.9209'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Bottom Left (251×365 viewBox) → stroke: 16px (adjusted for visual consistency) */
    --oku-pattern-bottom-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 251 365' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M130.061 211.607L96.1016 346.558'/%3E%3Cpath d='M238.697 211.772L146.241 315.607'/%3E%3Cpath d='M114.233 63.6711L54.8477 189.376'/%3E%3Cpath d='M71.9223 278.993L18.0488 407.187'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Bottom Left 2 (363×574 viewBox) → stroke: 16px */
    --oku-pattern-bottom-left-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 363 574' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M36.904 290.34L126.904 227'/%3E%3Cpath d='M16.9039 350.254L125.304 331.246'/%3E%3Cpath d='M65.9051 409.152L174.905 378'/%3E%3Cpath d='M14.5057 465L125.904 475'/%3E%3Cpath d='M83.9038 516.551L190.904 559'/%3E%3Cpath d='M223.07 440L332.856 459.42'/%3E%3Cpath d='M244.151 246.451L351.95 218'/%3E%3Cpath d='M122.955 162.634L234.248 156'/%3E%3Cpath d='M203.431 71.5712L297.673 12.0001'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Bottom Right (189×248 viewBox) → stroke: (189/234) × 16 = 13px */
    --oku-pattern-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 189 248' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='13' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M145.101 132.75L36.9473 53.2657'/%3E%3Cpath d='M196.937 160.046L121.744 48.8024'/%3E%3Cpath d='M152.3 224.768L48.2666 139.619'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Bottom Right 2 (1113×726 viewBox) → stroke: 24px (adjusted for visual consistency) */
    --oku-pattern-bottom-right-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 1113 726' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='24' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M778.219 738.819L955.766 634.797'/%3E%3Cpath d='M850.875 574.355L1030.27 473.705'/%3E%3Cpath d='M899.23 291.604L1067.27 173.055'/%3E%3Cpath d='M519.275 652.437L695.502 546.6'/%3E%3Cpath d='M756.031 395.105L878.889 232.198'/%3E%3Cpath d='M877.016 770.726L1068.3 694.201'/%3E%3Cpath d='M1016.27 138.294L1130.14 -31.3584'/%3E%3Cpath d='M315.051 685.38L480.71 563.719'/%3E%3Cpath d='M117.414 723.255L258.765 575.134'/%3E%3Cpath d='M798.033 224.415L924.061 63.3242'/%3E%3C/g%3E%3C/svg%3E");
    
    /* ==========================================================================
       COLUMN PATTERNS - Desktop (16px stroke)
       ViewBox: 178×201 (top-left), 138×156 (bottom-right)
       ========================================================================== */
    
    /* Column Top Left (178×201 viewBox) → stroke: (178/234) × 16 = 12px */
    --oku-column-pattern-top-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 178 201' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M90.9559 53.8994L9.16797 166.447'/%3E%3Cpath d='M106.593 8.73047L23.0273 119.856'/%3E%3Cpath d='M169.004 31.6709L74.7695 134.084'/%3E%3Cpath d='M60.1992 192.4L162.612 98.5215'/%3E%3C/g%3E%3C/svg%3E");
    
    /* Column Bottom Right (138×156 viewBox) → stroke: (138/234) × 16 = 9px */
    --oku-column-pattern-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 138 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='9' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M129.352 15.8181L32.9935 116.104'/%3E%3Cpath d='M24.6289 8.6543L8.98242 146.805'/%3E%3C/g%3E%3C/svg%3E");
    
    /* ==========================================================================
       CTA PATTERNS - Desktop (16px stroke)
       Platzhalter: Verwenden bestehende Patterns, später durch CTA-spezifische ersetzen
       ========================================================================== */
    
    /* CTA Bottom Right - für "Mit Bild" (385×354 viewBox, 16px stroke) */
    --oku-pattern-cta-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 385 354' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M8.99986 345.374L128.001 323'/%3E%3Cpath d='M29.0007 280.955L133.556 208.51'/%3E%3Cpath d='M254.001 234L375.001 204'/%3E%3Cpath d='M121.001 138.246L245.643 135.963'/%3E%3Cpath d='M224.004 87L326.004 11'/%3E%3C/g%3E%3C/svg%3E");
    
    /* CTA Top Right - für "Ohne Bild" Variante (388×232 viewBox, 16px stroke) */
    --oku-pattern-cta-top-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 388 232' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M12.0005 220.629L134 201'/%3E%3Cpath d='M242.022 112L379.022 81'/%3E%3Cpath d='M31.0222 157.246L136.023 86'/%3E%3Cpath d='M125.799 15.0825L250.246 11.9175'/%3E%3C/g%3E%3C/svg%3E");
    
    /* CTA Bottom Left - für beide Varianten (369×216.99 viewBox, 16px stroke) */
    --oku-pattern-cta-bottom-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 369 216.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='16' stroke-miterlimit='10' stroke-linecap='round' fill='none'%3E%3Cpath d='M8 208.99L110 132.99'/%3E%3Cpath d='M240 184.99L361 154.99'/%3E%3Cpath d='M153.02 101.9L277.66 99.62'/%3E%3Cpath d='M199.02 34.84L323.36 8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   TABLET BREAKPOINT (≤959px) - Medium stroke (12px base)
   ========================================================================== */

@media (max-width: 959px) {
    :root {
        --oku-pattern-stroke-base: 12; /* Tablet */
        
        /* Pattern Sizes - Tablet */
        --oku-pattern-hero-left-width: 100px;
        --oku-pattern-hero-left-height: 221px;
        --oku-pattern-hero-right-width: 180px;
        --oku-pattern-hero-right-height: 252px;
        --oku-pattern-hero-no-image-left-width: 140px;
        --oku-pattern-hero-no-image-left-height: 208px;
        --oku-pattern-hero-no-image-right-width: 110px;
        --oku-pattern-hero-no-image-right-height: 179px;
        
        --oku-pattern-top-left-width: 140px;
        --oku-pattern-top-left-height: 180px;
        --oku-pattern-top-left-2-width: 160px;
        --oku-pattern-top-left-2-height: 200px;
        --oku-pattern-top-right-width: 150px;
        --oku-pattern-top-right-height: 188px;
        --oku-pattern-top-right-2-width: 160px;
        --oku-pattern-top-right-2-height: 188px;
        --oku-pattern-bottom-left-width: 120px;
        --oku-pattern-bottom-left-height: 150px;
        --oku-pattern-bottom-left-2-width: 140px;
        --oku-pattern-bottom-left-2-height: 221px;
        --oku-pattern-bottom-right-width: 120px;
        --oku-pattern-bottom-right-height: 150px;
        --oku-pattern-bottom-right-2-width: calc(400px * 1.533);
        --oku-pattern-bottom-right-2-height: 400px;
        
        --oku-column-pattern-top-left-width: 70px;
        --oku-column-pattern-top-left-height: 85px;
        --oku-column-pattern-bottom-right-width: 60px;
        --oku-column-pattern-bottom-right-height: 75px;
        
        /* CTA Patterns - Tablet */
        --oku-pattern-cta-bottom-right-width: 200px;
        --oku-pattern-cta-bottom-right-height: 184px;
        
        /* CTA Bottom Right - Tablet (12px stroke) */
        --oku-pattern-cta-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 385 354' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M8.99986 345.374L128.001 323'/%3E%3Cpath d='M29.0007 280.955L133.556 208.51'/%3E%3Cpath d='M254.001 234L375.001 204'/%3E%3Cpath d='M121.001 138.246L245.643 135.963'/%3E%3Cpath d='M224.004 87L326.004 11'/%3E%3C/g%3E%3C/svg%3E");
        --oku-pattern-cta-top-right-width: 200px;
        --oku-pattern-cta-top-right-height: 120px;
        
        /* CTA Top Right - Tablet (12px stroke) */
        --oku-pattern-cta-top-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 388 232' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M12.0005 220.629L134 201'/%3E%3Cpath d='M242.022 112L379.022 81'/%3E%3Cpath d='M31.0222 157.246L136.023 86'/%3E%3Cpath d='M125.799 15.0825L250.246 11.9175'/%3E%3C/g%3E%3C/svg%3E");
        --oku-pattern-cta-bottom-left-width: 195px;
        --oku-pattern-cta-bottom-left-height: 115px;
        
        /* CTA Bottom Left - Tablet (12px stroke) */
        --oku-pattern-cta-bottom-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 369 216.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round' fill='none'%3E%3Cpath d='M8 208.99L110 132.99'/%3E%3Cpath d='M240 184.99L361 154.99'/%3E%3Cpath d='M153.02 101.9L277.66 99.62'/%3E%3Cpath d='M199.02 34.84L323.36 8'/%3E%3C/g%3E%3C/svg%3E");
        
        /* Hero Patterns - Tablet (12px stroke) */
        --oku-pattern-hero-left: url("data:image/svg+xml,%3Csvg width='118' height='261' viewBox='0 0 118 261' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-19.9609 50.1431L97.2283 128.449' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M22.875 140.143L108.922 251.572' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M-67.4688 107.926L36.0393 203.514' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        --oku-pattern-hero-right: url("data:image/svg+xml,%3Csvg width='234' height='327' viewBox='0 0 234 327' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M166.382 102.928L132.422 237.878' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M275.017 103.092L182.561 206.927' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M150.553 -45.0088L91.168 80.696' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M108.242 170.312L54.3687 298.507' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        /* Hero No-Image - Tablet (12px stroke) */
        --oku-pattern-hero-no-image-left: url("data:image/svg+xml,%3Csvg width='255' height='379' viewBox='0 0 255 379' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112.672 33.8623L163.616 169.466' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M70.248 -12.4546L176.212 86.2845' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M-21.6367 127.042L93.0341 215.962' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M1.8125 201.938L126.857 275.298' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        --oku-pattern-hero-no-image-right: url("data:image/svg+xml,%3Csvg width='192' height='312' viewBox='0 0 192 312' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M172.709 35.014L266.103 -106.702' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M42.5332 106.95L145.895 -27.615' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M8.56641 249.497L109.328 113.415' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M107.137 175.949L244.952 76.9211' stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        /* Row Extension Patterns - Tablet (scaled stroke) */
        --oku-pattern-top-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 230 304' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M16.6387 110.361L83.5907 226.755'/%3E%3Cpath d='M-51.8525 262.803L43.9406 356.88'/%3E%3Cpath d='M106.679 171.227L190.798 275.947'/%3E%3Cpath d='M-10.0088 -17.7083L96.2563 64.6944'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-top-left-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 379' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M112.672 33.8623L163.616 169.466'/%3E%3Cpath d='M70.248 -12.4541L176.212 86.285'/%3E%3Cpath d='M-21.6367 127.041L93.0341 215.962'/%3E%3Cpath d='M1.8125 201.938L126.857 275.298'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-top-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 329 376' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M161.728 45.4998L67.3154 147.735'/%3E%3Cpath d='M294.711 23.4521L187.675 112.352'/%3E%3Cpath d='M283.334 124.261L148.917 159.999'/%3E%3Cpath d='M224.669 64.687L356.419 19.8813'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-top-right-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 363' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M260.881 35.0143L354.275 -106.702'/%3E%3Cpath d='M130.705 106.95L234.067 -27.6152'/%3E%3Cpath d='M96.7383 249.497L197.5 113.415'/%3E%3Cpath d='M195.309 175.949L333.124 76.9209'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 251 365' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M130.061 211.607L96.1016 346.558'/%3E%3Cpath d='M238.697 211.772L146.241 315.607'/%3E%3Cpath d='M114.233 63.6711L54.8477 189.376'/%3E%3Cpath d='M71.9223 278.993L18.0488 407.187'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-left-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 363 574' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='12' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M36.904 290.34L126.904 227'/%3E%3Cpath d='M16.9039 350.254L125.304 331.246'/%3E%3Cpath d='M65.9051 409.152L174.905 378'/%3E%3Cpath d='M14.5057 465L125.904 475'/%3E%3Cpath d='M83.9038 516.551L190.904 559'/%3E%3Cpath d='M223.07 440L332.856 459.42'/%3E%3Cpath d='M244.151 246.451L351.95 218'/%3E%3Cpath d='M122.955 162.634L234.248 156'/%3E%3Cpath d='M203.431 71.5712L297.673 12.0001'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 189 248' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M145.101 132.75L36.9473 53.2657'/%3E%3Cpath d='M196.937 160.046L121.744 48.8024'/%3E%3Cpath d='M152.3 224.768L48.2666 139.619'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-right-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 1113 726' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='18' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M778.219 738.819L955.766 634.797'/%3E%3Cpath d='M850.875 574.355L1030.27 473.705'/%3E%3Cpath d='M899.23 291.604L1067.27 173.055'/%3E%3Cpath d='M519.275 652.437L695.502 546.6'/%3E%3Cpath d='M756.031 395.105L878.889 232.198'/%3E%3Cpath d='M877.016 770.726L1068.3 694.201'/%3E%3Cpath d='M1016.27 138.294L1130.14 -31.3584'/%3E%3Cpath d='M315.051 685.38L480.71 563.719'/%3E%3Cpath d='M117.414 723.255L258.765 575.134'/%3E%3Cpath d='M798.033 224.415L924.061 63.3242'/%3E%3C/g%3E%3C/svg%3E");
        
        /* Column Patterns - Tablet (scaled stroke) */
        --oku-column-pattern-top-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 178 201' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='9' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M90.9559 53.8994L9.16797 166.447'/%3E%3Cpath d='M106.593 8.73047L23.0273 119.856'/%3E%3Cpath d='M169.004 31.6709L74.7695 134.084'/%3E%3Cpath d='M60.1992 192.4L162.612 98.5215'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-column-pattern-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 138 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='7' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M129.352 15.8181L32.9935 116.104'/%3E%3Cpath d='M24.6289 8.6543L8.98242 146.805'/%3E%3C/g%3E%3C/svg%3E");
    }
}

/* ==========================================================================
   MOBILE BREAKPOINT (≤569px) - Small stroke (10px base)
   ========================================================================== */

@media (max-width: 569px) {
    :root {
        --oku-pattern-stroke-base: 10; /* Mobile */
        
        /* Pattern Sizes - Mobile */
        --oku-pattern-hero-left-width: 80px;
        --oku-pattern-hero-left-height: 177px;
        --oku-pattern-hero-right-width: 120px;
        --oku-pattern-hero-right-height: 168px;
        --oku-pattern-hero-no-image-left-width: 110px;
        --oku-pattern-hero-no-image-left-height: 164px;
        --oku-pattern-hero-no-image-right-width: 85px;
        --oku-pattern-hero-no-image-right-height: 138px;
        
        --oku-pattern-top-left-width: 100px;
        --oku-pattern-top-left-height: 125px;
        --oku-pattern-top-left-2-width: 110px;
        --oku-pattern-top-left-2-height: 140px;
        --oku-pattern-top-right-width: 100px;
        --oku-pattern-top-right-height: 120px;
        --oku-pattern-top-right-2-width: 110px;
        --oku-pattern-top-right-2-height: 120px;
        --oku-pattern-bottom-left-width: 80px;
        --oku-pattern-bottom-left-height: 100px;
        --oku-pattern-bottom-left-2-width: 95px;
        --oku-pattern-bottom-left-2-height: 150px;
        --oku-pattern-bottom-right-width: 80px;
        --oku-pattern-bottom-right-height: 100px;
        --oku-pattern-bottom-right-2-width: calc(300px * 1.533);
        --oku-pattern-bottom-right-2-height: 300px;
        
        --oku-column-pattern-top-left-width: 50px;
        --oku-column-pattern-top-left-height: 60px;
        --oku-column-pattern-bottom-right-width: 45px;
        --oku-column-pattern-bottom-right-height: 55px;
        
        /* CTA Patterns - Mobile */
        --oku-pattern-cta-bottom-right-width: 130px;
        --oku-pattern-cta-bottom-right-height: 120px;
        
        /* CTA Bottom Right - Mobile (10px stroke) */
        --oku-pattern-cta-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 385 354' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M8.99986 345.374L128.001 323'/%3E%3Cpath d='M29.0007 280.955L133.556 208.51'/%3E%3Cpath d='M254.001 234L375.001 204'/%3E%3Cpath d='M121.001 138.246L245.643 135.963'/%3E%3Cpath d='M224.004 87L326.004 11'/%3E%3C/g%3E%3C/svg%3E");
        --oku-pattern-cta-top-right-width: 130px;
        --oku-pattern-cta-top-right-height: 78px;
        
        /* CTA Top Right - Mobile (10px stroke) */
        --oku-pattern-cta-top-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 388 232' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M12.0005 220.629L134 201'/%3E%3Cpath d='M242.022 112L379.022 81'/%3E%3Cpath d='M31.0222 157.246L136.023 86'/%3E%3Cpath d='M125.799 15.0825L250.246 11.9175'/%3E%3C/g%3E%3C/svg%3E");
        --oku-pattern-cta-bottom-left-width: 125px;
        --oku-pattern-cta-bottom-left-height: 74px;
        
        /* CTA Bottom Left - Mobile (10px stroke) */
        --oku-pattern-cta-bottom-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 369 216.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round' fill='none'%3E%3Cpath d='M8 208.99L110 132.99'/%3E%3Cpath d='M240 184.99L361 154.99'/%3E%3Cpath d='M153.02 101.9L277.66 99.62'/%3E%3Cpath d='M199.02 34.84L323.36 8'/%3E%3C/g%3E%3C/svg%3E");
        
        /* Hero Patterns - Mobile (10px stroke) */
        --oku-pattern-hero-left: url("data:image/svg+xml,%3Csvg width='118' height='261' viewBox='0 0 118 261' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-19.9609 50.1431L97.2283 128.449' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M22.875 140.143L108.922 251.572' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M-67.4688 107.926L36.0393 203.514' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        --oku-pattern-hero-right: url("data:image/svg+xml,%3Csvg width='234' height='327' viewBox='0 0 234 327' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M166.382 102.928L132.422 237.878' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M275.017 103.092L182.561 206.927' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M150.553 -45.0088L91.168 80.696' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M108.242 170.312L54.3687 298.507' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        /* Hero No-Image - Mobile (10px stroke) */
        --oku-pattern-hero-no-image-left: url("data:image/svg+xml,%3Csvg width='255' height='379' viewBox='0 0 255 379' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112.672 33.8623L163.616 169.466' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M70.248 -12.4546L176.212 86.2845' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M-21.6367 127.042L93.0341 215.962' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M1.8125 201.938L126.857 275.298' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        --oku-pattern-hero-no-image-right: url("data:image/svg+xml,%3Csvg width='192' height='312' viewBox='0 0 192 312' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M172.709 35.014L266.103 -106.702' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M42.5332 106.95L145.895 -27.615' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M8.56641 249.497L109.328 113.415' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M107.137 175.949L244.952 76.9211' stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
        
        /* Row Extension Patterns - Mobile (10px stroke) */
        --oku-pattern-top-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 230 304' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M16.6387 110.361L83.5907 226.755'/%3E%3Cpath d='M-51.8525 262.803L43.9406 356.88'/%3E%3Cpath d='M106.679 171.227L190.798 275.947'/%3E%3Cpath d='M-10.0088 -17.7083L96.2563 64.6944'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-top-left-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 379' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M112.672 33.8623L163.616 169.466'/%3E%3Cpath d='M70.248 -12.4541L176.212 86.285'/%3E%3Cpath d='M-21.6367 127.041L93.0341 215.962'/%3E%3Cpath d='M1.8125 201.938L126.857 275.298'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-top-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 329 376' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M161.728 45.4998L67.3154 147.735'/%3E%3Cpath d='M294.711 23.4521L187.675 112.352'/%3E%3Cpath d='M283.334 124.261L148.917 159.999'/%3E%3Cpath d='M224.669 64.687L356.419 19.8813'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-top-right-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 363' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M260.881 35.0143L354.275 -106.702'/%3E%3Cpath d='M130.705 106.95L234.067 -27.6152'/%3E%3Cpath d='M96.7383 249.497L197.5 113.415'/%3E%3Cpath d='M195.309 175.949L333.124 76.9209'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 251 365' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M130.061 211.607L96.1016 346.558'/%3E%3Cpath d='M238.697 211.772L246.241 315.607'/%3E%3Cpath d='M114.233 63.6711L54.8477 189.376'/%3E%3Cpath d='M71.9223 278.993L18.0488 407.187'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-left-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 363 574' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='10' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M36.904 290.34L126.904 227'/%3E%3Cpath d='M16.9039 350.254L125.304 331.246'/%3E%3Cpath d='M65.9051 409.152L174.905 378'/%3E%3Cpath d='M14.5057 465L125.904 475'/%3E%3Cpath d='M83.9038 516.551L190.904 559'/%3E%3Cpath d='M223.07 440L332.856 459.42'/%3E%3Cpath d='M244.151 246.451L351.95 218'/%3E%3Cpath d='M122.955 162.634L234.248 156'/%3E%3Cpath d='M203.431 71.5712L297.673 12.0001'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 189 248' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='8' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M145.101 132.75L36.9473 53.2657'/%3E%3Cpath d='M196.937 160.046L121.744 48.8024'/%3E%3Cpath d='M152.3 224.768L48.2666 139.619'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-pattern-bottom-right-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 1113 726' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='14' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M778.219 738.819L955.766 634.797'/%3E%3Cpath d='M850.875 574.355L1030.27 473.705'/%3E%3Cpath d='M899.23 291.604L1067.27 173.055'/%3E%3Cpath d='M519.275 652.437L695.502 546.6'/%3E%3Cpath d='M756.031 395.105L878.889 232.198'/%3E%3Cpath d='M877.016 770.726L1068.3 694.201'/%3E%3Cpath d='M1016.27 138.294L1130.14 -31.3584'/%3E%3Cpath d='M315.051 685.38L480.71 563.719'/%3E%3Cpath d='M117.414 723.255L258.765 575.134'/%3E%3Cpath d='M798.033 224.415L924.061 63.3242'/%3E%3C/g%3E%3C/svg%3E");
        
        /* Column Patterns - Mobile (scaled stroke) */
        --oku-column-pattern-top-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 178 201' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='8' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M90.9559 53.8994L9.16797 166.447'/%3E%3Cpath d='M106.593 8.73047L23.0273 119.856'/%3E%3Cpath d='M169.004 31.6709L74.7695 134.084'/%3E%3Cpath d='M60.1992 192.4L162.612 98.5215'/%3E%3C/g%3E%3C/svg%3E");
        
        --oku-column-pattern-bottom-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 138 156' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23EF7B00' stroke-width='7' stroke-miterlimit='10' stroke-linecap='round'%3E%3Cpath d='M129.352 15.8181L32.9935 116.104'/%3E%3Cpath d='M24.6289 8.6543L8.98242 146.805'/%3E%3C/g%3E%3C/svg%3E");
    }
}