/** Shopify CDN: Minification failed

Line 966:59 Expected ":"
Line 966:61 Expected identifier but found "var("
Line 1004:51 Expected ":"
Line 1050:97 Expected ":"

**/
:root, [data-theme="light"] {
    --canvas: #dcdcdb;
    --paper: #f2f1ee;
    --light-mix: #efefef;
    --dark-mix: #1c1b1b;
    --light-text: var(--light-mix);
    --dark-text: var(--dark-mix);
    --well: #dcd9d1;
    --well-l: #dcd9d1;
    --clay-soft: linear-gradient(180deg, #fafaf8 0%, #e8e7e3 100%);
    --clay-deep: linear-gradient(180deg, #2a2826 0%, #0a0a0a 100%);
    
    --canvas-light: #dcdcdb;
    --paper-light: #f2f1ee;
    --clay-soft-light: linear-gradient(180deg, #fafaf8 0%, #e8e7e3 100%);
    --well-light: #dcd9d1;

    --canvas-dark: #1a1a1a;
    --paper-dark: oklch(0.3 0 264);
    --clay-soft-dark: linear-gradient(180deg, #2a2823 0%, #1b1a16 100%);
    
    --clay-soft-clr1: #fafaf8;
    --clay-deep-clr1: #2a2826;

    --well-border: 1px solid rgba(0, 0, 0, 0.05);
    --well-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    --well-shadow2: inset 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    --well-shadow3: 0 0 0.1em rgba(255, 255, 255, 0.3), inset 0 0.05em 0.3em rgba(0, 0, 0, 0.3);
    --well-shadow4: 0 0 0.1em rgba(255, 255, 255, 0.1), inset 0 0.05em 0.3em rgba(0, 0, 0, 0.5);
    --well-shadow5: 0 0 0.07em rgba(255, 255, 255, 0.1), inset 0 0 0.7em rgba(0, 0, 0, 0.2), inset 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
    --well-shadow-light: inset 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    --well-shadow-dark2: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --well-shadow-dark: inset 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    
    --shadow-soft: 0 2px 1px rgba(255, 255, 255, 0.5) inset, 0 -2px 4px rgba(0, 0, 0, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 10px 22px -8px rgba(20, 20, 25, 0.16);
    --shadow-soft-clr: 0 2px 2px rgba(255, 255, 255, 0.3) inset, 0 -2px 4px rgba(0, 0, 0, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 10px 22px -8px rgba(20, 20, 25, 0.16);
    --shadow-clay: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 -1px 0 rgba(0, 0, 0, 0.1) inset, 0 8px 18px -4px rgba(0, 0, 0, 0.3), 0 22px 40px -14px rgba(0, 0, 0, 0.38);
    --shadow-soft-dark: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 26px -8px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -32px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 4px 7px -4px rgba(0, 0, 0, 0.45);
    --glass-dark-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    --frost-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    
    --frost-border: 1px solid rgba(255, 255, 255, 0.45);
    --frost-bg: rgba(255, 255, 255, 0.08);
    --focus: #0c0c0e;
    --bg-word:rgba(150,147,140,.30); --watermark: rgba(150, 147, 140, 0.3); 
    --bg-word2: rgba(125, 122, 115, .15);
    --bg-word3: color-mix(in srgb, var(--ink) 4%, transparent);

    /* For metafield selection */
    --clay-glass: rgba(255, 255, 255, 0.5);
    --clay-glass-clr: #34332f;
    --glass: linear-gradient( 135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.32));
    --glass-dark: rgba(255, 255, 255, 0.04);
    --glass-dark2: linear-gradient( 145deg, rgba(255, 255, 255, 0.12),rgba(255, 255, 255, 0.03)), rgba(20, 19, 16, 0.64);
    --glass-ondark: rgba(255, 255, 255, 0.03);
    --dx-black: #141416;
    --dx-black2: linear-gradient(to bottom, #171717, #242424);
    --soft-line-border: 1px solid var(--line-soft);
    --line-border: 1px solid var(--line);
    --dark-border: 1px solid #292929;
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
    --glass-ondark-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-dark-border: 1px solid rgba(255, 255, 255, 0.1);
    --clay-glass-border: 1px solid color-mix(in srgb, var(--canvas) 20%, var(--light-mix) 80%);
    --soft-line-dark-border: 1px solid var(--line-soft-dark);
    --clay-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 2px rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 7px 20px -16px rgba(28, 27, 27, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --glass-dark2-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 28px 70px rgba(0, 0, 0, 0.48);
    --glass-dark3-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 24px 60px rgba(12, 12, 14, 0.18);
    --glass-ondark-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --dx-black-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    --dx-black2-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"], .dhs--dark-theme {
    --canvas: #1a1a1a;
    --paper: oklch(0.3 0 264);
    --well: #0d0c0a;
    --clay-soft: linear-gradient(180deg, #2a2823 0%, #1b1a16 100%);
    --clay-deep: linear-gradient(180deg, #3a3733 0%, #211f1b 100%);
    --clay-soft-clr1: #2a2823;
    --clay-deep-clr1: #3a3733;
    --well-border: 1px solid rgba(255, 255, 255, 0.05);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 26px -8px rgba(0, 0, 0, 0.6);
    --well-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --well-shadow2: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --shadow-clay: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.6) inset, 0 10px 22px -6px rgba(0, 0, 0, 0.6), 0 26px 46px -16px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.7);
    --glass-dark-shadow: 0 4px 32px rgba(0, 0, 0, 0.7);
    --frost-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    --frost-border: 1px solid rgba(255, 255, 255, 0.15);
    --frost-bg: rgba(255, 255, 255, 0.04);
    --bg-word:rgba(243,240,236,.05); --watermark: rgba(243, 240, 236, 0.05);
    --bg-word2: rgba(243,240,236,.045);
    --bg-word3: color-mix(in srgb, #f9fafb 4%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --canvas: #1a1a1a; --paper: oklch(0.3 0 264); --well: #0d0c0a;
        --clay-soft: linear-gradient(180deg, #2a2823 0%, #1b1a16 100%); --clay-deep: linear-gradient(180deg, #3a3733 0%, #211f1b 100%);
        --clay-soft-clr1: #2a2823; --clay-deep-clr1: #3a3733; --well-border: 1px solid rgba(255, 255, 255, 0.05);
        --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 26px -8px rgba(0, 0, 0, 0.6);
        --well-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
        --well-shadow2: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
        --shadow-clay: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.6) inset, 0 10px 22px -6px rgba(0, 0, 0, 0.6), 0 26px 46px -16px rgba(0, 0, 0, 0.6);
        --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.7);
        --glass-dark-shadow: 0 4px 32px rgba(0, 0, 0, 0.7);
        --frost-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
        --frost-border: 1px solid rgba(255, 255, 255, 0.15); --frost-bg: rgba(255, 255, 255, 0.04);
        --bg-word:rgba(243,240,236,.05); --watermark: rgba(243, 240, 236, 0.05);
        --bg-word2: rgba(243,240,236,.045);
        --bg-word3: color-mix(in srgb, #f9fafb 4%, transparent);
    }
}
body {
    --bg: var(--canvas); --ink: contrast-color(var(--canvas));
    --ink-soft: color-mix(in srgb, var(--ink), transparent 20%);
    --clr: var(--ink-soft); 
    --line: color-mix(in srgb, var(--ink-soft), transparent 60%);
    --line-soft: color-mix(in srgb, var(--line), transparent 60%);
    --muted-mix: color-mix(in srgb, var(--ink-soft), var(--dark-mix) 50%);
    --muted: color-mix(in srgb, var(--muted-mix), transparent 50%);
    --faint: color-mix(in srgb, var(--muted), transparent 50%);
    --light-text-soft: color-mix(in srgb, var(--light-mix) 80%, transparent 20%);
    --dark-text-soft: color-mix(in srgb, var(--dark-mix) 80%, transparent 20%);
    
    /* ========================================================================= DARK TOKENS FOR DARK SURFACE INSIDE LIGHT THEME */
    --ink-dark: contrast-color(var(--canvas-dark));
    --ink-soft-dark: color-mix(in srgb, var(--ink-dark), transparent 20%);
    --line-dark: color-mix(in srgb, var(--ink-soft-dark), transparent 60%);
    --line-soft-dark: color-mix(in srgb, var(--line-dark), transparent 60%);
    --muted-mix-dark: color-mix(in srgb, var(--ink-soft-dark), var(--dark-mix) 50%);
    --muted-dark: color-mix(in srgb, var(--muted-mix-dark), transparent 50%);
    --faint-dark: color-mix(in srgb, var(--muted-dark), transparent 50%);
    
    /* ============================================================================================================================================== LIGHT TOKENS FOR LIGHT SURFACE INSIDE DARK THEME */
    --ink-light: contrast-color(var(--canvas-light));
    --ink-soft-light: color-mix(in srgb, var(--ink-light), transparent 20%);
    --line-light: color-mix(in srgb, var(--ink-soft-light), transparent 60%);
    --line-soft-light: color-mix(in srgb, var(--line-light), transparent 60%);
    --muted-mix-light: color-mix(in srgb, var(--ink-soft-light), var(--dark-mix) 50%);
    --muted-light: color-mix(in srgb, var(--muted-mix-light), transparent 50%);
    --faint-light: color-mix(in srgb, var(--muted-light), transparent 50%);
    background-color: var(--bg, var(--canvas)); color: var(--clr, var(--ink-soft));
}

/* =================================================================================================================================================== COLOR WASH */
.dhs-hero__atmos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dhs-hero__wash, .hero__wash {
    display: block !important; position: absolute; inset: -10%;
    background: 
       radial-gradient(60% 55% at 72% 38%, rgba(192, 106, 77, .12), transparent 60%), 
       radial-gradient(55% 60% at 18% 78%, rgba(28, 27, 27, .05), transparent 60%), 
       linear-gradient(180deg, #f6f3ef 0%, var(--paper) 55%, #ebe7e1 100%);
}
.dhs-color-wash {
    display: block !important; border-radius: 50%;
    inset: -10% -10% 0 20%; z-index: 0; position: absolute; pointer-events: none;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent, var(--copper)), transparent 80%), transparent 80%);
    filter: blur(40px);
}
[data-theme="dark"] .dhs-color-wash.wash-hide, 
[data-theme="dark"] .hero__wash.wash-hide,
[data-theme="dark"] .color-orb.wash-hide,
.dhs--dark-theme .dhs-color-wash.wash-hide,
.dhs--dark-theme .hero__wash.wash-hide,
.dhs--dark-theme .color-orb.wash-hide { display: none !important; }
@media (prefers-color-scheme: dark) {
    .dhs-color-wash.wash-hide:not([data-theme="light"]),
    .hero__wash.wash-hide:not([data-theme="light"]),
    .color-orb.wash-hide:not([data-theme="light"]) { display: none !important; }
}

section {
    --clr: var(--ink-soft);
    color: var(--ink-soft);
    --accent-dark: oklch(from var(--accent) calc(l - 0.14) c h);
    --accent-dark2: color-mix(in srgb, var(--accent), var(--dark-mix) 20%);
    --accent-deep: color-mix(in oklch, var(--accent-dark) 90%, black);
    --accent-bright: oklch(from var(--accent) l calc(c * 1.2) h);
    --accent-gradient: linear-gradient(180deg, var(--accent), var(--accent-bright), var(--accent-dark));
    --on-accent-mix: contrast-color(var(--accent));
    --on-accent: color-mix(in oklch, var(--accent) 40%, var(--on-accent-mix) 60%);
    --accent-v1: color-mix(in oklch, var(--accent) 15%, white);
    --accent-v2-a: oklch(from var(--accent) l calc(c - 0.15) h);
    --accent-v2: color-mix(in oklch, var(--accent-v2-a) 70%, white);
    --accent-v2-d: color-mix(in oklch, var(--accent-v2-a) 80%, var(--accent-deep));
    --accent-v3-a: oklch(from var(--accent) calc(l + 0.1) c h);
    --accent-v3-b: color-mix(in oklch, var(--accent-v3-a) 70%, black);
    --accent-v3: color-mix(in oklch, var(--accent-v3-b) 70%, white);
    --accent-v4: color-mix(in oklch, var(--accent-v3) 35%, white);
    --accent-v5: color-mix(in oklch, var(--accent-v3-b) 90%, white);
    --accent-glow-shadow: 0 1px 0 var(--accent-v1) inset, 0 -2px 4px var(--accent-v2) inset, 0 12px 24px -8px var(--accent-v3);
    --accent-glow-shadow-d: 0 1px 0 var(--accent) inset, 0 -2px 4px var(--accent-v2-d) inset, 0 6px 12px -4px color-mix(in oklch, var(--accent-v3-b) 70%, var(--dark-mix));
    --accent-glow-shadow-hover: 0 1px 0 var(--accent-v4) inset, 0 18px 32px -10px var(--accent-v5);
    --shad1-a: oklch(from var(--accent) l calc(c + 0.01) h);
    --shad1-b: color-mix(in srgb, var(--shad1-a) 40%, white);
    --shad1: color-mix(in srgb, var(--shad1-b) 40%, transparent);
    --shad2-a: oklch(from var(--accent) calc(l - 0.2) c h);
    --shad2-b: color-mix(in oklch, var(--shad2-a) 70%, var(--dark-mix));
    --shad2: color-mix(in oklch, var(--shad2-b) 40%, transparent);
    --shad3-a: oklch(from var(--accent) calc(l + 0.02) c h);
    --shad3-b: color-mix(in oklch, var(--shad3-a) 85%, var(--dark-mix));
    --shad3: color-mix(in oklch, var(--shad3-b) 60%, transparent);
    --accent-shadow: 0 1px 0 var(--shad1) inset, 0 -2px 5px var(--shad2) inset, 0 12px 24px -18px var(--shad3);
    --accent-faded: color-mix(in srgb, var(--accent) 13%, transparent);
    --accent-border: 1px solid var(--accent);
    --accent-faded-border: 1px solid var(--accent-faded);
    --accent-muted-border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (prefers-color-scheme: dark) { section { --accent-glow-shadow: var(--accent-glow-shadow-d); } }
[data-theme="dark"] section, .dhs--dark-theme section { --accent-glow-shadow: var(--accent-glow-shadow-d); }

/* =================================================================================================================================================== WATERMARK */
.dhs-watermark, .dhs-watermark2, .dhs-watermark3, .dhs-watermark4 {
    position: absolute; z-index: 0; line-height: .8; font-weight: 800; 
    letter-spacing: -.07em; text-transform: uppercase; font-family: var(--font-logo);
    user-select: none; pointer-events: none; white-space: nowrap;
}
.dhs-watermark {
    top: 50%; right: 0; bottom: 0; left: 0; text-align: center;
    font-size: clamp(76px,15vw,220px); color: var(--watermark-clr, var(--bg-word3));
}
.dhs-watermark2 {
    top: 14%; left: -2%; font-size: clamp(110px, 19vw, 320px);
    color: var(--watermark-clr, var(--bg-word3));
}
.dhs-watermark3 {
    left: 50%; bottom: 12%; transform: translateX(-50%);
    font-size: clamp(110px, 19vw, 300px);
    color: var(--watermark-clr, var(--bg-word3));
}
.dhs-watermark4 {
    left: 50%; bottom: 20%;
    transform: translateX(-50%);
    font-size: clamp(110px, 19vw, 300px);
    color: var(--watermark-clr, var(--bg-word3));
}
.dhs-watermark5 {
    top: 14%; left: -2%; font-size: clamp(110px, 19vw, 320px);
    color: var(--watermark-clr, var(--bg-word3));
}
.hero-word-watermark, .hero-word {
    position: absolute; left: 50%; bottom: 9%; color: rgba(118, 115, 108, 0.13);
    font: 800 clamp(120px, 19vw, 300px) / 0.8 var(--font-logo);
    letter-spacing: -0.05em; white-space: nowrap; transform: translateX(-50%);
}
@media (max-width: 760px) { 
    .dhs-watermark5 { top: 12%; font-size: 30vw; } 
    .hero-word-watermark, .hero-word { font-size: clamp(4rem, 2.2857vw, 5rem); }
}
.dhs-watermark--default { color: color-mix(in srgb, var(--ink) 4%, transparent); }
.dhs-watermark--theme { color: var(--watermark); }
.dhs-watermark--accent { color: var(--accent-wash); }

/* =================================================================================================================================================== WELL */
.dx-well-calc {
    --w-bg: var(--wbg); 
    --wbg-l1: color-mix(in srgb, var(--bgc) 90%, var(--light-mix) 10%);
    --wbg-l2: color-mix(in srgb, var(--bg) 90%, var(--light-mix) 10%); 
    --wbg-l3: color-mix(in srgb, var(--well));
    --wbg-d1: color-mix(in srgb, var(--bgc) 90%, var(--dark-mix) 10%);
    --wbg-d2: color-mix(in srgb, var(--bg) 90%, var(--dark-mix) 10%);
    --wbg-d3: color-mix(in srgb, var(--well) 90%, var(--dark-mix) 10%);
    --tc: contrast-color(var(--wbg)); 
    --tc1: contrast-color(var(--wbg-l1)); 
    --tc2: contrast-color(var(--wbg-l2)); 
    --tc3: contrast-color(var(--ink-soft));
    --w-cl: var(--wcl); --w-cl1: color-mix(in srgb, var(--tc1) 90%, transparent 10%); 
    --w-cl2: color-mix(in srgb, var(--tc2) 90%, transparent 10%);
    --w-cl3: color-mix(in srgb, var(--tc3) 90%, transparent 10%); 
    --w-brd: var(--wbr); --w-br: 1px solid color-mix(in srgb, var(--tc) 10%, transparent 90%);
    --w-br1: 1px solid color-mix(in srgb, var(--tc1) 10%, transparent 90%); 
    --w-br2: 1px solid color-mix(in srgb, var(--tc2) 10%, transparent 90%);
    --w-br3: 1px solid color-mix(in srgb, var(--tc3) 10%, transparent 90%); 
    --w-sh: var(--wsh); color: var(--w-cl, var(--w-cl1, var(--w-cl2, var(--w-cl3))));
    background: var(--w-bg, var(--wbg-l1, var(--wbg-l2))); 
    border: 1px solid var(--w-brd, var(--w-br, var(--w-br1, var(--w-br2, var(--w-br3))))); 
    box-shadow: var(--w-sh, var(--well-shadow));
}
.dx-well {
    --wsh: var(--well-shadow); 
    --wbg: var(--well); --wcl: var(--ink-soft); 
    --wbr: var(--well-border);
    background: var(--well); 
    color: var(--ink-soft); 
    border: var(--well-border); 
    box-shadow: var(--well-shadow);
}
.dx-well2 {
    --wc1: contrast-color(var(--wbg)); 
    --wc2: color-mix(in srgb, var(--wc1) 90%, transparent 10%); 
    --wbrdr-c: color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    --wc: var(--ink-soft); 
    --brdr-c: color-mix(in srgb, var(--wc) 10%, transparent 90%); 
    --wsh: var(--well-shadow2);
    background: var(--wbg, var(--well)); color: var(--wc2, var(--wc)); 
    border: 1px solid var(--wbrdr-c, var(--brdr-c));  
    box-shadow: var(--well-shadow2);
}
.dx-well3 {
    --wc1: contrast-color(var(--wbg)); 
    --wc2: color-mix(in srgb, var(--wc1) 90%, transparent 10%); 
    --wbrdr-c: color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    --wc: var(--ink-soft); 
    --brdr-c: color-mix(in srgb, var(--wc) 10%, transparent 90%); 
    --wsh: var(--well-shadow3);
    background: var(--wbg, var(--well)); 
    color: var(--wc2, var(--wc)); 
    border: 1px solid var(--wbrdr-c, var(--brdr-c)); 
    box-shadow: var(--well-shadow3);
}
.dx-well4 {
    --wc1: contrast-color(var(--wbg)); 
    --wc2: color-mix(in srgb, var(--wc1) 90%, transparent 10%); 
    --wbrdr-c: color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    --wc: var(--ink-soft); --brdr-c: color-mix(in srgb, var(--wc) 10%, transparent 90%);
    --wbg2: color-mix(in srgb, var(--well) 90%, var(--dark-mix) 10%);
    --wsh: var(--well-shadow4);
    background: var(--wbg, var(--wbg2));
    color: var(--wc2, var(--wc));
    border: 1px solid var(--wbrdr-c, var(--brdr-c));
    box-shadow: var(--well-shadow4);
}
.dx-well5 {
    --wc1: contrast-color(var(--wbg));
    --wc2: color-mix(in srgb, var(--wc1) 90%, transparent 10%);
    --wbrdr-c: color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    --wc: var(--ink-soft);
    --brdr-c: color-mix(in srgb, var(--wc) 10%, transparent 90%);
    --wbg2: color-mix(in srgb, var(--well) 90%, var(--dark-mix) 10%);
    --wsh: var(--well-shadow5);
    background: var(--wbg, var(--wbg2));
    color: var(--wc2, var(--wc));
    border: 1px solid var(--wbrdr-c, var(--brdr-c));
    box-shadow: var(--well-shadow5);
}
.dx-well-sd {
    --wsh: var(--well-shadow-dark);
    border: 1px solid color-mix(in srgb, var(--ink-soft) 10%, transparent 90%);
    box-shadow: var(--well-shadow-dark);
    background: var(--wbg, var(--bg));
}
.dx-well-sl {
    --wsh: var(--well-shadow-light);
    border: 1px solid color-mix(in srgb, var(--ink-soft) 10%, transparent 90%);
    box-shadow: var(--well-shadow-light);
    background: var(--wbg, var(--bg));
}
.dx-well-bl {
    --wbg: color-mix(in srgb, var(--bgc), var(--light-mix) 10%);
    --wc: contrast-color(var(--wbg));
    --wbg2: color-mix(in srgb, var(--bg), var(--light-mix) 10%);
    --wc2: contrast-color(var(--wbg2));
    --wcl: color-mix(in srgb, var(--wc, var(--wc2)) 90%, transparent 10%);
    color: color-mix(in srgb, var(--wc, var(--wc2)) 90%, transparent 10%);
    border: 1px solid color-mix(in srgb, var(--wc, var(--wc2)) 15%, transparent 85%);
    background: var(--wbg, var(--wbg2));
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-bd {
    --wbg: color-mix(in srgb, var(--bgc), var(--dark-mix) 15%);
    --wc: contrast-color(var(--wbg));
    --wbg2: color-mix(in srgb, var(--bg), var(--dark-mix) 15%);
    --wc2: contrast-color(var(--wbg2));
    --wcl: color-mix(in srgb, var(--wc, var(--wc2)) 90%, transparent 10%);
    color: color-mix(in srgb, var(--wc, var(--wc2)) 90%, transparent 10%);
    border: 1px solid color-mix(in srgb, var(--wc, var(--wc2)) 15%, transparent 85%);
    background: var(--wbg, var(--wbg2));
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-sl-bl, .dx-well-bl-sl {
    --wbg: color-mix(in srgb, var(--bgc), var(--light-mix) 10%);
    --wc: contrast-color(var(--wbg));
    --wsh: var(--well-shadow-light);
    --wcl: color-mix(in srgb, var(--wc) 90%, transparent 10%);
    color: color-mix(in srgb, var(--wc) 90%, transparent 10%);
    border: 1px solid color-mix(in srgb, var(--wc) 15%, transparent 85%);
    background: var(--wbg, var(--well));
    box-shadow: var(--well-shadow-light);
}
.dx-well-sd-bl, .dx-well-bl-sd {
    --wbg: color-mix(in srgb, var(--bgc), var(--light-mix) 10%);
    --wc: contrast-color(var(--wbg));
    --wcl: color-mix(in srgb, var(--wc) 90%, transparent 10%);
    --wsh: var(--well-shadow-dark);
    color: color-mix(in srgb, var(--wc) 90%, transparent 10%);
    border: 1px solid color-mix(in srgb, var(--wc) 15%, transparent 85%);
    background: var(--wbg, var(--well));
    box-shadow: var(--well-shadow-dark);
}
.dx-well-sd-bd, .dx-well-bd-sd {
   --wbg: color-mix(in srgb, var(--bgc), var(--dark-mix) 15%);
   --wc: contrast-color(var(--wbg));
   --wcl: color-mix(in srgb, var(--wc) 90%, transparent 10%);
   --wsh: var(--well-shadow-dark);
   color: color-mix(in srgb, var(--wc) 90%, transparent 10%);
   border: 1px solid color-mix(in srgb, var(--wc) 15%, transparent 85%);
   background: var(--wbg, var(--well));
   box-shadow: var(--well-shadow-dark);
}
.dx-well-sl-bd, .dx-well-bd-sl {
   --wbg: color-mix(in srgb, var(--bgc), var(--dark-mix) 15%);
   --wc: contrast-color(var(--wbg));
   --wcl: color-mix(in srgb, var(--wc) 90%, transparent 10%);
   --wsh: var(--well-shadow-light);
   color: color-mix(in srgb, var(--wc) 90%, transparent 10%);
   border: 1px solid color-mix(in srgb, var(--wc) 15%, transparent 85%);
   background: var(--wbg, var(--well));
   box-shadow: var(--well-shadow-light);
}
.dx-well-sd2 {
   --wsh: var(--well-shadow-dark2);
   background: var(--wbg, var(--well));
   color: var(--clr);
   border: 1px solid color-mix(in srgb, var(--clr) 10%, transparent 90%);
   box-shadow: var(--well-shadow-dark2);
}
.dx-well-acc-clr {
   font-weight: bold;
   letter-spacing: var(--spacing, var(--tracking, 0.05em));
   background: var(--wc, var(--well));
   --wcl: var(--accent);
   color: var(--accent);
   border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent 90%);
   box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-acc-bg {
    --wb: color-mix(in srgb, var(--accent) 40%, transparent 60%);
    --wbg: var(--wb);
    --clr1: contrast-color(var(--wb));
    --wclr: color-mix(in srgb, var(--clr1) 90%, transparent 10%);
    --wcl: var(--wclr);
    --wbr: 1px solid color-mix(in srgb, var(--wclr) 10%, transparent 90%);
    background: var(--wb);
    color: var(--wclr);
    border: 1px solid color-mix(in srgb, var(--wclr) 10%, transparent 90%);
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-acc-l {
    --wb: color-mix(in srgb, var(--accent) 40%, transparent 60%);
    --wbg: var(--wb);
    --wclr1: contrast-color(var(--wb));
    --wclr: color-mix(in srgb, var(--accent) 80%, var(--dark-mix) 20%);
    --wbr: 1px solid color-mix(in srgb, var(--wclr1) 10%, transparent 90%);
    --wcl: var(--wclr);
    font-weight: bold;
    letter-spacing: var(--spacing, var(--tracking, 0.05em));
    background: var(--wb);
    color: var(--wclr);
    border: 1px solid color-mix(in srgb, var(--wclr1) 10%, transparent 90%);
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-acc {
    --wclr1: contrast-color(var(--accent));
    --wclr: color-mix(in srgb, var(--accent) 10%, var(--wclr1) 90%);
    --wl1: color-mix(in srgb, var(--accent) 10%, var(--light-mix) 90%);
    --wl: color-mix(in srgb, var(--wl1) 10%, transparent 90%);
    --wd1: color-mix(in srgb, var(--accent) 10%, var(--dark-mix) 90%);
    --wd: color-mix(in srgb, var(--wd1) 90%, transparent 10%);
    --ws-l: inset 0 2px 5px var(--wd), inset 0 -1px 0px var(--wl);
    --wsh: var(--ws-l);
    --wbr: 1px solid color-mix(in srgb, var(--wclr1) 10%, transparent 90%);
    --wcl: var(--wclr);
    --wbg: var(--accent-gradient);
    font-weight: bold;
    letter-spacing: var(--spacing, var(--tracking, 0.05em));
    background: var(--accent-gradient);
    color: var(--wclr);
    border: 1px solid color-mix(in srgb, var(--wclr1) 10%, transparent 90%);
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-canvas {
    --bgc: var(--canvas);
   --bg: var(--canvas);
   --clr: contrast-color(var(--canvas));
   --shadow: var(--shadow-soft-clr);
   --brdr: 1px solid var(--line-soft);
   background-color: var(--bgc);
   background: var(--bg);
   color: var(--clr);
   border: var(--brdr);
   box-shadow: var(--shadow);
}
.dx-paper {
   --bgc: var(--paper);
   --bg: var(--paper);
   --clr: var(--ink-soft);
   --shadow: var(--shadow-card);
   --brdr: 1px solid var(--line-soft);
   background-color: var(--bgc);
   background: var(--bg);
   color: var(--ink-soft);
   border: 1px solid var(--line-soft);
   box-shadow: var(--shadow-card);
}
.dx-paper-soft, .dx-ghost, .dx-soft, .chip--light {
    --bgc: var(--paper);
    --bg: var(--paper);
    --clr: var(--ink-soft);
    --shadow: var(--shadow-soft);
    --brdr: 1px solid var(--line-soft);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
}
.dx-soft-dark {
    --wsh: var(--well-shadow-dark);
    --bgc: var(--paper-dark);
    --bg: var(--paper-dark);
    --shadow: var(--shadow-soft-dark);
    --clr: var(--ink-soft-dark);
    --brdr: 1px solid var(--line-soft-dark);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
}
.dx-dark, .dx-deep, .dx-clay-deep, .chip--dark {
    --wsh: var(--well-shadow-dark);
    --bgc: var(--clay-deep-clr1);
    --bg: var(--clay-deep);
    --clr: var(--light-text);
    --brdr: none;
    --shadow: var(--shadow-clay);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    border: none;
}
.dx-clay {
    --bgc: var(--clay-soft-clr1);
    --bg: var(--clay-soft);
    --clr: var(--ink-soft);
    --brdr: 1px solid var(--line-soft);
    --shadow: var(--shadow-clay);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--ink-ink);
    border: var(--brdr);
    box-shadow: var(--shadow);
}
.dx-clay-soft {
    --bgc: var(--clay-soft-clr1);
    --bg: var(--clay-soft);
    --clr: var(--ink-soft);
    --shadow: var(--shadow-soft);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
}
.dx-clay-soft-light {
    --bgc: var(--well-l);
    --bg: var(--clay-soft-light);
    --clr: var(--ink-soft-light);
    --shadow: var(--shadow-soft);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
}
.dx-paper-soft-light {
    --bgc: var(--well-l);
    --bg: var(--paper-light);
    --clr: var(--ink-soft-light);
    --shadow: var(--shadow-soft);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
}
.dx-clay-soft-dark {
    --ws: var(--well-shadow-dark);
    --bgc: #2a2823;
    --bg: var(--clay-soft-dark);
    --clr: var(--ink-soft-dark);
    --shadow: var(--shadow-soft-dark);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
}
.dx-clay-glass {
    --bgc: rgba(255, 255, 255, 0.5);
    --bg: rgba(255, 255, 255, 0.5);
    --brdr: 1px solid color-mix(in srgb, var(--canvas) 20%, var(--light-mix) 80%);
    --clr: #34332f;
    --shadow: var(--clay-glass-shadow);
    background-color: var(--bg);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}
.dx-glass, .chip--glass {
    --bgc: rgba(255, 255, 255, 0.65);
    --bg: linear-gradient( 135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.32));
    --clr: #34332f;
    --brdr: 1px solid rgba(255, 255, 255, 0.6);
    --shadow: var(--glass-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
    backdrop-filter: url(#liquid-edge) blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    will-change: transform;
}
.dx-glass-dark {
    --bgc: rgba(255, 255, 255, 0.04);
    --bg: rgba(255, 255, 255, 0.04);
    --clr: contrast-color(var(--canvas));
    --shadow: var(--glass-dark-shadow);
    background-color: var(--bg);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    backdrop-filter: brightness(90%) blur(7px);
    will-change: transform;
}
.dx-glass-dark2 {
    --bgc: rgba(255, 255, 255, 0.11);
    --bg: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)), rgba(39, 37, 31, 0.52);
    --clr: contrast-color(var(--canvas));
    --brdr: 1px solid rgba(255, 255, 255, 0.1);
    --shadow: var(--glass-dark2-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
    backdrop-filter: blur(10px) saturate(145%);
}
.dx-glass-dark2::before {
    content: "";
    border-radius: inherit;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient( ellipse at top left, rgba(255, 255, 255, 0.25), transparent 60% );
    pointer-events: none; z-index: 1;
}
.dx-glass-dark3 {
    --bgc: rgba(255, 255, 255, 0.12);
    --bg: linear-gradient( 145deg, rgba(255, 255, 255, 0.12),rgba(255, 255, 255, 0.03)), rgba(20, 19, 16, 0.64);
    --clr: var(--light-text);
    --brdr: 1px solid rgba(255, 255, 255, 0.1);
    --shadow: var(--glass-dark3-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
    backdrop-filter: blur(5px) saturate(145%);
    -webkit-backdrop-filter: blur(5px) saturate(145%);
}
.dx-glass-frosted {
    --bgc: var(--frost-bg);
    --bg: var(--frost-bg);
    --clr: contrast-color(var(--canvas));
    --brdr: var(--frost-border);
    --shadow: var(--frost-shadow);
    background-color: var(--bg);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.dx-glass-ondark {
    --bgc: rgba(255, 255, 255, 0.03);
    --bg: rgba(255, 255, 255, 0.03);
    --clr: contrast-color(var(--canvas));
    --brdr: 1px solid rgba(255, 255, 255, 0.08);
    --shadow: var(--glass-ondark-shadow);
    background-color: var(--bg);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.dx-black {
    --wsh: var(--well-shadow-dark);
    --bgc: #141416;
    --bg: #141416;
    --clr: var(--light-text);
    --brdr: none;
    --shadow: var(--dx-black-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: none;
    box-shadow: var(--shadow);
}
.dx-black2 {
    --wsh: var(--well-shadow-dark);
    --bgc: #171717;
    --bg: linear-gradient(to bottom, #171717, #242424);
    --clr: var(--light-text);
    --brdr: 1px solid #292929;
    --shadow: var(--dx-black2-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-solid {
    --bgc: var(--accent);
    --bg: var(--accent);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--accent-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-solid-sm {
    --bgc: var(--accent);
    --bg: var(--accent);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--shadow-sm);
    background-color: var(--bgc);
    background: var(--bg);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-gradient, .dx-accent {
    --bgc: var(--accent);
    --bg: var(--accent-gradient);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--accent-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-gradient-glow, .dx-accent-glow {
    --bgc: var(--accent);
    --bg: var(--accent-gradient);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--accent-glow-shadow);
    background-color: var(--bgc);
    background: var(--bg);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-gradient-soft, .dx-accent-soft {
    --bgc: var(--accent);
    --bg: var(--accent-gradient);
    --clr: var(--on-accent);
    --shadow: var(--shadow-soft);
    --brdr: none;
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--on-accent);
    border: var(--brdr);
    box-shadow: var(--shadow);
}
.dx-accent-faded {
    --bgc: var(--accent);
    --bg: var(--accent-faded);
    --clr: var(--accent-deep);
    --shadow: var(--shadow-soft-clr);
    --brdr: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-gradient-sm,
.dx-accent-sm {
    --bgc: var(--accent);
    --bg: var(--accent-gradient);
    --clr: var(--on-accent);
    --shadow: var(--shadow-sm);
    --brdr: none;
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
    box-shadow: var(--shadow);
}

/* ================================================================================================================================================== DOCK */
.dhs-dock-wrapper { overflow: visible; display: grid; justify-content: center; }
.dhs-dock-container {
    backdrop-filter: blur(4px);
    padding: clamp(1rem, 0.7143vw + 13.71px, 1.5rem); 
    gap: clamp(1rem, 0.7143vw + 13.71px, 1.5rem);
    display: grid; overflow: visible; 
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    height: 100%; width: 100%;
    align-items: center; justify-content: center;
    overflow-x: auto; scroll-snap-type: x mandatory;
    clip-path: inset(0 0 0 0 round 24px); border-radius: 24px;
}
.dhs-dock-tile {
    display: grid; place-items: center; border-radius: var(--r-sm);
    flex: 1 0 auto; scroll-snap-align: center; padding: 1rem;
    background: var(--bg, linear-gradient(hsl(0 0% 100% / 0.15), #0000), hsl(0 0% 4%));
    box-shadow: var(--shadow, 0 -1px hsl(0 0% 0% / 0.5) inset, 0 2px 4px hsl(0 0% 0% / 0.5), 0 1px hsl(0 0% 100% / 0.5) inset;);
}
.dock--default { backdrop-filter: blur(4px); }
.dock-tile--default {
    background: linear-gradient(hsl(0 0% 100% / 0.15), #0000), hsl(0 0% 4%);
    box-shadow: 0 -1px hsl(0 0% 0% / 0.5) inset, 0 2px 4px hsl(0 0% 0% / 0.5), 0 1px hsl(0 0% 100% / 0.5) inset;
    border-radius: 8px;
}
@media screen and (max-width: 500px) { 
  .dhs-dock-wrapper { width: 100%; } 
  .dhs-dock-container { gap: 0.5rem; padding: 0.5rem; clip-path: inset(0 0 0 0 round 12px); border-radius: 12px; }
  .dhs-dock-tile { padding: 0.5rem; }
}
/* ================================================================================================================================================== CHIPS AND ICON */
.dhs-icon { 
    box-shadow: var(--shadow, var(--shadow-sm));
    background: var(--bg, var(--clay-soft));
    color: var(--clr, var(--ink-soft));
    border: var(--brdr, 1px solid var(--line-soft)); 
    border-radius: 10px; flex: none; display: grid; place-items: center;
    font-family: var(--icon-font, var(--font-logo)); font-weight: 700; 
}
.dhs-icon svg, .chip__icon svg { stroke: var(--stroke, var(--clr, var(--ink-soft))); }
.dhs-icon span, .dhs-icon p { color: var(--clr, var(--ink-soft)) !important; }
.dhs-icon-xxs {
    font-size: clamp(0.7rem, 0.1714vw + 10.65px, 0.82rem);
    width: clamp(25px, 0.9821vw + 21.86px, 36px); height: clamp(25px, 0.9821vw + 21.86px, 36px);
}
.dhs-icon-md {
    font-size: var(--dhs-text-base);
    width: clamp(2.7rem, 1.4286vw + 38.63px, 3.7rem);
    height: clamp(2.7rem, 1.4286vw + 38.63px, 3.7rem);
    border-radius: var(--r-sm); 
}
.dhs-chip, .dx-chip {
    position: absolute; z-index: 8;
    display: flex; align-items: center;
    gap: clamp(0.6rem, 0.1429vw + 10.74px, 0.8rem);
    padding: clamp(0.6rem, 0.1429vw + 9.14px, 0.7rem) clamp(0.85rem, 0.2143vw + 12.91px, 1rem);
    height: fit-content; width: fit-content;
    border-radius: var(--r-sm);
    font-size: clamp(0.65rem, 0.1429vw + 9.94px, 0.75rem); 
    letter-spacing: .03em; font-weight: 600;
    color: var(--clr, var(ink-soft));
    will-change: transform;
    transition: transform .6s var(--ease-soft);
    background: var(--bg, var(--paper));
    box-shadow: var(--shadow, var(--shadow-soft));
    border: var(--var(--brdr, 1px solid var(--line-soft)));
}
.dhs-chip-anim {
    animation: chip-float 2.8s var(--ease-soft) infinite;
}
.dhs-float-anim { animation: float-anim 2.8s var(--ease-soft) infinite; }
.chip_inline { display: inline-flex; align-items: center; letter-spacing: 0.03em; font-weight: 600; }
.chip__inner { display: flex; align-items: center; gap: 11px; padding: 0; font-size: .78rem; }
.chip-sm { padding: clamp(0.5rem, 0.1429vw + 7.54px, 0.6rem) clamp(0.75rem, 0.1429vw + 11.54px, 0.85rem); }
.chip__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); }
.dhs-chip span, .dx-chip span { 
    font-size: clamp(0.55rem, 0.1429vw + 8.34px, 0.65rem);
    color: var(--clr, var(--ink-soft)); padding-top: 0rem !important;
}
.dhs-chip b, .dx-chip b {
    font-size: clamp(0.65rem, 0.1429vw + 9.94px, 0.75rem) !important;
    font-weight: 600 !important;  letter-spacing: 0.03em !important;
    text-transform: uppercase; display: block;
}
.chip__icon, .chip-icon {
    width: clamp(25px, 0.9821vw + 21.86px, 36px); height: clamp(25px, 0.9821vw + 21.86px, 36px);
    border-radius: 10px; flex: none; display: grid; place-items: center;
    font-family: var(--font-logo); font-weight: 700; 
    font-size: clamp(0.7rem, 0.1714vw + 10.65px, 0.82rem);
}
.chip-subtitle { font-family: var(--font-sans); text-transform: none; }
.chip__pill { border-radius: var(--pill);}
.chip--lg { padding: 12px 16px; }
.dx-accent-faded svg, .dx-accent-faded svg { fill: none; stroke: var(--accent-deep); }
.dx-well-accent svg, .dx-well-acc svg { stroke: var(--accent-deep)t; }
.chip--dark .ic-box, .chip--light .ic-box, .chip--glass .ic-box { box-shadow: var(--shadow-soft-clr); }
.dx-chip .ic-box { border-radius: 12px; display: grid; place-items: center; flex: none; box-shadow: var(--shadow-soft); }
.dx-chip .ic-box-sm { width: clamp(25px, 1.4286vw + 15.43px, 36px); height: clamp(25px, 1.4286vw + 15.43px, 36px); border-radius: 10px; }
.dx-chip .ic-box-md { width: clamp(32px, 1.4286vw + 15.43px, 36px); height: clamp(32px, 1.4286vw + 15.43px, 36px); }
.ic-text { 
    --iclr1: contrast-color(var(--bg)); --iclr: color-mix(in srgb, var(--iclr1), transparent 20%);
    display: grid; align-items: center; justify-content: center; color: var(--iclr, var(--ink-soft)); 
}
.dhs-expand-icon {
    display: grid; place-items: center; flex: none; position: relative; transition: all var(--dur) var(--ease);
    border-radius: 50%; width: clamp(1.8rem, 1vw + 25.6px, 2.5rem); height: clamp(1.8rem, 1vw + 25.6px, 2.5rem);
    background: var(--bg, var(--well));
    color: var(--clr, var(--well-ink));
    border: var(--brdr, var(--well-border));
    box-shadow: var(--shadow, var(--well-shadow));
    font-family: var(--font-mono);
}
.dhs-expand-icon-sm { width: clamp(1.2rem, 1vw + 16px, 1.9rem); height: clamp(1.2rem, 1vw + 16px, 1.9rem); }
.dhs-symbol-text { font-weight: bolder; font-family: var(--font-logo); font-size: var(--dhs-text-base); letter-spacing: var(--tracking-3); }

.svg-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
@media screen and (max-width: 499px) { .dhs-icon, .dx-chip .ic-box-sm, .dhs-icon .ic-box-sm { border-radius: 7px; } }

/* ================================================================================================================================================== TEXT DECOR */
.dhs-accent-underline, .accent-underline { border-bottom: 1px solid var(--accent); width: fit-content; }
.text-underline { text-decoration: underline; text-underline-offset: 3px; }
.dx-text-link {
    display: inline-flex; align-items: center; gap: 13px;
    color: var(--clr, var(--ink)); font-size: .86rem; font-weight: 600;
}
/* ================================================================================================================================================== RANGE SLIDER */
.dhs-range-track, .dhs-range-track-well, .dhs-range-track-well2, .dhs-range-track-well3,
.dhs-range-track-well4, .dhs-range-track-well5, .dhs-range-track-well-dark,
.dhs-range-track2, .dhs-range-track3 {
    height: 0.9rem; 
    background: var(--wbg, var(--well));
    box-shadow: var(--wsh, var(--well-shadow));
    border-radius: var(--pill); 
    border: var(--wbr, var(--well-border));
    overflow: hidden;
}
.dhs-range-track-well { box-shadow: var(--wsh, var(--well-shadow)); }
.dhs-range-track-well2 { box-shadow: var(--wsh, var(--well-shadow2)); }
.dhs-range-track-well3 { box-shadow: var(--wsh, var(--well-shadow3)); }
.dhs-range-track-well4 { box-shadow: var(--wsh, var(--well-shadow4)); }
.dhs-range-track-well5 { box-shadow: var(--wsh, var(--well-shadow5)); }
.dhs-range-track-well-dark { box-shadow: var(--wsh, var(--well-shadow-dark)); }
.dhs-range-track2 { background: rgba(0,0,0,.3); box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.dhs-range-track3 { background: var(--well-bg, var(--well)); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
/* ================================================================================================================================================== PULSE DOTS */
.pulse-dot, .dhs-pulse {
    display: inline-block; margin-right: 10px;
    width: 8px; height: 8px; border-radius: 50%;
    position: relative; background: var(--pulse-ink, var(--pulse-clr, var(--dot-bg, var(--accent-gradient-deep))));
}
.pulse-dot::after, .dhs-pulse::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; 
    border: 2px solid var(--pulse-ink, var(--pulse-clr, var(--accent-ink))); 
    opacity: 0.4; animation: dxPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite
}
.pulse-static {
    --pulse-wash: color-mix(in srgb,var(--pulse-clr, var(--accent-ink)) 10%,transparent);
    width: 6px; height: 6px; border-radius: 50%; background; var(--pulse-clr, var(--accent-ink));
    box-shadow: 0 0 0 5px var(--pulse-wash);
}

/* ================================================================================================================================================== CHIP */
.dhs-chip span, .dx-chip span {  color: color-mix(in oklch, var(--clr, var(--ink)) 90%, transparent); }
.dhs-chip b, .dx-chip b { color: var(--clr); }

.ic span { font-size: 11px; color: var(--muted); text-align: center; font-family: var(--font-mono);}

/* ================================================================================================================================================== BADGE */
.dhs-badge { 
    --default-bg: var(--bg, var(--accent-gradient, var(--copper-gradient)));
    color: var(--clr);
    background: var(--bg, var(--default-bg)); 
    font-family: var(--font-logo);
    border-radius: var(--pill); width: fit-content; 
    font-size: clamp(0.65rem, 0.2143vw + 9.71px, 0.8rem);
    padding: 0.5rem clamp(0.75rem, 0.3571vw + 10.86px, 1rem);
    margin-bottom: clamp(0.75rem, 1.0714vw + 8.57px, 1.5rem);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.dhs-badge-sm { 
    display: flex;
    align-items: center;
    font-size: var(--dhs-text-xs);
    width: fit-content; border-radius: var(--pill); 
    font-family: var(--font-logo); font-weight: 600;
    white-space: nowrap; 
    padding: 0.3rem clamp(0.5rem, 0.3571vw + 10.86px, 0.7rem); align-items: center;
}
.dhs-badge.dx-well { color: var(--muted); }
.dhs-mini-badge, .dhs-badge-mini {
    width: fit-content; font-family: var(--font-logo);
    border-radius: 12px; font-weight: 600; white-space: nowrap;
    padding: 0.35rem clamp(0.5rem, 0.3571vw + 10.86px, 0.7rem); 
    align-items: center; font-size: clamp(0.75rem, 0.2143vw + 10.71px, 0.98rem);
}
.dhs-mini-badge span, .dhs-badge-mini span { margin 0, padding 0; line-height: 1; }

.dhs-card-eyebrow-logo, .dhs-card-eyebrow, .micro-label { 
    font-family: var(--font-logo); 
    font-size: var(--dhs-text-xs); 
    font-weight: 700; 
    letter-spacing: var(--tracking-5); 
    color: var(--muted-clr, var(--muted));
}

.top-badge, .dhs-card-badge {
    padding: 0.25rem 0.45rem;
    border-radius: var(--pill);
    font-weight: 700; 
    display: flex; font-family: var(--font-logo);
    letter-spacing: var(--tracking-3);
    font-size: var(--dhs-text-mini);
}
.dhs-card-badge { padding: 0.25rem 0.5rem; }

.dhs-icon.dx-copper, .dhs-badge.dx-copper  { 
    --shadow: 0 1px 0 rgba(255, 220, 180, .35) inset, 0 3px 6px -2px rgba(164, 72, 11, .5);
    box-shadow: 0 1px 0 rgba(255, 220, 180, .35) inset, 0 3px 6px -2px rgba(164, 72, 11, .5); 
}

/* ================================================================================================================================================== BUTTONS */
.button--close.drawer__close {
    background: var(--paper);
    color: var(--ink-soft) !important;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
}

.dhs-hero__cta, .btn-group { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.dhs-btn {
    display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
    font-family: var(--font-sans); text-transform: uppercase;
    font-size: var(--dhs-text-xs);
    letter-spacing: var(--tracking-btn);
    padding: clamp(10px, 0.2679vw + 9.14px, 13px) clamp(18px, 0.5357vw + 16.29px, 24px);
    border-radius: var(--radius, var(--pill)); 
    font-weight: 600;
    background: var(--bg, linear-gradient(to bottom, #171717, #242424));
    color: var(--clr, var(--light-text));
    border: var(--brdr, 1px solid #292929);
    box-shadow: var(--shadow, 0 2px 4px rgba(0, 0, 0, 1), 0 10px 20px rgba(0, 0, 0, 0.4));
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dhs-btn-md {
    gap: 8px; font-size: var(--dhs-text-xs); letter-spacing: var(--tracking-3);
    padding: clamp(10px, 0.2679vw + 9.14px, 13px) clamp(14px, 0.3571vw + 12.86px, 18px);
}
.dhs-btn-sm {
    gap: 5px; font-size: var(--dhs-text-xxs); letter-spacing: var(--tracking-3);
    padding: clamp(6px, 0.3571vw + 4.86px, 10px) clamp(14px, 0.3571vw + 12.86px, 18px);
}
.button--primary { 
    background: var(--bg, var(--clay-deep,)); 
    color: var(--clr, var(--light-text));
    box-shadow: var(--shadow, var(--accent-shadow, var(--copper-shadow, var(--def-shadow)))); 
    border-radius: var(--radius, var(--pill));
    border: var(--brdr, none);
    white-space: nowrap;
}
.button--secondary {
    --bg: var(--clay-deep);
    --clr: var(--light-text);
    --shadow: var(--shadow-clay);
    --brdr: none;
    box-shadow: var(--shadow, var(--shadow-soft)); 
    background: var(--bg, var(--paper));
    color: var(--clr, var(--ink-soft));
    border: var(--brdr, none);
    border-radius: var(--radius, var(--pill));
    white-space: nowrap;
}
.btn--has-arrow { 
    padding: clamp(0.75rem, 0.1429vw + 11.54px, 0.85rem) clamp(1rem, 0.7143vw + 13.71px, 1.5rem); 
    padding-left: clamp(1.5rem, 0.7143vw + 21.71px, 2rem); gap: 10px;
}

.btn-muted { --bg: transparent; background: transparent; border: 1px solid var(--line-soft); }
.dhs-btn .dhs-arrow, .dhs-btn .arrow { background: color-mix(in srgb,var(--clr) 10%,transparent); box-shadow: var(--well-shadow); }
.dhs-btn.dx-ghost .dhs-arrow, .dhs-btn .dx-clay-soft .dhs-arrow, .dhs-btn .btn-soft .dhs-arrow, .dhs-btn .btn-light .dhs-arrow { background: var(--well); }
.dhs-btn.dx-accent .dhs-arrow { background: color-mix(in srgb,var(--accent) 10%,transparent); }
.dhs-btn.dx-copper .dhs-arrow { background: rgba(255, 255, 255, 0.18); }
.dhs-btn.dx-ghost .dhs-arrow, .dhs-btn.dx-clay .dhs-arrow, 

.dhs-btn-sm .dhs-arrow { width: 15px; height: 15px; border-radius: 50%; }
.dhs-btn-xs .dhs-arrow { width: 12px; height: 12px; border-radius: 50%; }
.dhs-btn svg { width: 15px; height: 15px; transition: transform .25s; }
.dhs-btn-sm svg { width: 10px; height: 10px; }
.dhs-btn-xs svg { width: 7px; height: 7px; }

.dhs-btn:after { border: var(--brdr, none) !important; }
.button:after, .button--primary:after, .button--secondary:after {
    border-radius: var(--radius, var(--pill));
    border: var(--brdr, none);
    border-radius: var(--radius, var(--pill));
}

/* ================================================================================================================================================== HOVER */
.btn-muted:hover { border-color: var(--accent, var(--ink)); color: var(--accent, var(--ink)); }
.dhs-btn:hover { transform: translateY(-2px); }
.dhs-btn.dx-accent:hover, .dhs-btn.btn-accent:hover, .dhs-btn.dx-accent-gradient { box-shadow: var(--accent-glow-shadow); }
.dhs-btn:hover svg { transform: rotate(-35deg); }

/* ================================================================================================================================================== ACTIVE */
.dhs-btn:active { box-shadow: var(--well-shadow-dark2); }

/* ================================================================================================================================================== CARDS */
.dhs-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 2rem;
    border: var(--brdr, 1px solid var(--line-soft));
    border-radius: var(--radius, var(--r-card));
    background: var(--bg, var(--paper));
    color: var(--clr, var(--ink-soft));
    box-shadow: var(--shadow, var(--shadow-card));
    transition:  background var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), transform var(--dur) var(--ease);
}
.dhs-card:has(>.dhs-card-inner) { padding: 2rem 2rem; }
.dhs-card-inner {
    width: 100%;
    height: 100%;
    display: grid;
    justify-items: center;
    align-content: center;
    align-items: center;
    text-align: center;
    border-radius: var(--radius, inherit);
}
.card--default {
    --bg: var(--paper); 
    --clr: var(--ink-soft);
    --shadow: var(--shadow-card);
    --brdr: 1px solid var(--line-soft);
    background: var(--paper);
    color: var(--ink-soft);
    box-shadow: var(--shadow-card); 
    border: 1px solid var(--line-soft);
    border-radius: var(--r-card);
    transition: background var(--dur) var(--ease-soft), box-shadow var(--dur) var(--ease-soft), transform var(--dur) var(--ease);
}

/* ================================================================================================================================================== IMAGES */
.img-shadow { box-shadow: var(--img-shadow); }

/* ============================================================================================================== RADIUS */
.r-xxs { border-radius: var(--r-xxs); }
.r-xs { border-radius: var(--r-xs); }
.r-sm { border-radius: var(--r-sm); }
.r-md { border-radius: var(--r-md); }
.r-lg { border-radius: var(--r-lg); }
.r-xl { border-radius: var(--r-xl); }
.r-card { border-radius: var(--r-card); }
.pill { border-radius: var(--pill); }
.circle { border-radius: var(--r-circle); }

/* ============================================================================================================== SHADOWS */
.shadow-clay, .clay-shadow { box-shadow: var(--shadow-clay); }
.shadow-well, .well-shadow { box-shadow: var(--well-shadow); }
.shadow-soft, .soft-shadow { box-shadow: var(--shadow-soft); }
.shadow-soft-clr, .soft-shadow-clr { box-shadow: var(--shadow-soft-clr); }
.shadow-deboss, .deboss{ box-shadow: var(--shadow-deboss); }
.shadow-deboss-dark, .deboss-dark{ box-shadow: var(--shadow-deboss-dark); }
.shadow-deboss-dark2, .deboss-dark2{ box-shadow: var(--shadow-deboss-dark2); }