@property --el-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --el-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

* { zoom: var(--el-scale, 1); }
* { opacity: var(--el-opacity, 1); }

.scale,
.scale-75,
.scale-90,
.scale-110,
.scale-125 {
  zoom: calc(var(--el-scale, 1) * var(--scale-mul, 1)) !important;
}

.scale-75  { --scale-mul: 0.75; }
.scale-90  { --scale-mul: 0.90; }
.scale-110 { --scale-mul: 1.10; }
.scale-125 { --scale-mul: 1.25; }

* { filter: var(--el-filter, ); }

.blur-custom { --_f-blur: blur(var(--blur-amount, 2px)); }
.grayscale   { --_f-grayscale: grayscale(var(--grayscale-amount, 1)); }
.saturate    { --_f-saturate: saturate(var(--saturate-amount, 1.5)); }
.fx          {
  --_f-tone:
    brightness(var(--fx-brightness, 1)) contrast(var(--fx-contrast, 1))
    hue-rotate(var(--fx-hue, 0deg)) sepia(var(--fx-sepia, 0)) invert(var(--fx-invert, 0));
}

.img-outline-thin,
.img-outline-thick {
  --_c: var(--img-outline-color, #000);
  --_f-outline:
    drop-shadow(var(--_s) 0 0 var(--_c))
    drop-shadow(calc(-1 * var(--_s)) 0 0 var(--_c))
    drop-shadow(0 var(--_s) 0 var(--_c))
    drop-shadow(0 calc(-1 * var(--_s)) 0 var(--_c));
}
.img-outline-thin  { --_s: var(--img-outline-size, 1.5px); }
.img-outline-thick { --_s: var(--img-outline-size, 3px); }
.img-glow {
  --_f-glow: drop-shadow(0 0 var(--img-glow-blur, 12px) var(--img-glow-color, #007acc));
}
.img-double-glow {
  --_f-glow:
    drop-shadow(0 0 var(--img-glow-blur, 12px) var(--img-glow-color, #007acc))
    drop-shadow(0 0 calc(var(--img-glow-blur, 12px) * 2) var(--img-glow-color, #007acc));
}
.img-shadow {
  --_f-shadow: drop-shadow(
    var(--img-shadow-x, 0) var(--img-shadow-y, 8px) var(--img-shadow-blur, 16px)
    var(--img-shadow-color, rgba(0, 0, 0, 0.45)));
}

:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx, .near-cursor) {
  filter:
    var(--el-filter, )
    var(--_f-outline, )
    var(--_f-glow, )
    var(--_f-shadow, )
    var(--_f-blur, )
    var(--_f-grayscale, )
    var(--_f-saturate, )
    var(--_f-tone, )
    var(--_f-near, );
  transition:
    filter var(--fx-duration, 0.25s) ease,
    backdrop-filter var(--fx-duration, 0.25s) ease,
    opacity var(--fx-duration, 0.25s) ease;
}

:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx, .near-cursor):is([data-fx-scope="items"], :not([data-fx-scope="element"]):has(> [data-layer]:not([data-layer="0"]))) {
  filter: var(--el-filter, );
}
:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx, .near-cursor):is([data-fx-scope="items"], :not([data-fx-scope="element"]):has(> [data-layer]:not([data-layer="0"]))) > * {
  filter:
    var(--el-filter, )
    var(--_f-outline, )
    var(--_f-glow, )
    var(--_f-shadow, )
    var(--_f-blur, )
    var(--_f-grayscale, )
    var(--_f-saturate, )
    var(--_f-tone, )
    var(--_f-near, );
  transition:
    filter var(--fx-duration, 0.25s) ease,
    opacity var(--fx-duration, 0.25s) ease;
}

[data-fx-trigger="hover"]:not(:hover) {
  --_f-outline: initial; --_f-glow: initial; --_f-shadow: initial;
  --_f-blur: initial; --_f-grayscale: initial; --_f-saturate: initial; --_f-tone: initial;
  --_b-blur: initial; --_b-saturate: initial; --_b-brightness: initial;
  --_o-mul: 1;
}

.opacity-90 { --_o-mul: 0.9; }
.opacity-75 { --_o-mul: 0.75; }
.opacity-50 { --_o-mul: 0.5; }
.opacity-25 { --_o-mul: 0.25; }
.opacity-90, .opacity-75, .opacity-50, .opacity-25 {
  opacity: calc(var(--el-opacity, 1) * var(--_o-mul, 1));
  transition: opacity var(--fx-duration, 0.25s) ease;
}

.bg-gradient-linear {
  --_from: color-mix(in srgb,
    var(--grad-from, #ff8a65) calc(var(--grad-from-alpha, 1) * 100%), transparent);
  --_to: color-mix(in srgb,
    var(--grad-to, #d84315) calc(var(--grad-to-alpha, 1) * 100%), transparent);
  background-image: linear-gradient(
    var(--grad-angle, 135deg),
    var(--_from) var(--grad-from-stop, 0%),
    var(--_to)   var(--grad-to-stop, 100%)
  );
}
.bg-gradient-radial {
  --_from: color-mix(in srgb,
    var(--grad-from, #ff8a65) calc(var(--grad-from-alpha, 1) * 100%), transparent);
  --_to: color-mix(in srgb,
    var(--grad-to, #d84315) calc(var(--grad-to-alpha, 1) * 100%), transparent);
  background-image: radial-gradient(
    var(--grad-shape, ellipse) var(--grad-size, farthest-corner) at var(--grad-position, center),
    var(--_from) var(--grad-from-stop, 0%),
    var(--_to)   var(--grad-to-stop, 100%)
  );
}

.bg-image-cover   { background-size: cover;    background-position: center; background-repeat: no-repeat; }
.bg-image-contain { background-size: contain;  background-position: center; background-repeat: no-repeat; }
.bg-image-tile    { background-repeat: repeat; }
.bg-fixed         { background-attachment: fixed; }

.bg-noise {
  position: relative;
  isolation: var(--noise-isolation, auto);
}
.bg-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;

  background-image: var(
    --noise-src,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.25'/></svg>")
  );
  background-size: calc(var(--noise-size, 128px) / var(--site-scale, 1) / var(--preview-zoom, 1));
  background-repeat: var(--noise-repeat, repeat);
  opacity: var(--noise-strength, 0.35);
  mix-blend-mode: var(--noise-blend, overlay);
  border-radius: inherit;
  z-index: var(--noise-z, 0);
}

body.bg-noise::after { position: fixed; }

@media (max-width: 640px) {
  .bg-noise::after {
    background-size: calc(var(--noise-size, 128px) / var(--site-scale-phone, 0.75) / var(--preview-zoom, 1));
  }
}

@property --_ring { syntax: "*"; inherits: false; }

.glass, .glass-dark {
  --_b-blur: blur(var(--glass-blur, 12px));
  --_b-saturate: saturate(var(--glass-saturate, 1.2));
  --_b-brightness: brightness(var(--glass-brightness, 1));

  --_ring: inset 0 0 0 var(--glass-border-width, 1px) var(--glass-border, rgba(255, 255, 255, 0.12));
  background-color: var(--glass-tint, rgba(255, 255, 255, 0.08));
  box-shadow: var(--_ring);
}
.glass-dark {
  --_ring: inset 0 0 0 var(--glass-border-width, 1px) var(--glass-border, rgba(255, 255, 255, 0.08));
  background-color: var(--glass-tint, rgba(0, 0, 0, 0.4));
}
:is(.glass, .glass-dark, .auto-blur) {
  -webkit-backdrop-filter: var(--_b-blur, ) var(--_b-saturate, ) var(--_b-brightness, );
          backdrop-filter: var(--_b-blur, ) var(--_b-saturate, ) var(--_b-brightness, );
  will-change: transform;
}

.outline-thin   { outline: 1px solid currentColor; outline-offset: 2px; }
.outline-thick  { outline: 2px solid currentColor; outline-offset: 3px; }
.outline-dashed { outline: 2px dashed currentColor; outline-offset: 3px; }
.ring-accent    { box-shadow: var(--_ring, 0 0 #0000), 0 0 0 3px rgba(0,122,204, var(--ring-alpha, 0.4)); }

.shadow-custom {
  box-shadow:
    var(--_ring, 0 0 #0000),
    var(--shadow-x, 0) var(--shadow-y, 6px)
    var(--shadow-blur, 18px) var(--shadow-spread, 0)
    color-mix(in srgb,
      var(--shadow-color, #000000) calc(var(--shadow-alpha, 0.25) * 100%),
      transparent);
}

.img-render-auto      { image-rendering: auto; }
.img-render-smooth    { image-rendering: smooth; image-rendering: high-quality; }
.img-render-pixelated { image-rendering: pixelated; }
.img-render-crisp     { image-rendering: crisp-edges; }

img[src$=".gif"].img-render-auto,
img[src*=".gif?"].img-render-auto {
  image-rendering: pixelated;
}

.hover-grow  { --hover-scale: 1.04; }
.hover-lift  { --hover-shift-y: -6px; }
.hover-tilt  { --hover-tilt-deg: -1.5deg; }
.hover-shift { --hover-shift-x: 6px; }

:is(.hover-grow, .hover-lift, .hover-tilt, .hover-shift) {
  will-change: scale, translate, rotate;
}

:where(.hover-lift, .hover-tilt, .hover-shift) {
  position: relative;
}
:is(.hover-lift, .hover-tilt, .hover-shift):hover::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--hover-hit, 12px));
  z-index: -1;
}

.hover-zoom,
:is(.hover-grow, .hover-lift, .hover-tilt, .hover-shift, .hover-fade, .hover-glow) {
  transition:
    object-view-box calc(var(--hover-duration, 0.25s) * 1.6) ease,
    background-color var(--hover-duration, 0.25s) ease,
    color var(--hover-duration, 0.25s) ease,
    border-color var(--hover-duration, 0.25s) ease,
    translate var(--hover-duration, 0.25s) ease,
    rotate var(--hover-duration, 0.25s) ease,
    scale var(--hover-duration, 0.25s) ease,
    box-shadow var(--hover-duration, 0.25s) ease,
    opacity var(--hover-duration, 0.25s) ease;
}

.hover-grow:hover  { scale: var(--hover-scale, 1.04); }
.hover-lift:hover  { translate: var(--_pin-tx, 0px) calc(var(--_pin-ty, 0px) + var(--hover-shift-y, -6px)); }
.hover-shift:hover { translate: calc(var(--_pin-tx, 0px) + var(--hover-shift-x, 6px)) var(--_pin-ty, 0px); }
.hover-lift.hover-shift:hover {
  translate: calc(var(--_pin-tx, 0px) + var(--hover-shift-x, 6px)) calc(var(--_pin-ty, 0px) + var(--hover-shift-y, -6px));
}
.hover-tilt:hover  { rotate: var(--hover-tilt-deg, -1.5deg); }
.hover-lift:hover {
  box-shadow:
    var(--_ring, 0 0 #0000),
    0 var(--hover-shadow-y, 18px) calc(var(--hover-shadow-y, 18px) * 2.5)
    color-mix(in srgb, var(--hover-shadow-color, #000) calc(var(--hover-shadow-alpha, 0.35) * 100%), transparent);
}
.hover-fade:hover { opacity: var(--hover-opacity, 0.7); }
.hover-glow:hover {
  box-shadow: var(--_ring, 0 0 #0000), 0 0 var(--hover-glow-blur, 24px)
    color-mix(in srgb, var(--hover-glow-color, #007acc) calc(var(--hover-glow-alpha, 0.65) * 100%), transparent);
}

@property --_wc-move  { syntax: '*'; inherits: false; }
@property --_wc-glass { syntax: '*'; inherits: false; }
@property --_wc-fx    { syntax: '*'; inherits: false; }
:is(.hover-grow, .hover-lift, .hover-tilt, .hover-shift, .near-cursor) { --_wc-move: scale, translate, rotate,; }
:is(.glass, .glass-dark, .auto-blur) { --_wc-glass: transform, backdrop-filter,; }
.near-cursor,
[data-fx-trigger="hover"]:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx):not([data-fx-scope="items"],
    :not([data-fx-scope="element"]):has(> [data-layer]:not([data-layer="0"]))),
[data-fx-trigger="hover"]:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx):is([data-fx-scope="items"],
    :not([data-fx-scope="element"]):has(> [data-layer]:not([data-layer="0"]))) > * {
  --_wc-fx: filter,;
}
.near-cursor,
.hover-fade,
[data-fx-trigger="hover"]:is(.opacity-90, .opacity-75, .opacity-50, .opacity-25, .glass, .glass-dark, .auto-blur),
[data-fx-trigger="hover"]:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx):not([data-fx-scope="items"],
    :not([data-fx-scope="element"]):has(> [data-layer]:not([data-layer="0"]))),
[data-fx-trigger="hover"]:is(.img-outline-thin, .img-outline-thick, .img-glow, .img-double-glow, .img-shadow,
    .blur-custom, .grayscale, .saturate, .fx):is([data-fx-scope="items"],
    :not([data-fx-scope="element"]):has(> [data-layer]:not([data-layer="0"]))) > * {
  will-change: var(--_wc-move, ) var(--_wc-glass, ) var(--_wc-fx, ) opacity;
}

.near-cursor {
  --_near: var(--near, 1);
  --_f-near: blur(calc(var(--near-far-blur, 0px) * (1 - var(--_near))));
  opacity: calc(var(--el-opacity, 1) * (var(--near-far-opacity, 0) +
    (var(--near-opacity, 1) - var(--near-far-opacity, 0)) * var(--_near)));
  scale: calc(var(--near-far-scale, 1) + (1 - var(--near-far-scale, 1)) * var(--_near));
  transition:
    opacity var(--near-response, 0.15s) linear,
    scale var(--near-response, 0.15s) linear,
    filter var(--near-response, 0.15s) linear;
}

.hover-zoom { overflow: hidden; }
.hover-zoom > * { transition: scale calc(var(--hover-duration, 0.25s) * 1.6) ease; }
:where(.hover-zoom) > :where(*) { --_wc-move: scale,; will-change: scale; }
.hover-zoom > img { display: block; width: 100%; }
.hover-zoom:hover > *,
:is(.hover-stage, .hover-stage--block):hover > .hover-zoom > * { scale: var(--hover-zoom, 1.15); }
:is(img, video).hover-zoom {
  object-fit: cover;
  object-view-box: inset(0%);
}
:is(img, video).hover-zoom:hover,
:is(.hover-stage, .hover-stage--block):hover > :is(img, video).hover-zoom {
  object-view-box: inset(calc(50% - 50% / var(--hover-zoom, 1.15)));
}

.hover-underline { text-decoration: none; position: relative; }
.hover-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: var(--hover-underline-height, 2px);
  background: currentColor; transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hover-duration, 0.25s) ease;
}
.hover-underline:hover::after { transform: scaleX(1); }

:where(.hover-stage, .hover-stage--block) > :where(*) {
  transition:
    transform var(--hover-duration, 0.25s) ease,
    translate var(--hover-duration, 0.25s) ease,
    rotate var(--hover-duration, 0.25s) ease,
    scale var(--hover-duration, 0.25s) ease,
    opacity var(--hover-duration, 0.25s) ease,
    box-shadow var(--hover-duration, 0.25s) ease,
    filter var(--hover-duration, 0.25s) ease;
}
:is(.hover-stage, .hover-stage--block):hover > .hover-grow  { scale: var(--hover-scale, 1.04); }
:is(.hover-stage, .hover-stage--block):hover > .hover-lift  { translate: var(--_pin-tx, 0px) calc(var(--_pin-ty, 0px) + var(--hover-shift-y, -6px)); }
:is(.hover-stage, .hover-stage--block):hover > .hover-shift { translate: calc(var(--_pin-tx, 0px) + var(--hover-shift-x, 6px)) var(--_pin-ty, 0px); }
:is(.hover-stage, .hover-stage--block):hover > .hover-tilt  { rotate: var(--hover-tilt-deg, -1.5deg); }
:is(.hover-stage, .hover-stage--block):hover > .hover-lift {
  box-shadow:
    var(--_ring, 0 0 #0000),
    0 var(--hover-shadow-y, 18px) calc(var(--hover-shadow-y, 18px) * 2.5)
    color-mix(in srgb, var(--hover-shadow-color, #000) calc(var(--hover-shadow-alpha, 0.35) * 100%), transparent);
}

.center       { margin-left: auto; margin-right: auto; }
.center-text  { text-align: center; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.relative     { position: relative; }
.absolute-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.pad-sm { padding: var(--pad, 12px); }
.pad-md { padding: var(--pad, 24px); }
.pad-lg { padding: var(--pad, 48px); }
.gap-sm { gap: var(--gap, 8px); }
.gap-md { gap: var(--gap, 16px); }
.gap-lg { gap: var(--gap, 32px); }

@property --aspect { syntax: '*'; inherits: false; }
.aspect-box    { aspect-ratio: var(--aspect, 16 / 9); }
.aspect-video  { aspect-ratio: var(--aspect, 16 / 9); }
.aspect-square { aspect-ratio: var(--aspect, 1 / 1); }
.wrap          { flex-wrap: wrap; }
.no-wrap       { flex-wrap: nowrap; }

.z-behind { position: relative; z-index: var(--z, 0); }
.z-front  { position: relative; z-index: var(--z, 10); }
.z-top    { position: relative; z-index: var(--z, 100); }

.sticky-top {
  position: sticky;
  top: var(--sticky-offset, 0);
  z-index: var(--sticky-z, 100);
}
.fixed-top {
  position: fixed;
  top: var(--sticky-offset, 0);
  left: 0;
  right: 0;
  z-index: var(--sticky-z, 100);
}
.sticky-top[data-stick-side="bottom"] { top: auto; bottom: var(--sticky-offset, 0); }
.sticky-top[data-stick-side="center"] { top: calc(var(--stick-center, 40vh) + var(--sticky-offset, 0px)); }
.sticky-top[data-stick-side="left"]   { top: auto; left: var(--sticky-offset, 0); }
.sticky-top[data-stick-side="right"]  { top: auto; right: var(--sticky-offset, 0); }
.fixed-top[data-stick-side="bottom"]  { top: auto; bottom: var(--sticky-offset, 0); }

.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-relative { position: relative; }
.position-sticky   { position: sticky; }
.top-0    { top: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.cover    { position: absolute; inset: 0; }

@property --_pin-tx { syntax: '*'; inherits: false; }
@property --_pin-ty { syntax: '*'; inherits: false; }

:where(:not(dialog, [popover]):has(> :is(.pin-top-left, .pin-top, .pin-top-right, .pin-left, .pin-center,
    .pin-right, .pin-bottom-left, .pin-bottom, .pin-bottom-right):not([data-pin-to="screen"]))) {
  position: relative;
}
:is(.pin-top-left, .pin-top, .pin-top-right, .pin-left, .pin-center, .pin-right,
    .pin-bottom-left, .pin-bottom, .pin-bottom-right) {
  position: absolute;
  margin: 0;
}
[data-pin-to="screen"]:is(.pin-top-left, .pin-top, .pin-top-right, .pin-left, .pin-center, .pin-right,
    .pin-bottom-left, .pin-bottom, .pin-bottom-right) {
  position: fixed;
}

.pin-top-left     { top: var(--pin-y, 0px); left: var(--pin-x, 0px); }
.pin-top-right    { top: var(--pin-y, 0px); right: var(--pin-x, 0px); }
.pin-bottom-left  { bottom: var(--pin-y, 0px); left: var(--pin-x, 0px); }
.pin-bottom-right { bottom: var(--pin-y, 0px); right: var(--pin-x, 0px); }
.pin-top          { top: var(--pin-y, 0px); }
.pin-bottom       { bottom: var(--pin-y, 0px); }
.pin-left         { left: var(--pin-x, 0px); }
.pin-right        { right: var(--pin-x, 0px); }
:is(.pin-top, .pin-bottom, .pin-center) {
  left: var(--pin-x, 0px);
  right: calc(-1 * var(--pin-x, 0px));
  width: fit-content;
  margin-inline: auto;
}
:is(.pin-left, .pin-right, .pin-center) {
  top: var(--pin-y, 0px);
  bottom: calc(-1 * var(--pin-y, 0px));
  height: fit-content;
  margin-block: auto;
}
:is(.pin-top, .pin-bottom)[data-pin-stretch] {
  left: var(--pin-x, 0px); right: var(--pin-x, 0px); width: auto; margin-inline: 0;
}
:is(.pin-left, .pin-right)[data-pin-stretch] {
  top: var(--pin-y, 0px); bottom: var(--pin-y, 0px); height: auto; margin-block: 0;
}

[data-pin-sit="out"]:is(.pin-top-left, .pin-top, .pin-top-right) {
  top: auto; bottom: calc(100% + var(--pin-y, 0px));
}
[data-pin-sit="out"]:is(.pin-bottom-left, .pin-bottom, .pin-bottom-right) {
  bottom: auto; top: calc(100% + var(--pin-y, 0px));
}
[data-pin-sit="out"].pin-left  { left: auto; right: calc(100% + var(--pin-x, 0px)); }
[data-pin-sit="out"].pin-right { right: auto; left: calc(100% + var(--pin-x, 0px)); }

:where([data-pin-sit="edge"]):is(.pin-top-left, .pin-left, .pin-bottom-left)       { --_pin-tx: -50%; }
:where([data-pin-sit="edge"]):is(.pin-top-right, .pin-right, .pin-bottom-right)    { --_pin-tx: 50%; }
:where([data-pin-sit="edge"]):is(.pin-top-left, .pin-top, .pin-top-right)          { --_pin-ty: -50%; }
:where([data-pin-sit="edge"]):is(.pin-bottom-left, .pin-bottom, .pin-bottom-right) { --_pin-ty: 50%; }
:where([data-pin-sit="edge"]):is(.pin-top-left, .pin-top, .pin-top-right, .pin-left, .pin-right,
    .pin-bottom-left, .pin-bottom, .pin-bottom-right) {
  translate: var(--_pin-tx, 0px) var(--_pin-ty, 0px);
}

@media (max-width: 640px) {
  :root:not([data-device-view]) [data-pin-phone="flow"]:is(.pin-top-left, .pin-top, .pin-top-right, .pin-left,
      .pin-center, .pin-right, .pin-bottom-left, .pin-bottom, .pin-bottom-right) {
    position: relative; inset: auto; --_pin-tx: 0px; --_pin-ty: 0px;
  }
}
:root[data-device-view="phone"] [data-pin-phone="flow"]:is(.pin-top-left, .pin-top, .pin-top-right, .pin-left,
    .pin-center, .pin-right, .pin-bottom-left, .pin-bottom, .pin-bottom-right) {
  position: relative; inset: auto; --_pin-tx: 0px; --_pin-ty: 0px;
}

.breadcrumb { color: var(--muted, #888); }
.breadcrumb a { color: var(--link, #9cdcfe); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.img-silhouette,
.img-outline-only {
  display: inline-block;
  position: relative;
  background: var(--img-mask-color, #fff);
  -webkit-mask-image: var(--img-mask-src, none);
          mask-image: var(--img-mask-src, none);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: var(--img-mask-size, contain);
          mask-size: var(--img-mask-size, contain);
  min-width: 60px;
  min-height: 60px;
}

.img-silhouette.is-outline,
.img-silhouette.is-shrink,
.img-outline-only {
  -webkit-mask-image: var(--img-mask-src, none), var(--img-mask-src, none);
          mask-image: var(--img-mask-src, none), var(--img-mask-src, none);
  -webkit-mask-size:
    var(--img-mask-size, contain),
    calc(100% - var(--img-outline-size, 3px) * 2) calc(100% - var(--img-outline-size, 3px) * 2);
          mask-size:
    var(--img-mask-size, contain),
    calc(100% - var(--img-outline-size, 3px) * 2) calc(100% - var(--img-outline-size, 3px) * 2);
}

.img-silhouette.is-outline,
.img-outline-only {
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
}
img.img-outline-only { object-position: -99999px 0; }
.img-silhouette.is-shrink {
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.mask-alpha,
.mask-custom {
  -webkit-mask-image: var(--mask-url, none);
          mask-image: var(--mask-url, none);
  -webkit-mask-size: var(--mask-size, contain);
          mask-size: var(--mask-size, contain);
  -webkit-mask-position: var(--mask-position, center);
          mask-position: var(--mask-position, center);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.flex-row-gap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.flex-col-slot {
  flex: 1 1 0;
  min-width: min(200px, 100%);
  min-height: 100px;
  padding: 1px;
}

.container        { width: 100%; max-width: var(--container-max, 1200px); margin-inline: auto; padding-inline: 20px; }
.container-narrow { width: 100%; max-width: var(--container-max, 720px);  margin-inline: auto; padding-inline: 20px; }

.grid-auto { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 260px), 1fr)); }
.grid-2    { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3    { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4    { display: grid; gap: var(--gap, 20px); grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-wrap: wrap; gap: var(--gap, 20px); }
@media (max-width: 640px) {
  .stack         { flex-direction: column; }
  .stack-reverse { flex-direction: column-reverse; }
}

.split { display: grid; gap: var(--gap, 32px); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split-reverse > :first-child { order: 0; } }

@media (max-width: 640px) {
  :root:not([data-device-view]) :is(.hide-phone, .only-desktop, .only-tablet) { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  :root:not([data-device-view]) :is(.hide-tablet, .only-phone, .only-desktop) { display: none !important; }
}
@media (min-width: 1025px) {
  :root:not([data-device-view]) :is(.hide-desktop, .only-phone, .only-tablet) { display: none !important; }
}
:root[data-device-view="phone"] :is(.hide-phone, .only-desktop, .only-tablet),
:root[data-device-view="tablet"] :is(.hide-tablet, .only-phone, .only-desktop),
:root[data-device-view="desktop"] :is(.hide-desktop, .only-phone, .only-tablet) { display: none !important; }

@media (max-width: 640px) { .collapse-phone { flex-direction: column !important; } }
.center-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap, 16px); }
@media (max-width: 640px) { .full-phone { grid-column: 1 / -1; } }

.span-bleed.span-bleed--active {
  width: var(--sb-w) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: var(--sb-m) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.span-bleed.span-bleed--active[data-bleed-content="column"] {
  padding-left: var(--sb-pl) !important;
  padding-right: var(--sb-pr) !important;
}

.grid-2.grid-no-collapse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3.grid-no-collapse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4.grid-no-collapse { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-3.grid-no-collapse,
  .grid-4.grid-no-collapse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid-2.grid-no-collapse,
  .grid-3.grid-no-collapse,
  .grid-4.grid-no-collapse {
    grid-template-columns: repeat(var(--grid-phone-cols, 2), minmax(0, 1fr));
  }
}

.grid-2-keep {
  display: grid;
  gap: var(--gap, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3-keep {
  display: grid;
  gap: var(--gap, 20px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4-keep {
  display: grid;
  gap: var(--gap, 20px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grid-3-keep, .grid-4-keep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .grid-2-keep, .grid-3-keep, .grid-4-keep {
    grid-template-columns: repeat(var(--grid-phone-cols, 2), minmax(0, 1fr));
  }
}

@supports (animation-timeline: scroll()) {
  @keyframes reveal-bg {
    from { background-color: var(--reveal-bg-from, transparent); }
    to   { background-color: var(--reveal-bg, var(--sticky-bg, rgba(20, 20, 20, 0.85))); }
  }
  @keyframes reveal-shadow {
    from { box-shadow: var(--_ring, 0 0 #0000); }
    to   { box-shadow: var(--_ring, 0 0 #0000), var(--reveal-shadow, 0 4px 20px rgba(0, 0, 0, 0.35)); }
  }
  @keyframes reveal-blur {
    from { -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
    to   { -webkit-backdrop-filter: blur(var(--reveal-blur, 10px)); backdrop-filter: blur(var(--reveal-blur, 10px)); }
  }
  @keyframes reveal-fade-down {
    from { opacity: 0; translate: var(--_pin-tx, 0px) calc(var(--_pin-ty, 0px) - var(--reveal-shift, 8px)); }
    to   { opacity: 1; translate: var(--_pin-tx, 0px) var(--_pin-ty, 0px); }
  }
  @keyframes reveal-fade-up {
    from { opacity: 0; translate: var(--_pin-tx, 0px) calc(var(--_pin-ty, 0px) + var(--reveal-shift, 8px)); }
    to   { opacity: 1; translate: var(--_pin-tx, 0px) var(--_pin-ty, 0px); }
  }
  @keyframes reveal-shrink {
    from { padding-block: var(--sticky-pad-open, 24px); }
    to   { padding-block: var(--sticky-pad-scrolled, 12px); }
  }

  .auto-bg        { --_r-bg: reveal-bg; }
  .auto-shadow    { --_r-shadow: reveal-shadow; }
  .auto-blur      { --_r-blur: reveal-blur; }
  .auto-fade-down { --_r-fade: reveal-fade-down; }
  .auto-fade-up   { --_r-fade: reveal-fade-up; }
  .auto-shrink    { --_r-shrink: reveal-shrink; }

  :is(.auto-bg, .auto-shadow, .auto-blur, .auto-fade-down, .auto-fade-up, .auto-shrink) {
    animation-name:
      var(--_r-bg, none), var(--_r-shadow, none), var(--_r-blur, none),
      var(--_r-fade, none), var(--_r-shrink, none);
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: var(--reveal-start, 0px) calc(var(--reveal-start, 0px) + var(--reveal-at, 80px));
  }
  :is(.auto-fade-down, .auto-fade-up) { --reveal-at: 200px; }

  [data-reveal-trigger="view"]:is(.auto-bg, .auto-shadow, .auto-blur, .auto-fade-down, .auto-fade-up, .auto-shrink) {
    animation-timeline: view(block 0% var(--reveal-line, 40%));
    animation-range: entry 0% entry var(--reveal-view, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.auto-shadow, .auto-bg, .auto-blur, .auto-fade-down, .auto-fade-up, .auto-shrink) {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
  :is(.auto-shadow, .auto-bg, .auto-blur, .auto-fade-down, .auto-fade-up, .auto-shrink)[data-pin-sit="edge"] {
    translate: var(--_pin-tx, 0px) var(--_pin-ty, 0px) !important;
  }
}

.fill {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  object-fit: var(--fill-fit, cover);
  object-position: var(--fill-position, center);
}
.fill[data-fill-mode="overlay"] {
  position: absolute;
  inset: 0;
}
:where(:has(> .fill[data-fill-mode="overlay"])) {
  position: relative;
}
.clip-content {
  overflow: clip;
  isolation: isolate;
}
.aspect-box,
.aspect-square,
.aspect-video {
  min-width: 0;
  min-height: 0;
}