/** Shopify CDN: Minification failed

Line 1610:59 Expected ":"
Line 1610:61 Expected identifier but found "var("
Line 1678:51 Expected ":"
Line 1903:61 Expected identifier but found "#007078"

**/
:root, [data-theme="light"] {
    --well-border: 1px solid rgba(0, 0, 0, 0.05);
    --frost-border: 1px solid rgba(255, 255, 255, 0.45);
    --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%);

    --liquid-glass-border: border: 1px solid rgba(255,255,255,.1);
    --liquid-glass-bg: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.08)), var(--glass);
    --liquid-glass-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.08), 0 24px 60px rgba(12,12,14,.18);
    --liquid-glass: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.08)), rgba(245, 244, 240, .5);
}

[data-theme="dark"], .dhs--dark-theme {
    --well-border: 1px solid rgba(255, 255, 255, 0.05);
    --frost-border: 1px solid rgba(255, 255, 255, 0.15);
    --liquid-glass-border: border: 1px solid rgba(255,255,255,.1);
    --liquid-glass-bg: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.02)), var(--glass);
    --liquid-glass-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 28px 70px rgba(0,0,0,.48);
    --liquid-glass: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.02)), rgba(39, 37, 31, .52);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --frost-border: 1px solid rgba(255, 255, 255, 0.15); 
        --well-border: 1px solid rgba(255, 255, 255, 0.05);
        --liquid-glass-border: border: 1px solid rgba(255,255,255,.1);
        --liquid-glass-bg: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.02)), var(--glass);
        --liquid-glass-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 28px 70px rgba(0,0,0,.48);
        --liquid-glass: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.02)), rgba(39, 37, 31, .52);
    }
}

/* ================================================================================================================================================== 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); }

/* =================================================================================================================================================== 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);
}
.hero__grid {
    display: block !important; position: absolute; inset: 0; opacity: 0.5;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: clamp(48px, 5vw, 72px) clamp(48px, 5vw, 72px);
    -webkit-mask-image: radial-gradient(75% 75% at 60% 45%, #000 30%, transparent 80%);
    mask-image: radial-gradient(75% 75% at 60% 45%, #000 30%, transparent 80%);
}
[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; }
}

@media (prefers-color-scheme: dark) { section { --accent-glow-shadow: var(--accent-glow-shadow-d); --accent-ink: var(--ac); } }
[data-theme="dark"] section, .dhs--dark-theme section { --accent-glow-shadow: var(--accent-glow-shadow-d); --accent-ink: var(--ac); }

blockquote, .heading, h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: var(--font-heading-letter-spacing);
  line-height: var(--font-heading-line-height);
  text-transform: var(--font-heading-text-transform);
  /* word-break: break-word; */
}

em { color: var(--em-color, var(--acc, var(--accent-ink, var(--clr, var(--ink-soft))))); font-weight: 600; }
body { --color-foreground: var(--clr, var(--ink)); }
/* =================================================================================================================================================== WATERMARK */

.dx-clean-grad {
    --bg: var(--clean-grad); --clr: var(--dark-text);
    --arrow-bg: color-mix(in srgb, transparent 80%, black);
    color: var(--clr);
    background: var(--clean-grad);
}
.dx-fol-grad {
    --bg: var(--fol-grad); --clr: var(--dark-text);
    --arrow-bg: color-mix(in srgb, transparent 80%, black);
    color: var(--clr);
    background: var(--fol-grad);
}
.dx-canvas {
   --bgc: var(--canvas);
   --bg: var(--canvas);
   --clr: contrast-color(var(--canvas));
   --shadow: var(--shadow-soft-clr);
   --brdr: 1px solid var(--line-soft);
   --ink-softer-clr: var(--ink-soft);
   background-color: var(--bgc);
   background: var(--bg);
   color: var(--clr);
   border: var(--brdr);
   box-shadow: var(--shadow);
}
.dx-paper, .dx-paper-card {
   --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,
.dx-ghost-sm, .dx-soft-sm {
    --bgc: var(--paper);
    --bg: var(--paper);
    --clr: var(--ink-soft);
    --brdr: 1px solid var(--line-soft);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
}
.dx-paper-soft, .dx-ghost, .dx-soft, .chip--light { --shadow: var(--shadow-soft); box-shadow: var(--shadow); }
.dx-ghost-sm, .dx-soft-sm { --shadow: var(--shadow-soft-sm); box-shadow: var(--shadow);}
.dx-soft-dark, .dx-soft-dark-sm {
    --wsh: var(--well-shadow-dark);
    --bgc: var(--paper-dark);
    --bg: var(--paper-dark);
    --clr: var(--ink-soft-dark);
    --color-foreground: var(--ink-soft-dark);
    --muted: var(--muted-dark); 
    --ink: var(--light-text);
    --ink-soft: var(--ink-soft-dark); --ink-softer: var(--ink-softer-dark); --ink-softest: var(--ink-softest-dark);
    --acc: var(--accent);
    --brdr: 1px solid var(--line-soft-dark);
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    border: var(--brdr);
}
.dx-soft-dark { --shadow: var(--shadow-soft-dark); box-shadow: var(--shadow);}
.dx-soft-dark-sm { --shadow: var(--shadow-soft-dark-sm); 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);
    --color-foreground: var(--light-text);
    --muted: var(--muted-dark); 
    --ink: var(--light-text);
    --ink-soft: var(--ink-soft-dark); --ink-softer: var(--ink-softer-dark); --ink-softest: var(--ink-softest-dark);
    --acc: var(--accent);
    --brdr: none;
    --shadow: var(--shadow-clay);
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    --color-foreground: var(--light-text);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    border: none;
}
.dx-clay-dark {
    --wsh: var(--well-shadow-dark);
    --bgc: var(--clay-deep-clr1);
    --bg: var(--clay-dark); 
    --clr: var(--light-text);
    --color-foreground: var(--light-text);
    --muted: var(--muted-dark); 
    --ink: var(--light-text); 
    --ink-soft: var(--ink-soft-dark); --ink-softer: var(--ink-softer-dark); --ink-softest: var(--ink-softest-dark);
    --brdr: none; 
    --shadow: var(--shadow-clay-dark);
    --acc: var(--accent); 
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    border: none;
    background: var(--clay-dark);
    color: var(--clr);
    box-shadow: var(--shadow-clay-dark);
}
.dx-clay-dark2 {
    --color-foreground: var(--cream-fixed);
    --clr: var(--cream-fixed);
    --muted: var(--muted-dark); 
    --ink: var(--cream-fixed);
    --ink-soft: var(--ink-soft-dark); --ink-softer: var(--ink-softer-dark); --ink-softest: var(--ink-softest-dark);
    --brdr: border: 1px solid rgba(255,255,255,.08);
    --bg: linear-gradient(155deg, #34312d 0%, #171613 48%, #090909 100%);
    --shadow: var(--shadow-clay);
    color: var(--cream-fixed);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(155deg, #34312d 0%, #171613 48%, #090909 100%);
    box-shadow: var(--shadow-clay);
}
.dx-dark-matte {
    --clr: var(--light-text);
    --color-foreground: var(--light-text);
    --muted: var(--muted-dark); 
    --ink: var(--light-text);
    --ink-soft: var(--ink-soft-dark); --ink-softer: var(--ink-softer-dark); --ink-softest: var(--ink-softest-dark);
    background-image: linear-gradient(to top, #262626 0, #333333 100%);
    box-shadow: 1px 1px 2px -2px rgba(255, 255, 255, 0.8) inset,
    -1px -1px 2px -2px rgba(255, 255, 255, 0.3) inset,
    1px 1px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border: none;
}
.dx-clay-copper {
    color: #fbf7f1;
    border: 1px solid rgba(255,225,195,.34);
    background: linear-gradient(180deg, #d9701f 0%, #a4480b 100%);
    box-shadow: inset 0 1px 0 rgba(255,232,208,.45), inset 0 -3px 8px rgba(90,31,0,.45), 0 22px 46px -18px rgba(159,63,8,.72);
}
.dx-clay-copper-no-brdr { border: none; }
.dx-clay-accent, .dx-clay-accent-no-brdr {
    --acs: var(--ac, var(--acc, var(--accent)));
    --gr-l: oklch(from var(--acc) calc(l + 0.03) c h);
    --gr-d1: color-mix(in srgb, var(--acs) 90%, #000);
    --gr-d: oklch(from var(--gr-d1) calc(l - 0.09) c h);
    --sh11: color-mix(in srgb, var(--acs) 15%, #fff);
    --sh12: color-mix(in srgb, var(--sh11) 60%, transparent);
    --sh21: color-mix(in srgb, var(--acs) 40%, #000000);
    --sh22: color-mix(in srgb, var(--sh21) 45%, transparent);
    --sh31: color-mix(in oklch, var(--acs) 80%, #000000);
    --sh32: color-mix(in srgb, var(--sh31) 75%, transparent);
    --cl1: color-mix(in srgb, #000 15%, var(--acs));
    --cl2: contrast-color(var(--cl1));
    --cl: color-mix(in srgb, var(--cl2) 90%, var(--acs));
    background: linear-gradient(180deg, var(--gr-l) 0%, var(--gr-d) 100%);
    box-shadow: inset 0 1px 0 var(--sh12), inset 0 -3px 8px var(--sh22), 0 22px 46px -18px var(--sh32); 
    color: var(--cl);
}
.dx-clay-accent-no-brdr { border: none; }
.dx-clay-accent {
    --acs: var(--ac, var(--acc, var(--accent)));
    --brd1: color-mix(in srgb, var(--acs) 25%, #fff);
    --brd: color-mix(in srgb, var(--brd1) 40%, transparent);
    border: 1px solid var(--brd);
}
.dx-clay-theme-contrast {
    --bg: var(--theme-contrast-clay);
    --bgc: var(--theme-clay-bg);
    --clr: var(--theme-contrast-clr);
    --box-shadow: var(--theme-contrast-shadow);
    --brdr: none;
    background: var(--theme-contrast-clay);
    color: var(--theme-contrast-clr);
    box-shadow: var(--theme-contrast-shadow);
    border: none;
}
.dx-grey-theme-contrast {
    --bg: var(--theme-contrast-grey);
    --bgc: #2b2e34;
    --clr: var(--theme-contrast-grey-clr);
    --box-shadow: var(--theme-contrast-shadow);
    --brdr: none;
    background: var(--theme-contrast-grey);
    color: var(--theme-contrast-grey-clr) !important; 
    box-shadow: var(--theme-contrast-shadow);
    border: none;
}
.dx-soft-grey, .dx-grey-soft {
    --clr1: #333;
    --bg: var(--grey-gradient);
    --bgc: #3a3a3a;
    --clr: var(--light-text);
    --muted: color-mix(in srgb, var(--light-text) 70%, transparent);
    --acc: var(--accent);
    --shadow: var(--shadow-soft-clr);
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    background: var(--grey-gradient);
    color: var(--clr, var(--light-text)) !important;
    box-shadow: var(--shadow-soft-clr);
}
.dx-grey {
    --clr1: #333;
    --bg: var(--grey-gradient);
    --bgc: #3a3a3a;
    --clr: var(--light-text);
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    --acc: var(--accent);
    --muted: color-mix(in srgb, var(--light-text) 70%, transparent);
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    background: var(--grey-gradient);
    color: var(--light-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.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 {
    --wsh: var(--well-shadow-dark);
    --ws: var(--well-shadow-dark);
    --bgc: #2a2823;
    --bg: var(--clay-soft-dark);
    --clr: var(--ink-soft-dark);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    --shadow: var(--shadow-soft-dark);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
}
.liquid-glass, .dx-liquid-glass {
    border: var(--liquid-glass-border);
    background: var(--liquid-glass-bg);
    box-shadow: var(--liquid-glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}
.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: color-mix(in srgb, var(--ink) 60%, transparent);
    --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;
}
[data-theme="dark"] .dx-glass, 
[data-theme="dark"] .chip--glass, 
[data-theme="dark"] .dx-liquid-glass, 
.dhs--dark-theme .dx-glass, 
.dhs--dark-theme .chip--glass, 
.dhs--dark-theme .dx-liquid-glass {
  --bg: var(--liquid-glass);
  --brdr: var(--liquid-glass-border);
  --shadow: var(--liquid-glass-shadow);
  border: var(--liquid-glass-border);
  background: var(--liquid-glass);
  box-shadow: var(--liquid-glass-shadow);
}
.dx-glass-dark {
    --wsh: var(--well-shadow-dark);
    --bgc: rgba(255, 255, 255, 0.04);
    --bg: rgba(255, 255, 255, 0.04);
    --clr: contrast-color(var(--bgc, var(--bg, var(--canvas))));
    --muted: color-mix(in srgb, var(--clr) 90%, transparent);
    --shadow: var(--glass-dark-shadow);
    --color-foreground: var(--clr);
    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 {
    --wsh: var(--well-shadow-dark);
    --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);
    --color-foreground: var(--clr);
    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);
    --color-foreground: var(--clr);
    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-dark-glass {
    --bg: rgba(255, 255, 255, 0.03);
    --clr: var(--light-text); 
    --brdr: 1px solid rgba(255, 255, 255, 0.08);
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --acc: var(--accent-ink);
    --muted: var(--muted);
    --line-clr: var(--line-dark);
    --line-soft-clr: var(--line-soft-dark);
    --text-em: var(--text-emb-ondark); --text-de: var(--text-deb-ondark);
    color: var(--light-text) !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dx-dark-glass2 {
    --bg: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), rgba(20, 19, 16, .64);
    --clr: var(--light-text);
    --brdr: 1px solid rgba(255,255,255,.1);
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 24px 60px rgba(12, 12, 14, .18);
    --acc: var(--accent-ink-light); --muted: var(--muted-dark); 
    --line-clr: var(--line-dark);
    --line-soft-clr: var(--line-soft-dark);
    --wbrdr: var(--well-border-dark);
    --wclr: var(--light-text); 
    --well-sh: var(--well-shadow-dark);
    --text-em: var(--text-emb-ondark); --text-de: var(--text-deb-ondark);
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), rgba(20, 19, 16, .64);
    color: var(--light-text);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 24px 60px rgba(12, 12, 14, .18);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}
.dx-dark-glass3 {
    background: linear-gradient(180deg, #292929aa 0%, #191919cc 50%);
    backdrop-filter: blur(4px);
    box-shadow: inset 0 -2px 2px 0 #0003;
    color: #ccc;
    text-shadow: 1px 1px 3px #333a;
}
.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);
    --color-foreground: var(--clr);
    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);
    --color-foreground: var(--clr);
    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);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    --brdr: none;
    --shadow: var(--dx-black-shadow);
    --color-foreground: var(--clr);
    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);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    --brdr: 1px solid #292929;
    --shadow: var(--dx-black2-shadow);
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    --color-foreground: var(--clr);
    background-color: var(--bgc);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-charcoal, .dx-charcoal2 {
    --bgc: #333;
    --shadow: var(--shadow-soft-dark);
    --clr: #efefef;
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    --text-em: var(--text-emb-ondark); 
    --text-de: var(--text-deb-ondark);
    --color-foreground: var(--clr);
    color: #efefef;
    box-shadow: var(--shadow-soft-dark);
}
.dx-charcoal {
    --bg: var(--charcoal-gradient);
    background: var(--charcoal-gradient);
}
.dx-charcoal2 {
    --bg: var(--charcoal-gradient2);
    background: var(--charcoal-gradient2);
}
.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-gradient2);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--accent-shadow);
    color: var(--on-accent);
    background-color: var(--bgc);
    background: var(--bg);
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-gradient2, .dx-accent2 {
    --bgc: var(--accent);
    --bg: var(--accent-gradient2);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--accent-shadow);
    color: var(--on-accent);
    background-color: var(--bgc);
    background: var(--b, var(--accent-gradient));
    box-shadow: var(--shadow);
    border: var(--brdr);
}
.dx-accent-gradient-glow, .dx-accent-glow {
    --bgc: var(--accent);
    --bg: var(--accent-gradient2);
    --clr: var(--on-accent);
    --brdr: none;
    --shadow: var(--accent-glow-shadow);
    color: var(--on-accent);
    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-gradient2);
    --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-faded2 {
  --ac-faded: color-mix(in srgb,var(--accent) 16%,transparent);
  --ac-ink:color-mix(in srgb,var(--accent),#1c1b1b 20%);
  background: var(--ac-faded);
  color: var(--ac-ink);
  font-weight: 600;
  box-shadow: var(--well-shadow);
}
.dx-accent-gradient-sm,
.dx-accent-sm {
    --bgc: var(--accent);
    --bg: var(--accent-gradient2);
    --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);
}
.dx-outline {
    --shadow: none !important;
    --brdr: 1px solid var(--line-soft);
    --bg: transparent;
    --clr: var(--ink-soft);
    border: var(--brdr);
    background: transparent;
    color: var(--ink-soft);
    box-shadow: none !important;
}
.dx-sale-badge {
    border: var(--brdr, var(--none));
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 500;
    padding: .3rem .7rem;
    border-radius: var(--radius, var(--pill));
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.dx-sale-color {
    --bgc: var(--sale-color);
    --bg: var(--sale-gradient);
    --brdr: none;
    --clr: contrast-color(var(--sale-color));
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: none;
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
}
.dx-sale-glass {
    --bgc: var(--sale-color);
    --bg: color-mix(in srgb, var(--sale-color), transparent 50%);
    --brdr: 1px solid color-mix(in srgb, var(--sale-color) 20%, var(--light-mix) 80%);
    --clr: contrast-color(var(--sale-color));
    --shadow: 
       0 8px 32px 0 rgba(75, 53, 53, 0.05), 
       inset 1px 1px 2px rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: var(--brdr);
    background: var(--bg);
    color: var(--clr);
    box-shadow: var(--shadow);
    text-shadow: -0.5px -0.5px 0.5px rgba(255, 255, 255, 0.9), 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.3);
}
.dp-hb-wash {
    background: radial-gradient(90% 140% at 0% 0%, var(--dp-hb-faded), transparent 60%), var(--paper-high);
    border: 1.5px solid color-mix(in srgb, var(--hydrabase) 50%, transparent);
    box-shadow:var(--shadow-soft);
}
.dp-cx-wash {
    background: radial-gradient(90% 140% at 0% 0%, var(--dp-cx-faded), transparent 60%), var(--paper-high);
    border: 1.5px solid color-mix(in srgb, var(--curexema) 50%, transparent);
    box-shadow:var(--shadow-soft);
}
.dp-mm-wash {
    background: radial-gradient(90% 140% at 0% 0%, var(--dp-mm-faded), transparent 60%), var(--paper-high);
    border: 1.5px solid color-mix(in srgb, var(--mediment) 50%, transparent);
    box-shadow:var(--shadow-soft);
}
.dp-cm-wash {
    background: radial-gradient(90% 140% at 0% 0%, var(--dp-cm-faded), transparent 60%), var(--paper-high);
    border: 1.5px solid color-mix(in srgb, var(--cremedify) 50%, transparent);
    box-shadow:var(--shadow-soft);
}
.dp-fh-wash {
    background: radial-gradient(90% 140% at 0% 0%, var(--dp-fh-faded), transparent 60%), var(--paper-high);
    border: 1.5px solid color-mix(in srgb, var(--firsthand) 50%, transparent);
    box-shadow:var(--shadow-soft);
}

/* =================================================================================================================================================== 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);
    --bg: var(--well);
    --clr: var(--ink-soft);
    --shadow: var(--well-shadow);
    --brdr: 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); 
    --wbg2: color-mix(in srgb, var(--well) 90%, var(--ink) 10%);
    --brdr-c: color-mix(in srgb, var(--wc) 10%, transparent 90%); 
    --wsh: var(--well-shadow2);
    --bg: var(--wbg, var(--wbg2, var(--well))); 
    --clr: var(--wc2, var(--wc)); 
    --brdr: 1px solid var(--wbrdr-c, var(--brdr-c)); 
    --shadow: var(--well-shadow2);
    background: var(--wbg, var(--wbg2, 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); 
    --wbg2: color-mix(in srgb, var(--well) 90%, var(--ink) 10%);
    --brdr-c: color-mix(in srgb, var(--wc) 10%, transparent 90%); 
    --wsh: var(--well-shadow3);
    --shadow: var(--well-shadow3);
    --clr: var(--wc2, var(--wc)); 
    --bg: var(--wbg, var(--wbg2, var(--well))); 
    --brdr: 1px solid var(--wbrdr-c, var(--brdr-c)); 
    background: var(--wbg, var(--wbg2, 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(--ink) 10%);
    --wsh: var(--well-shadow4);
    --bg: var(--wbg, var(--wbg2, var(--well))); 
    --clr: var(--wc2, var(--wc)); 
    --brdr: 1px solid var(--wbrdr-c, var(--brdr-c)); 
    background: var(--wbg, var(--wbg2, var(--well)));
    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(--ink) 10%);
    --wsh: var(--well-shadow5);
    --bg: var(--wbg, var(--wbg2, var(--well))); 
    --clr: var(--wc2, var(--wc)); 
    --brdr: 1px solid var(--wbrdr-c, var(--brdr-c)); 
    --shadow: var(--well-shadow5);
    background: var(--wbg, var(--wbg2, var(--well)));
    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);
    --bg: var(--wbg, var(--well));
    --brdr: 1px solid color-mix(in srgb, var(--ink-soft) 10%, transparent 90%);
    --shadow: var(--well-shadow-dark);
    --clr: contrast-color(var(--bg, var(--well)));
    border: 1px solid color-mix(in srgb, var(--ink-soft) 10%, transparent 90%);
    box-shadow: var(--well-shadow-dark);
    background: var(--wbg, var(--well));
}
.dx-well-sl {
    --wsh: var(--well-shadow-light);
    --shadow: var(--well-shadow-light);
    --brdr: 1px solid color-mix(in srgb, var(--ink-soft) 10%, transparent 90%);
    --bg: var(--wbg, var(--well));
    --clr: contrast-color(var(--bg, var(--well)));
    border: 1px solid color-mix(in srgb, var(--ink-soft) 10%, transparent 90%);
    box-shadow: var(--well-shadow-light);
    background: var(--bg);
    color: var(--clr);
}
.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-gradient2);
    font-weight: bold;
    letter-spacing: var(--spacing, var(--tracking, 0.05em));
    background: var(--accent-gradient2);
    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-faded, .dx-well-accent-faded, .dx-well-accent-faded-sd, .dx-well-accent-faded-sl, .dx-well-accent-faded50 {
    --wclr1: contrast-color(var(--accent));
    --wclr: color-mix(in srgb, var(--accent) 10%, var(--wclr1) 90%);
    --wbr: 1px solid color-mix(in srgb, var(--wclr1) 10%, transparent 90%);
    --wcl: var(--wclr);
    --wbg: var(--accent-faded);
    background: var(--wbg);
    color: var(--wclr);
    border: 1px solid color-mix(in srgb, var(--wclr1) 10%, transparent 90%);
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-accent-faded {
    --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);
    box-shadow: var(--wsh, var(--well-shadow));
}
.dx-well-accent-faded50 {
    --wbg: var(--accent-faded50);
    background: var(--wbg);
}
.dx-well-accent-faded50-sl {
    --wbg: var(--accent-faded50);
    background: var(--wbg);
    box-shadow: var(--well-shadow-light);
}
.dx-well-accent-faded50-sd {
    --wbg: var(--accent-faded50);
    background: var(--wbg);
    box-shadow: var(--well-shadow-dark);
}
.dx-well-accent-faded-sl {
    --wsh: var(--well-shadow-light);
    box-shadow: var(--well-shadow-light);
}
.dx-well-accent-faded-sd {
    --wsh: var(--well-shadow-dark);
    box-shadow: var(--well-shadow-dark);
}
.dx-well-dark-theme {
    --wbg: #0d0c0a; --bg: #0d0c0a;
    --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%);
    --shadow: var(--well-shadow-dark);
    --brdr: 1px solid color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    --clr: var(--wc2); 
    --muted: var(--muted-dark); 
    --ink: var(--clr); --ink-soft: var(--ink-soft-dark); --ink-softer: var(--ink-softer-dark); --ink-softest: var(--ink-softest-dark);
    background: #0d0c0a;
    box-shadow: var(--well-shadow-dark);
    border: 1px solid color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    color: var(--wc2);
}
.dx-well-light-ondark {
    --wbg: #dcd9d1;; 
    --wclr: #131210;
    --wbrdr: 1px solid rgba(0, 0, 0, 0.05);; 
    --shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --muted: color-mix(in srgb, #131210 70%, transparent);
    --clr: #131210;
    --ink: #131210;
    --ink-soft: var(--ink-soft-light);
    --ink-softer: var(--ink-softer-light);
    --ink-softest: var(--ink-softest-light);
    --acc: var(--accent-ink-onlight);
    --bg: #dcd9d1;
    --brdr: 1px solid rgba(0, 0, 0, 0.05);
    background: #dcd9d1;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #131210;
}
.dx-well-paper {
    --wbg: var(--paper);; 
    --wclr: var(--theme-ink);
    --wbrdr: 1px solid rgba(0, 0, 0, 0.05);; 
    --shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --clr: var(--theme-ink);
    --bg: var(--paper);
    --brdr: 1px solid rgba(0, 0, 0, 0.05);
    --ink-soft: var(--theme-ink-soft);
    --ink-softer: var(--theme-ink-softer);
    background: var(--paper);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--theme-ink);
}
.dx-well-ondark, .dx-well2-ondark, .dx-well3-ondark {
    --wclr: #f5f5f5;; 
    --wbrdr: 1px solid rgba(255,255,255,0.08);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    border: 1px solid rgba(255,255,255,0.08);
    color: #f5f5f5;;
}
.dx-well-ondark { 
    --bg: #0d0c0a; 
    --shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --wsh: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    background: #0d0c0a; 
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.dx-well2-ondark { 
    --wbg: #211f19; 
    --shadow: var(--well-shadow4);
    --wsh: var(--well-shadow4);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    background: #211f19;
    box-shadow: var(--well-shadow4);
}
.dx-well3-ondark { 
    --wbg: #2A2822; 
    --shadow: inset -10px 10px 15px -10px rgba(0, 0, 0, 0.3), inset 10px -10px 10px -10px rgba(0, 0, 0, 0.3);
    --wsh: inset -10px 10px 15px -10px rgba(0, 0, 0, 0.3), inset 10px -10px 10px -10px rgba(0, 0, 0, 0.3);
    --muted: color-mix(in srgb, var(--light-text) 50%, transparent);
    --acc: var(--accent);
    background: #2A2822; 
    box-shadow: inset -10px 10px 15px -10px rgba(0, 0, 0, 0.3), inset 10px -10px 10px -10px rgba(0, 0, 0, 0.3);
}
.dx-well-soft {
    --clr: var(--wclr, var(--clr, var(--ink-soft))); 
    --brdr: none;
    --shadow: var(--shadow-soft-clr);
    --acc: var(--accent-ink); 
    color: var(--clr);
    background: var(--wbg, var(--well));
    box-shadow: var(--shadow-soft-clr); 
    border: none;
}
.dx-black-well {
  border: none;
  background-color: #222;
  -webkit-box-shadow: inset 0 1px 1px #000, 0 1px 0 0 #868686;
  box-shadow: inset 0 1px 1px #000, 0 1px 0 0 #868686;
}
.dx-deboss { 
    --shadow: var(--shadow-deboss);
    box-shadow: var(--shadow-deboss); 
    --bg: var(--well);
    --ink: var(--well-ink);
    background: var(--well);
    border: var(--well-border);
    color: var(--well-ink);
}
.dx-deboss-dark { 
    --shadow: var(--shadow-deboss-dark);
    --bg: var(--well);
    --ink: var(--well-ink);
    background: var(--well);
    border: var(--well-border);
    color: var(--well-ink);
    box-shadow: var(--shadow-deboss-dark); 
}
.dx-deboss-dark2 { 
    --shadow: var(--shadow-deboss-dark2);
    --bg: var(--well);
    --ink: var(--well-ink);
    background: var(--well);
    border: var(--well-border);
    color: var(--well-ink);
    box-shadow: var(--shadow-deboss-dark2); 
}

.escalate {
    --drk: color-mix(in srgb, var(--warn) 50%, #000000);
    --drk-trans: color-mix(in srgb, var(--drk) 20%, transparent);
    display: flex; gap: 12px; align-items: flex-start; 
    padding:16px 18px; border-radius: var(--r-lg); 
    background: var(--warn-tint); color: var(--ink); font-size: .92rem; 
    box-shadow: var(--well-shadow-badge);
    border: 1px solid var(--drk-trans);
  }
  .escalate svg { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 2px; }

/* accent gradient on dark */
.dx-2tone-db-acf, .dx-2tone-acf-db {
  --bg: linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%, #fff),
    color-mix(in srgb,var(--accent) 78%, #000));
  --brdr: 1px solid #292929;
  --shadow: 
    0 2px 4px rgba(0, 0, 0, 1),
    0 -2px 4px rgba(0, 0, 0, 1),
    0 10px 20px rgba(0, 0, 0, 0.4);
  --clr: var(--on-accent);
  border: var(--brdr);
  background: var(--bg);
  box-shadow: var(--shadow);
  color: var(--clr);
}
/* accent gradient on light */
.dx-2tone-lb-acf, .dx-2tone-acf-lb {
  --bg: linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%, #fff),
    color-mix(in srgb,var(--accent) 78%, #000));
  --lmix: color-mix(in srgb,var(--light-mix) 80%, transparent);
  --shadow: 
    0 1px 4px var(--lmix),
    0 -1px 4px var(--lmix),
    0 8px 20px rgba(0, 0, 0, 0.25);
  --brdr: 1px solid color-mix(in srgb, var(--light-mix) 80%, transparent);
  --clr: var(--on-accent);
  border: var(--brdr);
  background: var(--bg);
  box-shadow: var(--shadow);
  color: var(--clr);
}
/* accent gradient on dark button */
.dx-2tone-db-acf--btn, .dx-2tone-acf-db--btn {
  --bg: linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%, #fff),
    color-mix(in srgb,var(--accent) 78%, #000));
  --shadow: 
    0 2px 4px rgba(0, 0, 0, 1),
    0 -2px 4px rgba(0, 0, 0, 1), 
    0 10px 20px rgba(0, 0, 0, 0.4);
  --brdr: 1px solid #292929;
  --radius: 999px;
  --padding: 13px 24px;
  --font-size: clamp(12px, 0.1786vw + 11.43px, 14px); 
  --weight: 500;
  --clr: var(--on-accent);
  appearance: none; cursor: pointer; 
  border: var(--brdr);
  border-radius: var(--radius); 
  padding: var(--padding);
  font-size: var(--font-size); 
  font-weight: var(--weight);
  background: var(--bg);
  box-shadow: var(--shadow);
  color: var(--clr);
}
/* accent gradient on light button */
.dx-2tone-lb-acf--btn, .dx-2tone-acf-lb--btn {
  --bg: linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%, #fff),
    color-mix(in srgb,var(--accent) 78%, #000));
  --lmix: color-mix(in srgb,var(--light-mix) 80%, transparent);
  --shadow: 
    0 1px 4px var(--lmix),
    0 -1px 4px var(--lmix),
    0 8px 20px rgba(0, 0, 0, 0.25);
  --brdr: 1px solid color-mix(in srgb, var(--light-mix) 80%, transparent);
  --clr: var(--on-accent);
  --weight: 500;
  --font-size: clamp(12px, 0.1786vw + 11.43px, 14px); 
  --radius: 999px; 
  --padding: 13px 24px;
  appearance: none; cursor: pointer; 
  border: var(--brdr);
  border-radius: var(--radius); 
  padding: var(--padding);
  font-size: var(--font-size); 
  font-weight: var(--weight);
  background: var(--bg);
  box-shadow: var(--shadow);
  color: var(--clr);
}

/* light color on accent */
.dx-2tone-acb-lf, .dx-2tone-lf-acb {
  --bg: var(--clay-soft-light);
  --brdr: 1px solid var(--accent);
  --shadow: 
      0 2px 4px var(--accent), 
      0 10px 20px rgba(0, 0, 0, 0.4);
  --clr: color-mix(in srgb,var(--accent) 50%, var(--dark-mix));
  color: var(--dark-text);
  background: var(--bg);
  border: 1px solid var(--accent);
  box-shadow: 
      0 2px 4px var(--accent), 
      0 10px 20px rgba(0, 0, 0, 0.4);
  color: var(--clr);
}
/* dark color on accent */
.dx-2tone-acb-df, .dx-2tone-df-acb {
  --bg: var(--clay-deep);
  --bgc: #2a2826;
  --brdr: 1px solid var(--accent);
  --shadow: 
      0 2px 4px var(--accent), 
      0 -2px 4px var(--accent),
      0 10px 20px rgba(0, 0, 0, 0.4);
  --clr: var(--light-text);
  color: var(--clr);
  background: var(--bg);
  border: var(--brdr);
  box-shadow: var(--shadow);
}

.dx-copper {
    --bg: var(--copper-gradient);
    --clr: var(--on-copper);
    --brdr: none;
    --shadow: var(--copper-shadow);
    --muted-clr: color-mix(in srgb, var(--clr) 70%,transparent);
    --ink-soft-clr: color-mix(in oklch, var(--on-accent) 80%, transparent);
    --ink-softer-clr: color-mix(in oklch, var(--on-accent) 70%, transparent);
    --ink-softest-clr: color-mix(in oklch, var(--on-accent) 60%, transparent);
    background: var(--copper-gradient); box-shadow: var(--copper-shadow);
    color: var(--on-copper); border: none;
}
.dx-copper2, .dx-copper-icon {
    --bg: var(--copper-gradient);
    --clr: #fbf7f1; color: #fbf7f1;
    --brdr: 1px solid rgba(255, 255, 255, .14);
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 22px 42px -20px rgba(152, 58, 6, .85);
    --muted-clr: color-mix(in srgb, var(--clr) 70%,transparent);
    --ink-soft-clr: color-mix(in oklch, var(--on-accent) 80%, transparent);
    --ink-softer-clr: color-mix(in oklch, var(--on-accent) 70%, transparent);
    --ink-softest-clr: color-mix(in oklch, var(--on-accent) 60%, transparent);
    border: 1px solid rgba(255, 255, 255, .14);
    background: var(--copper-gradient);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 22px 42px -20px rgba(152, 58, 6, .85);
}
.ph-track { 
    --bg: var(--ph-gradient);
    --wbg: var(--ph-gradient);
    --wsh: inset 0 2px 5px rgba(0, 0, 0, .5);
    background: var(--ph-gradient); 
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}
.ph-track-shadow {
    --wc1: contrast-color(var(--wbg, var(--bg)));
    --wc2: color-mix(in srgb, var(--wc1) 90%, transparent 10%); 
    --wbrdr-c: color-mix(in srgb, var(--wc2) 10%, transparent 90%);
    --wbg2: color-mix(in srgb, var(--bg) 90%, var(--ink) 10%);
    --shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
    --wsh: inset 0 2px 5px rgba(0, 0, 0, .5);
    background: var(--wbg, var(--wbg2, var(--well))); 
    color: var(--wclr, var(--wc2, var(--ink-soft))); 
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
    background: var(--wbg, var(--wbg2, var(--well)));
}

.dx-accent-fill {
    --ac: var(--acc, var(--accent, var(--accent-main)));
    --acc-dark: color-mix(in srgb, var(--ac), var(--dark-mix) 30%);
    --acc-light: color-mix(in srgb, var(--ac), var(--light-mix) 30%);
    --acc-trans40: color-mix(in srgb, var(--ac), transparent 60%);
    background: linear-gradient(90deg, var(--acc-light), var(--ac), var(--acc-dark));
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.5), inset -2px -3px 5px rgba(0, 0, 0, 0.6), 0 0 20px var(--acc-trans40);
}
/* ================================================================================================================================================== 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 */
.dx-icon { padding: 0.5rem; border-radius: 12px; }
.mini-well-badge { 
    background: var(--well); border: var(--well-border); box-shadow: var(--well-shadow);
    font-size: 0.72rem; padding: 3px 8px; border-radius: 8px; display: inline-block;
}
.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); 
}
/* ================================================================================================================================================== ACCORDION EXPAND ICON */
.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(--ink-soft));
    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-expand-icon--md { width: clamp(1.8rem, 1vw + 25.6px, 2.5rem); height: clamp(1.8rem, 1vw + 25.6px, 2.5rem); }

/* EXPAND ICON X */
.dhs-expand-x { 
    background: var(--bg, var(--well)); 
    color: var(--clr, var(--ink-soft));
    box-shadow: var(--shadow, var(--well-shadow));
    border: var(--brdr, var(--well-border));
}
.dhs-expand-x::before, .dhs-expand-x::after {
    content:""; position: absolute; 
    background: var(--clr, var(--ink-soft));
    border-radius: 2px; 
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.dhs-expand-x::before{ width:12px; height:2px; } 
.dhs-expand-x::after { width:2px; height:12px; }
.dhs-accordion__item.open .dhs-expand-x { 
    background: var(--bg, var(--paper)); 
    color: var(--clr, var(--ink-soft));
    box-shadow: var(--shadow, var(--shadow-soft-sm));
    border: var(--brdr, var(--soft-line-border));
}
.dhs-accordion__item.open .dhs-expand-x::before, 
.dhs-accordion__item.open .dhs-expand-x::after { color: var(--clr, var(--ink-soft)); }
.dhs-accordion__item.open .dhs-expand-x::after { transform: scaleY(0); opacity: 0; }

.dhs-accordion__item.open .dhs-expanded-accent { 
    background: var(--accent-gradient2); 
    box-shadow: var(--shadow-soft-sm);
    color: var(--on-accent);
    border: none;
}
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-accent::before, 
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-accent::after { color: var(--on-accent); }
.dhs-accordion__item.open .dhs-expanded-accent-faded { 
    background: var(--accent-faded); 
    box-shadow: var(--shadow-soft-sm);
    color: var(--accent);
    border: 1px solid var(--accent);
}
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-accent-faded::before, 
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-accent-faded::after { color: var(--accent); }
.dhs-accordion__item.open .dhs-expanded-soft { 
    background: var(--paper); 
    box-shadow: var(--shadow-soft-sm);
    color: var(--ink-soft);
    border: 1px solid var(--line-soft);
}
.dhs-accordion__item.open .dhs-expanded-soft-dark { 
    background: var(--paper-dark); 
    box-shadow: var(--shadow-soft-dark-sm);
    color: var(--ink-soft-dark);
    border: 1px solid var(--line-soft-dark);
}
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-soft-dark::before, 
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-soft-dark::after { color: var(--ink-soft-dark); }
.dhs-accordion__item.open .dhs-expanded-well { 
    background: var(--well); 
    box-shadow: var(--well-shadow);
    color: var(--ink-soft);
    border: var(--well-border);
}
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-well::before, 
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-well::after,
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-soft::before, 
.dhs-accordion__item.open .dhs-expand-x.dhs-expanded-soft::after { color: var(--ink-soft); }

.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-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; } }

/* ================================================================================================================================================== 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-clr, var(--accent-gradient-dark));
}
.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);
}
.eyebrow__pulse, .pulse-dot2 {
    position: relative; width: 10px; height: 10px; 
    flex: 0 0 7px; border-radius: 50%; 
    background: var(--accent-deep); 
    box-shadow: 0 0 0 5px rgba(210, 105, 26, .13);
}
.eyebrow__pulse::after, .pulse-dot2::after {
    content: ""; position: absolute; inset: -5px; 
    border: 1px solid color-mix(in srgb, var(--pulse-clr, var(--accent-ink)) 40%, transparent);
    border-radius: inherit; animation: pulse 2.6s ease-out infinite;
}

/* ================================================================================================================================================== 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);}

/* ================================================================================================================================================== TAGS */
.dhs-tag {
    font-style: normal; font-size: 0.5rem; 
    letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; margin-left: 9px; padding: 3px 8px; white-space: nowrap;
    border-radius: var(--pill);
    box-shadow: var(--tag-shadow, var(--shadow, var(--shadow-sm)));
    transition: all var(--dur) var(--ease);
}
.dhs-tag-sm { box-shadow: var(--tag-shadow, var(--shadow-sm)); }
.dhs-tag-well-muted {
    background: var(--well); 
    color: color-mix(in srgb,var(--clr, var(--ink)) 50%,transparent);
    box-shadow: var(--well-shadow); 
    border:var(--well-border);
}
/* ================================================================================================================================================== BADGE */
.dhs-badge { 
    --default-bg: var(--bg, var(--accent-gradient2));
    display: flex; align-items: center;
    gap: 7px;
    color: var(--clr);
    background: var(--wbg, 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 svg { width: 1.5rem; height: 1.5rem; }
.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; }

.status-badge, 
.stop-badge, .stop-badge-well, .stop-badge-soft,
.warn-badge, .warn-badge-well, .warn-badge-soft,
.ok-badge, .ok-badge-well, .ok-badge-soft {
    --drk: color-mix(in srgb, var(--clr) 50%, #000000);
    --drk-trans: color-mix(in srgb, var(--drk) 20%, transparent);
    --wsh: var(--well-shadow-badge); --wbrdr: 1px solid var(--drk-trans);
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--dhs-text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0.45rem 0.45rem;
    font-family: var(--font-logo);
    border-radius: var(--pill);
    white-space: nowrap;
    color: var(--clr);
    background: var(--bg);
    border: var(--brdr, none);
    box-shadow: var(--shadow, var(--shadow-sm));
}
.stop-badge, .status-badge-stop, .stop-badge-well, .stop-badge-soft {
    --bg: var(--stop-tint); --bgc: var(--stop-tint); --clr: var(--stop); --wclr: var(--stop);
    background: var(--stop-tint); color: var(--stop);
}
.warn-badge, .status-badge-warn, .warn-badge-well, .warn-badge-soft {
    --bg: var(--warn-tint); --bgc: var(--warn-tint); --clr: var(--warn); --wclr: var(--warn);
    background: var(--warn-tint); color: var(--warn);
}
.ok-badge, .status-badge-ok, .ok-badge-well, .ok-badge-soft {
    --bg: var(--ok-tint); --bgc: var(--ok-tint); --clr: var(--ok); --wclr: var(--warn);
    background: var(--ok-tint); color: var(--ok);
}
.stop-badge-well, .warn-badge-well, .ok-badge-well {
    --shadow: var(--well-shadow-badge); --brdr: 1px solid var(--drk-trans);
    --wsh: var(--well-shadow-badge);  --wbrdr: 1px solid var(--drk-trans);
    box-shadow: var(--well-shadow-badge); border: 1px solid var(--drk-trans);
}
.stop-badge-soft, .warn-badge-soft, .ok-badge-soft { --shadow: var(--shadow-soft-clr); box-shadow: var(--shadow-soft-clr); }


.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);
}
.button--close.drawer__close .btn-text { --clr: var(--ink); color: var(--ink) !important; }
.dhs-hero__cta, .btn-group { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.dhs-btn {
    display: inline-flex; align-items: center; cursor: pointer;
    gap: var(--gap, 14px);
    font-family: var(--font, var(--font-sans)); 
    text-transform: var(--text-transform, uppercase);
    font-size: var(--font-size, var(--dhs-text-xs));
    letter-spacing: var(--tracking, var(--tracking-btn));
    padding: var(--padding, var(--btn-padding));
    border-radius: var(--radius, var(--pill)); 
    font-weight: var(--weight, 600);
    background: var(--bg, var(--btn-bg));
    color: var(--clr, var(--light-text));
    border: var(--brdr, var(--btn-brdr-dark));
    box-shadow: var(--shadow, var(--btn-shadow-dark));
    transition: var(--transition, var(--btn-transition));
}
.dhs-btn-md {
    --font-size: var(--dhs-text-xs);
    --gap: 8px; 
    --tracking: var(--tracking-3);
    --padding: clamp(10px, 0.2679vw + 9.14px, 13px) clamp(14px, 0.3571vw + 12.86px, 18px);
    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 {
    --font-size: var(--dhs-text-xxs);
    --gap: 5px; 
    --tracking: var(--tracking-3);
    --padding: clamp(6px, 0.3571vw + 4.86px, 10px) clamp(14px, 0.3571vw + 12.86px, 18px);
    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(--def-shadow))); 
    border-radius: var(--radius, var(--pill));
    border: var(--brdr, none);
    white-space: nowrap;
    font-weight: bold;
}
.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: 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); --brdr: 1px solid var(--line-soft); }
.button--glass {
    color: #fff; border: 1px solid rgba(255,255,255,.23);
    background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15); padding-right: 25px;
}
.btn--ghost {
    --bg: var(--paper);
    --clr: var(--ink-soft);
    --brdr: 1px solid var(--line-soft);
    --shadow: var(--shadow-soft);
    --muted-clr: var(--muted);
    background: var(--paper);
    color: var(--ink-soft) !important;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line-soft);
}
.btn--quiet {
    background: var(--paper-2);
    color: var(--ink-soft);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-soft-sm);
}
.text-link {
    display: inline-flex; align-items: center; gap: 13px;
    color: var(--ink); font-size: .86rem; font-weight: 600;
}
.text-link > span:last-child {
    display: grid; width: 34px; height: 34px; place-items: center;
    border: 1px solid var(--line); border-radius: 50%;
    transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.text-link:hover > span:last-child {
    transform: rotate(-8deg) translate(2px, -2px);
    border-color: var(--accent);
    background: rgba(210,105,26,.08);
}
.text-link--light { color: var(--cream-fixed); }
.text-link--light > span:last-child { border-color: rgba(255,255,255,.17); }

.dhs-btn .dhs-arrow, .dxp-btn .dhs-arrow, .dxp-btn .arrow, .dhs-btn .arrow {
    --bg2: rgba(255, 255, 255, 0.18);
    --c1: contrast-color(var(--bgc, var(--bg)));
    --c2: color-mix(in srgb,var(--c1) 50%, var(--bgc, var(--bg)));
    --c3: color-mix(in srgb,var(--c2) 30%, transparent);
    --radius: 50%; --shadow: var(--wsh, var(--well-shadow));
    width: 30px; height: 30px; border-radius: 50%; 
    display: grid; place-items: center; flex: none;
    background: var(--arrow-bg,var(--c3,var(--bg2))); 
    stroke: var(--clr, var(--ink-soft));
    border: none !important;
    box-shadow: var(--wsh, var(--well-shadow-dark));
}
.dhs-btn2 {
    --bg2: linear-gradient(150deg, rgb(37, 45, 44), rgb(18, 24, 23));
    --shadow2: rgba(255, 255, 255, 0.208) 0px 1px 1px inset, rgba(0, 0, 0, 0.145) 0px 3px 0px, rgba(0, 0, 0, 0.565) 0px 8px 14px -10px;
    --transition2: transform .3s var(--ease), box-shadow .3s;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--clr, rgb(255, 255, 255));
    box-shadow: var(--shadow, var(--shadow2));
    font-size: var(--font-size, var(--dhs-text-base));
    font-weight: var(--weight, 400);
    letter-spacing: var(--letter-spacing, var(--tracking-2));
    gap: 24px; text-transform: var(--text-transform, capitalize);
    padding: var(--padding, 15px 22px);
    background: var(--bg, var(--bg2));
    border-radius: var(--radius, 12px); border-width: 1px; border-style: solid;
    border-color: var(--brdr-clr, rgba(255, 255, 255, 0.05)); border-image: none;
    transition: var(--transition, var(--transition2));
}
.btn-square {
    --bg2: linear-gradient(150deg, rgb(37, 45, 44), rgb(18, 24, 23));
    --shadow2: rgba(255, 255, 255, 0.208) 0px 1px 1px inset, rgba(0, 0, 0, 0.145) 0px 3px 0px, rgba(0, 0, 0, 0.565) 0px 8px 14px -10px;
    --transition2: transform .3s var(--ease), box-shadow .3s;
    --radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--clr, rgb(255, 255, 255));
    box-shadow: var(--shadow, var(--shadow2));
    font-size: var(--font-size, var(--dhs-text-base));
    font-weight: var(--weight, 400);
    letter-spacing: var(--letter-spacing, var(--tracking-2));
    gap: 24px; text-transform: var(--text-transform, capitalize);
    padding: var(--padding, 15px 22px);
    background: var(--bg, var(--bg2));
    border-radius: 12px; border-width: 1px; border-style: solid;
    border-color: var(--brdr-clr, rgba(255, 255, 255, 0.05)); border-image: none;
    transition: var(--transition, var(--transition2));
}
.dp-btn1, .dp-mm {
    --bg: linear-gradient(180deg, #087A7C 0%, #055254 100%); #007078
    --clr: #FBF7F1;
    --shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(6, 100, 102, 0.28);
    background: linear-gradient(180deg, #087A7C 0%, #055254 100%);
    color: #FBF7F1;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(6, 100, 102, 0.28);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
/* Hover State: Shifts the gradient slightly brighter and intensifies the shadow */
.dp-mm:hover {
  background: linear-gradient(180deg, #13CFA5 0%, #009875 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), 0 12px 26px rgba(0, 142, 110, 0.35);
  cursor: pointer;
}

/* Active State: Simulates a press by reversing the gradient, flattening the shadow, and shifting down */
.dp-mm:active {
  background: linear-gradient(180deg, #00775C 0%, #00B189 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 142, 110, 0.15);
  transform: translateY(1px);
  transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
}

/* Base Class */
.your-class-deep-teal {
  background: linear-gradient(180deg, #007078 0%, #00464B 100%);
  color: #FBF7F1;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(0, 70, 75, 0.28);
  
  /* Smooth transition for background, shadows, and positioning */
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Hover State: Steps up the brightness and expands the glowing shadow */
.your-class-deep-teal:hover {
  background: linear-gradient(180deg, #00909A 0%, #005B62 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), 0 12px 26px rgba(0, 70, 75, 0.35);
  cursor: pointer;
}

/* Active State: Inverts the gradient and collapses the outer shadow for a crisp click */
.your-class-deep-teal:active {
  background: linear-gradient(180deg, #00464B 0%, #007078 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 70, 75, 0.15);
  transform: translateY(1px);
  
  /* Snappy response time for the physical click feedback */
  transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
}


.dp-cx {
    background: linear-gradient(180deg, #AA182C 0%, #72101E 100%);
    color: #FBF7F1;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(139, 20, 36, 0.28);
}
/* Base Class */
.your-class-red {
  background: linear-gradient(180deg, #AA182C 0%, #72101E 100%);
  color: #FBF7F1;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(139, 20, 36, 0.28);
  
  /* Smooth transition for background, shadows, and positioning */
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Hover State: Brightens the red hue and amplifies the glow */
.your-class-red:hover {
  background: linear-gradient(180deg, #C92239 0%, #911628 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), 0 12px 26px rgba(139, 20, 36, 0.35);
  cursor: pointer;
}

/* Active State: Simulates a physical push by inverting gradients and dropping shadows */
.your-class-red:active {
  background: linear-gradient(180deg, #72101E 0%, #AA182C 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(139, 20, 36, 0.15);
  transform: translateY(1px);
  
  /* Snappy response time for the physical click */
  transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
}

.dp-cm {
    background: linear-gradient(180deg, #FF6C37 0%, #D4420E 100%);
    color: #FBF7F1;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(214, 69, 18, 0.28);
}
/* Base Class */
.your-class-orange {
  background: linear-gradient(180deg, #FF6C37 0%, #D4420E 100%);
  color: #FBF7F1;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(214, 69, 18, 0.28);
  
  /* Smooth transition for background, shadows, and positioning */
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Hover State: Steps up the brightness and expands the glowing shadow */
.your-class-orange:hover {
  background: linear-gradient(180deg, #FF8357 0%, #E84D16 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), 0 12px 26px rgba(214, 69, 18, 0.35);
  cursor: pointer;
}

/* Active State: Inverts the gradient and collapses the outer shadow for a crisp click */
.your-class-orange:active {
  background: linear-gradient(180deg, #D4420E 0%, #FF6C37 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(214, 69, 18, 0.15);
  transform: translateY(1px);
  
  /* Instant response time for the interaction feedback */
  transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
}

.dp-hb {
    background: linear-gradient(180deg, #DAC556 0%, #A28E25 100%);
    color: #1A1A1A;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), 0 10px 22px rgba(162, 142, 37, 0.28);
}
/* Base Class */
.your-class-gold {
  background: linear-gradient(180deg, #DAC556 0%, #A28E25 100%);
  color: #1A1A1A;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), 0 10px 22px rgba(162, 142, 37, 0.28);
  
  /* Smooth transition for background, shadows, and positioning */
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Hover State: Brightens into a vivid gold and enhances the inner highlight */
.your-class-gold:hover {
  background: linear-gradient(180deg, #EAD66B 0%, #BCAF3B 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.55), 0 12px 26px rgba(162, 142, 37, 0.35);
  cursor: pointer;
}

/* Active State: Inverts the gold gradient and compresses shadows for a clean click */
.your-class-gold:active {
  background: linear-gradient(180deg, #A28E25 0%, #DAC556 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(162, 142, 37, 0.15);
  transform: translateY(1px);
  
  /* Snappy response timing for the physical click feedback */
  transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
}

.dp-fh {
    background: linear-gradient(180deg, #00B189 0%, #00775C 100%);
    color: #FBF7F1;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(0, 142, 110, 0.28);
}
/* Base Class */
.your-class-teal {
  background: linear-gradient(180deg, #00B189 0%, #00775C 100%);
  color: #FBF7F1;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.25), 0 10px 22px rgba(0, 142, 110, 0.28);
  
  /* Smooth transition for background, shadows, and positioning */
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Hover State: Shifts the gradient slightly brighter and intensifies the shadow */
.your-class-teal:hover {
  background: linear-gradient(180deg, #13CFA5 0%, #009875 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.35), 0 12px 26px rgba(0, 142, 110, 0.35);
  cursor: pointer;
}

/* Active State: Simulates a press by reversing the gradient, flattening the shadow, and shifting down */
.your-class-teal:active {
  background: linear-gradient(180deg, #00775C 0%, #00B189 100%);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 142, 110, 0.15);
  transform: translateY(1px);
  
  /* Faster transition for clicking so it feels highly responsive */
  transition: background 0.05s ease, box-shadow 0.05s ease, transform 0.05s ease;
}


@media screen and (max-width: 500px) {
    .btn-square { font-size: var(--dhs-text-sm); padding: 10px 18px; }
}

.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 { --bg: var(--well); background: var(--well); }

.dhs-btn.dx-accent .dhs-arrow { 
    --clr1: contrast-color(var(--accent));
    --bg: color-mix(in srgb,var(--clr1) 20%,transparent); 
    background: var(--bg); 
}
.dhs-btn.dx-copper .dhs-arrow { --bg: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.18); }
.dhs-btn-xs .dhs-arrow { --radius: 50%; width: 12px; height: 12px; border-radius: 50%; }
.dhs-btn svg { --transition: transform .25s; 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 {
    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);
}
.dhsml-form-visual{
    display:grid; place-items:center; width:58%;height:76%;
    border:1px solid rgba(255,255,255,.14); border-radius:12px;
    background:linear-gradient(160deg,#32302c,#12110f);
    color:#f4f0e8;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 40px -26px #000;
}
.dhsml-form-visual span{
    font-family:var(--font-logo);
    font-size:9px; letter-spacing:.16em;
  }
  .dhsml-form-visual b{
    font-family:var(--font-logo);
    font-size:24px;
    letter-spacing:.04em;
  }
  .dhsml-form-visual i{
    width:36px;height:2px;
    background:var(--copper);
  }
  .dhsml-form-visual small{
    color:#9e988f;
    font-size:8px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .dhsml-doc { 
  position: relative; 
  width: 58%; height:76%;
  padding:19px; 
  border:1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(155deg,#f8f7f3,#ddd9d0);
  color:#151412;
  box-shadow: 0 22px 35px -22px rgba(0,0,0,.48);
  transform:rotate(-2deg);
}
.dhsml-doc::before { 
  content:"";
  position:absolute;
  left: 19px; right:19px;
  top:70px; height: 1px;
  background: #c7c2b8;
  box-shadow:0 12px #d0cbc2,0 24px #d0cbc2,0 36px #d0cbc2;
}
.dhsml-doc span,.dhsml-doc b,.dhsml-doc i,.dhsml-doc small{
  display: block;
  position: relative;z-index:1;
}
.dhsml-doc span{
  font-family:var(--font-logo);
  font-size:8px;
  letter-spacing:.16em;
}
.dhsml-doc b{
  margin-top: 5px;
  font-family: var(--font-logo);
  font-size:28px;
}.dhsml-doc i{
  margin-top: 3px;
  color:#a4480b;
  font-size:10px;
}
.dhsml-doc small{ 
  position:absolute;
  left:19px;
  bottom:16px;
  color:#837e74;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.dhsml-resource__media--clinical{
  background:linear-gradient(145deg,#2b2926,#080808);
}

.dx-proof-ledger {
    display: grid; grid-template-columns: repeat(4, 1fr); 
    padding: 32px 16px;
    border-radius: var(--r-lg);
}
.dx-proof-cell {
    padding: 1rem; border-left: 1px solid var(--line); display: grid; align-content: space-between;
}
.dx-proof-cell:first-child { border-left: none !important; }

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



/* ================================================================================================================================================== 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); }

.display-none { display: none !important;}

/* ================================================================================================================================================== KEYFRAMES */
@keyframes pulse { 0% { opacity: .85; transform: scale(.7); } 75%, 100% { opacity: 0; transform: scale(1.7); } }