/* eb-site.css: the design tokens (design.md, Quick Start), the reset, the
   container and grid, the buttons, the type roles and the band surfaces
   every page area builds on. Page areas add their own eb-*.css on top and
   never redefine these names. */

:root {
  --color-eibach-red: #ED1C24;
  --color-red-pressed: #C61017;
  --color-red-rule: #E61118;
  --color-charcoal: #2C2C2C;
  --color-ink: #131313;
  --color-pitch: #181818;
  --color-snow: #FFFFFF;
  --color-fog: #F2F2F2;
  --color-header-grey: #F1F1F1;
  --color-search-field: #F4F4F4;
  --color-search-line: #D4D4D4;
  --color-silver: #D2D2D2;
  --color-menu-line: #DEDEDE;
  --color-topbar-line: #C4C4C4;
  --color-ash: #969696;
  --color-muted: #AAAAAA;
  --color-nav-faded: rgba(44, 44, 44, 0.5);
  --color-scrim: rgba(0, 0, 0, 0.6);

  --font-sans: 'Plus Jakarta Sans', 'Gilroy', Helvetica, Arial, sans-serif;

  --text-eyebrow: 11px;  --leading-eyebrow: 1.2;
  --text-caption: 12px;  --leading-caption: 1.55;
  --text-nav: 14px;      --leading-nav: 1.2;
  --text-body: 16px;     --leading-body: 1.3;  --leading-body-feature: 1.5;
  --text-lead: 18px;     --leading-lead: 1.4;
  --text-heading-sm: 24px; --leading-heading-sm: 1.2;
  --text-heading: 32px;    --leading-heading: 1.15;
  --text-heading-lg: 36px; --leading-heading-lg: 1.15;
  --text-display: 40px;    --leading-display: 1.1;
  --text-display-xl: 64px; --leading-display-xl: 1.05;
  --tracking-base: 0;
  --tracking-eyebrow-wide: 0.1em;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 800; /* the variable file tops out at 800 */

  --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px;
  --spacing-80: 80px; --spacing-96: 96px; --spacing-112: 112px;

  --page-max-width: 1320px;
  --gutter: 16px;
  --section-gap: 64px;
  --group-gap: 96px;
  --element-gap: 16px;

  --radius-none: 0px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-circle: 100px;
  --radius-buttons: 3px; --radius-tabs: 2px; --radius-cards: 0px; --radius-badges: 0px;
  --radius-inputs: 0px; --radius-menu-card: 4px;

  --shadow-header: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.16);
  --shadow-dropdown: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

  --surface-page-base: #FFFFFF;
  --surface-fog-band: #F2F2F2;
  --surface-header: #F1F1F1;
  --surface-charcoal-band: #2C2C2C;
  --surface-hero-base: #181818;
  --surface-scrim: rgba(0, 0, 0, 0.6);

  --btn-padding-lg: 17px 34px;
  --btn-padding-outline-lg: 16px 34px;
  --btn-min-width-lg: 210px;
  --btn-min-width-sm: 44px;

  --select-height: 50px;
  --search-line-height: 44px;
}

/* ---- fonts: one variable file (static/fonts/plus-jakarta-sans.woff2, weights 200 to 800).
   Plus Jakarta Sans is the open stand-in for Gilroy, the face kwsuspensions.com uses; to move to
   Gilroy itself, drop its licensed files in and point this face (or one per weight) at them. ---- */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/plus-jakarta-sans.woff2') format('woff2'); }

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; letter-spacing: var(--tracking-base); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page-base);
  color: var(--color-charcoal);
  font: var(--font-weight-regular) var(--text-body) / var(--leading-body) var(--font-sans);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-eibach-red); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

/* ---- container and grid: Bootstrap 5's widths, no framework ---- */
.container { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 960px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-24); }
.col-12 { grid-column: span 12; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
@media (max-width: 991.98px) { .col-md-6 { grid-column: span 6; } .col-md-12 { grid-column: span 12; } }
@media (max-width: 767.98px) { .col-sm-6 { grid-column: span 6; } .col-sm-12 { grid-column: span 12; } }

/* ---- type roles ---- */
.eyebrow { font-size: var(--text-eyebrow); line-height: var(--leading-eyebrow); font-weight: var(--font-weight-extrabold); text-transform: uppercase; color: var(--color-eibach-red); }
.eyebrow--wide { letter-spacing: var(--tracking-eyebrow-wide); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); }
.heading-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--font-weight-bold); }
.heading { font-size: var(--text-heading); line-height: var(--leading-heading); font-weight: var(--font-weight-extrabold); }
.heading-lg { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); font-weight: var(--font-weight-black); }
.display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--font-weight-black); text-transform: uppercase; }
@media (min-width: 1280px) { .display--xl { font-size: var(--text-display-xl); line-height: var(--leading-display-xl); } }
.highlight { color: var(--color-eibach-red); }
.upper { text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- bands: full-bleed surfaces, content in a .container ---- */
.band { padding: var(--section-gap) 0; background: var(--surface-page-base); }
.band--fog { background: var(--surface-fog-band); }
.band--charcoal { background: var(--surface-charcoal-band); color: var(--color-snow); }
.band--charcoal a { color: var(--color-snow); }
.band--pitch { background: var(--surface-hero-base); color: var(--color-snow); }
.band--group { padding: var(--group-gap) 0; }
.section-intro { text-align: center; font-size: var(--text-heading-sm); font-weight: var(--font-weight-extrabold); line-height: var(--leading-heading-sm); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  padding: var(--btn-padding-lg); min-width: var(--btn-min-width-lg);
  border: 0; border-radius: var(--radius-buttons); cursor: pointer;
  background: var(--color-eibach-red); color: var(--color-snow);
  font-size: var(--text-body); font-weight: var(--font-weight-bold); line-height: 1; text-transform: uppercase; text-decoration: none;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}
.btn:hover { background: var(--color-red-pressed); color: #E6E6E6; text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-muted); color: var(--color-snow); cursor: not-allowed; }
.btn--sm { min-width: var(--btn-min-width-sm); }
.btn--block { display: flex; width: 100%; }
.btn--dark { background: var(--color-charcoal); color: var(--color-snow); }
.btn--dark:hover { background: var(--color-ink); color: var(--color-snow); }
.btn--light { background: var(--color-fog); color: var(--color-charcoal); }
.btn--light:hover { background: #D9D9D9; color: var(--color-ink); }
.btn--white { background: var(--color-snow); color: var(--color-eibach-red); }
.btn--white:hover { background: #D9D9D9; color: var(--color-ink); }
.btn--outline { background: transparent; padding: var(--btn-padding-outline-lg); border: 1px solid var(--color-charcoal); color: var(--color-charcoal); }
.btn--outline:hover { background: var(--color-charcoal); color: var(--color-snow); }
.btn--outline-white { background: transparent; padding: var(--btn-padding-outline-lg); border: 1px solid var(--color-snow); color: var(--color-snow); }
.btn--outline-white:hover { background: var(--color-snow); color: var(--color-charcoal); }
.btn--outline-red { background: transparent; padding: var(--btn-padding-outline-lg); border: 1px solid var(--color-eibach-red); color: var(--color-eibach-red); }
.btn--outline-red:hover { background: var(--color-eibach-red); color: var(--color-snow); }
.btn--text { background: none; padding: 0; min-width: 0; border: 0; color: var(--color-eibach-red); font-weight: var(--font-weight-regular); text-transform: none; }
.btn--text:hover { background: none; color: var(--color-red-pressed); text-decoration: underline; }

/* ---- form controls: square, 1px, no radius ---- */
.select, .input {
  width: 100%; height: var(--select-height); padding: 0 var(--spacing-8);
  background: var(--color-snow); border: 1px solid var(--color-muted); border-radius: var(--radius-inputs);
  color: var(--color-charcoal); font-weight: var(--font-weight-black);
}
.select:focus, .input:focus { outline: 0; border-color: #313131; }
.select:disabled, .input:disabled { color: var(--color-ash); font-weight: var(--font-weight-regular); }
.input--text { font-weight: var(--font-weight-regular); border-radius: var(--radius-md); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-eibach-red); }

/* ---- badge (rare) ---- */
.badge { display: inline-block; padding: var(--spacing-4) var(--spacing-8); background: var(--color-eibach-red); color: var(--color-snow); font-size: var(--text-eyebrow); font-weight: var(--font-weight-extrabold); line-height: var(--leading-eyebrow); text-transform: uppercase; border-radius: var(--radius-badges); }

/* ---- breadcrumb ---- */
.crumbs { padding: var(--spacing-16) 0; font-size: var(--text-caption); color: var(--color-ash); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.crumbs a { color: var(--color-charcoal); }
.crumbs li + li::before { content: "/"; margin-right: var(--spacing-8); color: var(--color-muted); }

/* ---- responsive type ---- */
@media (max-width: 767.98px) {
  .heading { font-size: var(--text-heading-sm); }
  .heading-lg { font-size: var(--text-heading); }
  .display { font-size: var(--text-heading); }
}