/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* ---- Layout container — max 1720px, centered ---- */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 24px;
}

/* full-bleed section wrappers add their own background; content uses .container */

/* ---- Headings / type helpers ---- */
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
}

.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}

.accent {
  color: var(--c-primary);
}

/* the colored last phrase in headings */
.text-gray {
  color: var(--c-text-gray);
}

.on-dark {
  color: var(--c-cream);
}

/* ---- Eyebrow pill (teal outline + dot + label) ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  /* hug content inside stretch-aligned flex columns */
  gap: 10px;
  padding: 13px 28px;
  border: 1px solid var(--c-secondary);
  border-radius: var(--r-pill);
  color: var(--c-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: normal;
  /* Figma: pill height 53px (py13 + 18px@normal) */
  text-transform: uppercase;
  white-space: nowrap;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-secondary);
  flex: none;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-button);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: normal;
  /* Figma: leading normal → 53px (py13) / 51px (py12) tall */
  text-transform: uppercase;
  white-space: nowrap;
}

.btn--primary {
  /* rust button, white label */
  background: var(--c-primary);
  color: var(--c-white);
  padding: 13px 28px;
}

.btn--nav {
  /* navbar ENQUIRE (wider padding) */
  background: var(--c-primary);
  color: var(--c-white);
  padding: 13px 38px;
}

.btn--cream {
  /* form submit: cream bg, dark-red label */
  background: var(--c-cream);
  color: var(--c-btn-text-dark);
  padding: 12px 28px;
}

/* ---- Icon badge (circular outline + glyph) ---- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid currentColor;
  /* color set by accent class */
  border-radius: var(--r-pill);
  flex: none;
}

.icon-badge svg {
  width: 32px;
  height: 32px;
}

.icon-badge--sm {
  width: 50px;
  height: 50px;
}

.icon-badge--sm svg {
  width: 30px;
  height: 30px;
}

/* accent colors for badges/labels (highlight pills + features) */
.accent-rust {
  color: var(--c-hl-rust);
}

.accent-teal {
  color: var(--c-hl-teal);
}

.accent-orange {
  color: var(--c-hl-orange);
}

.accent-olive {
  color: var(--c-hl-olive);
}

/* thin rule used inside cards / between paragraphs */
.divider-h {
  height: 0;
  border: 0;
  border-top: 1px solid currentColor;
  width: 100%;
}

.divider-v {
  width: 0;
  border: 0;
  border-left: 1px solid var(--c-divider-rose);
  align-self: stretch;
}