/* KITAVI components. Load tokens.css first. */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/be-vietnam-pro-extrabold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

.ds-page {
  margin: 0;
  color: var(--ds-ink);
  background: var(--ds-canvas);
  font: 400 var(--ds-type-body)/var(--ds-leading-body) var(--ds-font);
  font-synthesis: none;
  overflow-wrap: anywhere;
}

.ds-page *, .ds-page *::before, .ds-page *::after { box-sizing: border-box; }
.ds-page :where(h1, h2, h3, h4, p, figure) { margin: 0; }
.ds-page :where(h1, h2, h3, h4, .ds-type-h1, .ds-type-h2, .ds-type-h3, .ds-type-h4) {
  color: inherit;
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-heading);
}
.ds-page :where(h1, .ds-type-h1) { font-size: var(--ds-type-h1); font-weight: 800; }
.ds-page :where(h2, .ds-type-h2) { font-size: var(--ds-type-h2); font-weight: 800; }
.ds-page :where(h3, .ds-type-h3) { font-size: var(--ds-type-h3); font-weight: 700; }
.ds-page :where(h4, .ds-type-h4) { font-size: var(--ds-type-h4); font-weight: 700; }
.ds-page .ds-type-display {
  font-size: var(--ds-type-display);
  font-weight: 800;
  line-height: var(--ds-leading-display);
  letter-spacing: var(--ds-tracking-tight);
  text-wrap: balance;
}
.ds-page .ds-type-body { font-size: var(--ds-type-body); }
.ds-page .ds-type-caption { font-size: var(--ds-type-caption); }
.ds-page :where(img, svg) { display: block; max-inline-size: 100%; }
.ds-page img { block-size: auto; }
.ds-page :where(button, input, select, textarea) { font: inherit; }
.ds-page :where(a) { color: inherit; text-underline-offset: .22em; }
.ds-page [hidden] { display: none !important; }
.ds-page :focus-visible {
  outline: 3px solid var(--ds-local-focus, var(--ds-focus));
  outline-offset: 3px;
}

.ds-container { width: min(var(--ds-container), calc(100% - 2 * var(--ds-gutter))); margin-inline: auto; }
.ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--ds-grid-columns), minmax(0, 1fr));
  gap: var(--ds-grid-gap);
}
.ds-grid > * { min-inline-size: 0; }
.ds-col-12 { grid-column: span 12; }
.ds-col-8 { grid-column: span 8; }
.ds-col-6 { grid-column: span 6; }
.ds-col-4 { grid-column: span 4; }
.ds-col-3 { grid-column: span 3; }

.ds-skip {
  position: fixed;
  z-index: 20;
  inset: var(--ds-space-2) auto auto var(--ds-space-2);
  padding: var(--ds-space-2);
  transform: translateY(-200%);
  color: var(--ds-neutral-900);
  background: var(--ds-white);
  border-radius: var(--ds-radius-sm);
}
.ds-skip:focus { transform: none; }

.ds-nav {
  --ds-local-focus: var(--ds-focus-on-dark);
  position: sticky;
  z-index: 4;
  inset-block-start: 0;
  color: var(--ds-cream);
  background: var(--ds-neutral-800);
  border-block-end: 1px solid var(--ds-neutral-600);
}
.ds-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  padding-block: var(--ds-space-2);
}
.ds-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--ds-space-1); text-decoration: none; }
.ds-brand img { inline-size: clamp(6.75rem, 14vw, 10rem); }
.ds-nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem var(--ds-space-3); }
.ds-nav-links :where(a) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--ds-touch-target);
  color: var(--ds-cream);
  font-size: var(--ds-type-caption);
  font-weight: 600;
  text-decoration: none;
}
.ds-nav-links :where(a:hover, a[aria-current]) { text-decoration: underline 2px var(--ds-action); }

.ds-hero {
  --ds-local-focus: var(--ds-focus-on-dark);
  padding-block: clamp(var(--ds-space-6), 8vw, var(--ds-space-12));
  color: var(--ds-cream);
  background: var(--ds-neutral-700);
  border-block-end: .25rem solid var(--ds-action);
}
.ds-hero .ds-grid { align-items: center; }
.ds-hero .ds-lead { color: var(--ds-neutral-100); }
.ds-hero-figure {
  overflow: hidden;
  border: 1px solid var(--ds-neutral-600);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-neutral-800);
  box-shadow: var(--ds-shadow-3);
}
.ds-hero-figure img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ds-hero-figure figcaption { padding: var(--ds-space-2); color: var(--ds-neutral-100); font-size: var(--ds-type-caption); }
.ds-section { padding-block: clamp(var(--ds-space-6), 7vw, var(--ds-space-12)); }
.ds-page :where([id]) { scroll-margin-block-start: 7rem; }
.ds-section + .ds-section { border-block-start: 1px solid var(--ds-line); }
.ds-section--tint { background: var(--ds-primary-50); }
.ds-section--dark, .ds-panel--dark {
  --ds-local-focus: var(--ds-focus-on-dark);
  color: var(--ds-cream);
  background: var(--ds-neutral-700);
}
.ds-section-intro { display: grid; gap: var(--ds-space-1); margin-block-end: clamp(var(--ds-space-3), 4vw, var(--ds-space-5)); }
.ds-section-intro p, .ds-lead { max-inline-size: 62ch; }
.ds-lead { margin-block-start: var(--ds-space-2); }
.ds-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin-block-end: var(--ds-space-1);
  color: inherit;
  font-size: var(--ds-type-caption);
  font-weight: 700;
  letter-spacing: var(--ds-tracking-label);
  text-transform: uppercase;
}
.ds-eyebrow::before { content: ""; flex: none; inline-size: 2rem; block-size: .1875rem; background: var(--ds-action); }
.ds-muted { color: var(--ds-muted); }
:is(.ds-section--dark, .ds-panel--dark) .ds-muted { color: var(--ds-neutral-100); }
.ds-stack { display: grid; align-content: start; gap: var(--ds-space-2); }
.ds-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-2); }
.ds-hero .ds-row { margin-block-start: var(--ds-space-3); }
.ds-panel {
  --ds-local-focus: var(--ds-focus);
  min-inline-size: 0;
  padding: clamp(var(--ds-space-2), 3vw, var(--ds-space-4));
  color: var(--ds-ink);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-1);
}
.ds-panel.ds-panel--dark { --ds-local-focus: var(--ds-focus-on-dark); color: var(--ds-cream); background: var(--ds-neutral-700); border-color: var(--ds-neutral-600); }

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.75rem), 1fr));
  gap: var(--ds-space-1);
}
.ds-swatch { min-inline-size: 0; overflow: hidden; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }
.ds-swatch-color { display: block; min-block-size: 3.25rem; background: var(--swatch, var(--ds-action)); }
.ds-swatch-label { display: block; padding: var(--ds-space-1); color: var(--ds-ink); font-size: var(--ds-type-caption); line-height: 1.4; }
.ds-grid-sample { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2px, 1vw, var(--ds-space-1)); }
.ds-grid-sample > * { display: grid; place-items: center; min-block-size: 3rem; color: var(--ds-cream); background: var(--ds-neutral-700); border-radius: var(--ds-radius-sm); font-size: .75rem; }
.ds-scale { display: grid; gap: var(--ds-space-1); }
.ds-scale-mark { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-1); min-block-size: 2rem; }
.ds-scale-mark::after { content: ""; inline-size: min(100%, var(--sample-size, 2rem)); block-size: var(--ds-space-1); background: var(--ds-action); border-radius: var(--ds-radius-pill); }
.ds-shadow-sample { padding: var(--ds-space-2); background: var(--ds-white); border-radius: var(--ds-radius-md); box-shadow: var(--sample-shadow, var(--ds-shadow-1)); }
.ds-type-sample { display: grid; gap: var(--ds-space-1); padding-block: var(--ds-space-2); border-block-end: 1px solid var(--ds-line); }

.ds-button {
  --ds-button-bg: var(--ds-action);
  --ds-button-ink: var(--ds-on-action);
  --ds-button-border: transparent;
  --ds-button-hover: var(--ds-action-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
  min-block-size: var(--ds-touch-target);
  padding: .625rem var(--ds-space-2);
  border: 1px solid var(--ds-button-border);
  border-radius: var(--ds-radius-md);
  color: var(--ds-button-ink);
  background: var(--ds-button-bg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ds-motion-fast) var(--ds-ease), background-color var(--ds-motion-fast) var(--ds-ease), border-color var(--ds-motion-fast) var(--ds-ease);
}
.ds-button--primary { --ds-button-bg: var(--ds-action); }
.ds-button:hover { background: var(--ds-button-hover); }
.ds-button:active { transform: translateY(1px); }
.ds-button svg { flex: 0 0 auto; inline-size: 1.25rem; block-size: 1.25rem; }
.ds-button--secondary, .ds-button--icon {
  --ds-button-bg: var(--ds-white);
  --ds-button-ink: var(--ds-ink);
  --ds-button-border: var(--ds-control-line);
  --ds-button-hover: var(--ds-neutral-100);
}
.ds-button--ghost {
  --ds-button-bg: transparent;
  --ds-button-ink: currentColor;
  --ds-button-hover: var(--ds-primary-100);
  color: inherit;
  text-decoration: underline;
}
:is(.ds-hero, .ds-section--dark, .ds-panel--dark) .ds-button--ghost:hover { color: var(--ds-neutral-900); }
.ds-button--icon { inline-size: var(--ds-touch-target); padding: 0; }
.ds-button:disabled, .ds-button[aria-disabled="true"] {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.ds-card {
  --ds-local-focus: var(--ds-focus);
  position: relative;
  display: grid;
  align-content: start;
  overflow: hidden;
  color: var(--ds-ink);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-1);
  transition: box-shadow var(--ds-motion-standard) var(--ds-ease);
}
.ds-card:focus-within, .ds-card:hover { box-shadow: var(--ds-shadow-2); }
.ds-card-media { position: relative; overflow: hidden; }
.ds-card-media img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: scale var(--ds-motion-slow) var(--ds-ease);
}
.ds-card--service .ds-card-media img { aspect-ratio: 16 / 10; }
.ds-card--project .ds-card-media img { aspect-ratio: 16 / 11; }
@media (hover: hover) {
  .ds-card:hover .ds-card-media img { scale: 1.025; }
}
.ds-card-media > .ds-badge { position: absolute; inset: var(--ds-space-1) auto auto var(--ds-space-1); }
.ds-card-body { display: grid; align-content: start; justify-items: start; gap: var(--ds-space-1); padding: var(--ds-space-3); }
.ds-card-body h3 { font-size: var(--ds-type-h4); }
.ds-card-body > a:not(.ds-button) { font-weight: 700; }

.ds-badge {
  --ds-badge-bg: var(--ds-neutral-100);
  --ds-badge-ink: var(--ds-neutral-800);
  --ds-badge-line: var(--ds-neutral-300);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border: 1px solid var(--ds-badge-line);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-badge-ink);
  background: var(--ds-badge-bg);
  font-size: var(--ds-type-caption);
  font-weight: 700;
  line-height: 1.35;
}
.ds-badge--success { --ds-badge-bg: var(--ds-success-bg); --ds-badge-ink: var(--ds-success-ink); --ds-badge-line: var(--ds-success-border); }
.ds-badge--warning { --ds-badge-bg: var(--ds-warning-bg); --ds-badge-ink: var(--ds-warning-ink); --ds-badge-line: var(--ds-warning-border); }
.ds-badge--error { --ds-badge-bg: var(--ds-error-bg); --ds-badge-ink: var(--ds-error-ink); --ds-badge-line: var(--ds-error-border); }
.ds-badge svg { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; }

.ds-table-wrap { max-inline-size: 100%; overflow-x: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }
.ds-table { inline-size: 100%; border-collapse: collapse; color: var(--ds-ink); background: var(--ds-white); font-size: .9375rem; text-align: start; }
.ds-table caption { padding: var(--ds-space-2); font-weight: 700; text-align: start; }
.ds-table :is(th, td) { padding: .75rem var(--ds-space-2); text-align: start; vertical-align: top; }
.ds-table thead th { color: var(--ds-cream); background: var(--ds-neutral-700); }
.ds-table tbody tr + tr { border-block-start: 1px solid var(--ds-line); }
.ds-table tbody tr:nth-child(even) { background: var(--ds-primary-50); }
.ds-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }

.ds-form { display: grid; gap: var(--ds-space-2); }
.ds-field { display: grid; gap: var(--ds-space-1); min-inline-size: 0; }
.ds-field label, label.ds-field { font-weight: 700; }
.ds-field :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  inline-size: 100%;
  min-block-size: var(--ds-touch-target);
  padding: .625rem var(--ds-space-1);
  border: 1px solid var(--ds-control-line);
  border-radius: var(--ds-radius-md);
  color: var(--ds-ink);
  background: var(--ds-white);
  font-size: 1rem;
  font-weight: 400;
}
.ds-field textarea { resize: vertical; min-block-size: 6rem; }
.ds-field :is(input, textarea)::placeholder { color: var(--ds-muted); }
.ds-field :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--ds-error-border); }
.ds-field-note { color: var(--ds-muted); font-size: var(--ds-type-caption); font-weight: 400; }
.ds-form-error { color: var(--ds-error-ink); font-size: var(--ds-type-caption); font-weight: 700; }

.ds-accordion { display: grid; gap: var(--ds-space-1); }
.ds-accordion details, details.ds-accordion {
  color: var(--ds-ink);
  background: var(--ds-white);
  border: 1px solid var(--ds-control-line);
  border-radius: var(--ds-radius-md);
}
.ds-accordion summary {
  min-block-size: var(--ds-touch-target);
  padding: .75rem var(--ds-space-2);
  border-radius: var(--ds-radius-md);
  font-weight: 700;
  cursor: pointer;
}
.ds-accordion details[open] > :not(summary), details.ds-accordion[open] > :not(summary) { margin: 0; padding: 0 var(--ds-space-2) var(--ds-space-2); }

.ds-tabs { min-inline-size: 0; }
.ds-tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); margin-block-end: var(--ds-space-2); }
.ds-tabs [role="tab"] {
  min-block-size: var(--ds-touch-target);
  padding: var(--ds-space-1) var(--ds-space-2);
  border: 1px solid var(--ds-control-line);
  border-radius: var(--ds-radius-md);
  color: var(--ds-ink);
  background: var(--ds-white);
  font-weight: 700;
  cursor: pointer;
}
.ds-tabs [role="tab"][aria-selected="true"] { color: var(--ds-cream); background: var(--ds-neutral-700); border-color: var(--ds-neutral-700); }
.ds-tabs [role="tabpanel"] { padding: var(--ds-space-2); color: var(--ds-ink); background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); }

.ds-compare {
  --compare-position: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 11;
  background: var(--ds-neutral-800);
  border-radius: var(--ds-radius-lg);
}
.ds-compare :is(.ds-compare-before, .ds-compare-after) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ds-compare-after { clip-path: inset(0 0 0 var(--compare-position)); }
.ds-compare-label {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--ds-space-1);
  padding: .25rem .625rem;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-neutral-900);
  background: var(--ds-white);
  font-size: var(--ds-type-caption);
  font-weight: 700;
  pointer-events: none;
}
.ds-compare-label--before { inset-inline-start: var(--ds-space-1); }
.ds-compare-label--after { inset-inline-end: var(--ds-space-1); }
.ds-compare-divider {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: var(--compare-position);
  inline-size: 2px;
  color: var(--ds-neutral-900);
  background: var(--ds-white);
  box-shadow: 0 0 0 1px var(--ds-neutral-900);
  transform: translateX(-50%);
  pointer-events: none;
}
.ds-compare-divider::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: var(--ds-touch-target);
  block-size: var(--ds-touch-target);
  border: 2px solid var(--ds-neutral-900);
  border-radius: 50%;
  background: var(--ds-white);
  transform: translate(-50%, -50%);
}
.ds-compare-divider svg { position: absolute; z-index: 1; inset: 50% auto auto 50%; inline-size: 1.375rem; block-size: 1.375rem; transform: translate(-50%, -50%); }
.ds-compare-range {
  appearance: none;
  position: absolute;
  z-index: 3;
  inset-block: 0;
  inset-inline-start: calc(var(--ds-touch-target) / -2);
  inline-size: calc(100% + var(--ds-touch-target));
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.ds-compare-range::-webkit-slider-thumb { appearance: none; inline-size: var(--ds-touch-target); block-size: var(--ds-touch-target); }
.ds-compare-range::-moz-range-thumb { inline-size: var(--ds-touch-target); block-size: var(--ds-touch-target); border: 0; }
.ds-compare:has(.ds-compare-range:focus-visible) .ds-compare-divider::after { box-shadow: 0 0 0 3px var(--ds-white), 0 0 0 6px var(--ds-neutral-900); }
.ds-compare:has(.ds-compare-range:focus-visible) { outline: 3px solid var(--ds-focus); outline-offset: 3px; }

.ds-lightbox {
  --ds-local-focus: var(--ds-focus);
  max-inline-size: min(66rem, calc(100vw - 2 * var(--ds-space-2)));
  max-block-size: calc(100dvh - 2 * var(--ds-space-2));
  padding: var(--ds-space-2);
  border: 1px solid var(--ds-control-line);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-ink);
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-3);
}
.ds-lightbox::backdrop { background: rgb(28 32 35 / .82); }
.ds-lightbox img { inline-size: 100%; max-block-size: 72dvh; object-fit: contain; border-radius: var(--ds-radius-md); }
.ds-lightbox figcaption { padding-block: var(--ds-space-1); font-size: var(--ds-type-caption); }
.ds-lightbox .ds-panel { padding: 0; border: 0; box-shadow: none; }
.ds-lightbox .ds-row { justify-content: space-between; }
.ds-lightbox h2 { font-size: var(--ds-type-h3); }

.ds-toast {
  --ds-local-focus: var(--ds-focus);
  position: fixed;
  z-index: 8;
  inset-inline-end: var(--ds-space-2);
  inset-block-end: var(--ds-space-2);
  display: flex;
  align-items: start;
  gap: var(--ds-space-1);
  inline-size: max-content;
  max-inline-size: min(28rem, calc(100% - 2 * var(--ds-space-2)));
  padding: var(--ds-space-2);
  border: 1px solid var(--ds-control-line);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-ink);
  background: var(--ds-white);
  box-shadow: var(--ds-shadow-3);
}
.ds-toast--success { color: var(--ds-success-ink); background: var(--ds-success-bg); border-color: var(--ds-success-border); }
.ds-toast--error { color: var(--ds-error-ink); background: var(--ds-error-bg); border-color: var(--ds-error-border); }
.ds-toast-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ds-footer { padding-block: var(--ds-space-4); color: var(--ds-cream); background: var(--ds-neutral-800); }
.ds-footer a { --ds-local-focus: var(--ds-focus-on-dark); }
.ds-mobile-bar {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-1);
  padding: var(--ds-space-1);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-2);
}
.ds-mobile-bar > * { min-inline-size: 0; }
.ds-mobile-bar > .ds-button { padding-inline: .25rem; }

@media (max-width: 56rem) {
  .ds-hero .ds-grid > * { grid-column: 1 / -1; }
  .ds-hero-figure { max-inline-size: 42rem; }
  .ds-col-3 { grid-column: span 6; }
}

@media (max-width: 42rem) {
  .ds-page { padding-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .ds-mobile-bar {
    position: fixed;
    z-index: 6;
    inset: auto 0 0;
    display: grid;
    gap: .375rem;
    padding-block-end: calc(var(--ds-space-1) + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }
  .ds-toast { inset-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
  .ds-nav { position: static; }
  .ds-nav-inner { align-items: start; flex-direction: column; gap: var(--ds-space-1); }
  .ds-nav-links { column-gap: var(--ds-space-2); }
  .ds-col-8, .ds-col-6, .ds-col-4, .ds-col-3 { grid-column: 1 / -1; }
  .ds-page :where([id]) { scroll-margin-block-start: var(--ds-space-2); }
  html:has(.ds-page) { scroll-padding-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
  .ds-card-body { padding: var(--ds-space-2); }
  .ds-mobile-bar .ds-button { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-button:active { transform: none; }
  .ds-card:hover .ds-card-media img { scale: 1; }
}

@media (forced-colors: active) {
  .ds-compare:has(.ds-compare-range:focus-visible) { outline-color: Highlight; }
  .ds-compare-divider, .ds-compare-divider::after { background: Canvas; border-color: ButtonText; }
}