/* Generated from brand/brand.config.json. Do not edit this copy. */
@font-face {
  font-family: "Geist";
  src: url("./geist-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./geist-mono-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bv-font-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --bv-font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --bv-font-label: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bv-font-sans: var(--bv-font-body);
  --bv-font-mono: var(--bv-font-label);
  --bv-palette-deep-espresso: #140803;
  --bv-palette-deep-espresso01: #433935;
  --bv-palette-deep-espresso02: #726B68;
  --bv-palette-deep-espresso03: #A19C9A;
  --bv-palette-orange: #EB3A0B;
  --bv-palette-orange01: #EF613C;
  --bv-palette-orange02: #F3896D;
  --bv-palette-orange03: #F7B09D;
  --bv-palette-warm-sand: #E9DCCB;
  --bv-palette-warm-sand01: #EDE3D5;
  --bv-palette-warm-sand02: #F2EAE0;
  --bv-palette-warm-sand03: #F6F1EA;
  --bv-palette-white: #FFFEFE;
  --bv-color-ink: #140803;
  --bv-color-ink-soft: #433935;
  --bv-color-paper: #F6F1EA;
  --bv-color-paper-raised: #FFFEFE;
  --bv-color-paper-mid: #F2EAE0;
  --bv-color-paper-deep: #EDE3D5;
  --bv-color-paper-sunk: #E9DCCB;
  --bv-color-muted: #726B68;
  --bv-color-muted-deep: #433935;
  --bv-color-line: rgb(20 8 3 / 18%);
  --bv-color-line-strong: rgb(20 8 3 / 48%);
  --bv-color-line-inverse: rgb(246 241 234 / 22%);
  --bv-color-muted-inverse: rgb(246 241 234 / 52%);
  --bv-color-accent: #BC2F09;
  --bv-color-accent-hover: #CB330A;
  --bv-color-accent-on-dark: #EB3A0B;
  --bv-color-accent-contrast: #FFFEFE;
  --bv-color-accent-soft: #F7B09D;
  --bv-color-positive: #315d48;
  --bv-color-positive-soft: #e1ebe3;
  --bv-color-negative: #a6342b;
  --bv-color-negative-soft: #f0dfd9;
  --bv-color-warning: #a16b22;
  --bv-color-focus: #BC2F09;
}

html:root :where(h1, h2, h3, h4) {
  font-family: var(--bv-font-display);
  font-synthesis: none;
  letter-spacing: -0.015em;
}

html:root img.brand-lockup {
  display: block;
  width: var(--bv-lockup-width, 160px);
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  transform: none;
  transform-origin: center;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Headers carry the symbol alone. The wordmark is condensed identity lettering
   and clashes with the live grotesque when both are visible at once, so the
   full lockup is reserved for the footer and for off-site assets. */
/* Deliberately low specificity: each surface already tunes its own symbol size,
   and those rules load after this one and should win. This is only the default
   for a surface that sets none. */
img.brand-symbol {
  display: block;
  width: var(--bv-symbol-size, 34px);
  height: var(--bv-symbol-size, 34px);
  flex: 0 0 auto;
  object-fit: contain;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

html:root .home-footer__mark {
  --bv-lockup-width: 190px;
}

html:root :where(.home-brand, .case-brand, .fit-return__brand, .reference-brand, .mock-brand, .cal-brand, .wordmark, .logo-test-brand, .home-footer__mark):hover :is(img.brand-lockup, img.brand-symbol),
html:root :where(.home-brand, .case-brand, .fit-return__brand, .reference-brand, .mock-brand, .cal-brand, .wordmark, .logo-test-brand, .home-footer__mark):focus-visible :is(img.brand-lockup, img.brand-symbol) {
  opacity: 0.74;
  transform: none;
}

@media (max-width: 640px) {
  html:root :where(.home-brand, .case-brand, .fit-return__brand, .reference-brand, .mock-brand, .logo-test-brand) {
    --bv-symbol-size: 30px;
  }

  html:root :where(.wordmark, .cal-brand) {
    --bv-symbol-size: 28px;
  }

  html:root .home-footer__mark {
    --bv-lockup-width: 158px;
  }
}