/*
 * Builder Prime — Style Template
 * Reverse-engineered from builderprime.com (Webflow, published 2026-02-02).
 * Drop this into any presentation/webpage/doc generator. Fonts are loaded
 * locally from ./fonts/. If you can't ship fonts, swap the @font-face blocks
 * for Google Fonts fallbacks (see STYLE-GUIDE.md).
 */

/* ---------- Fonts (local WOFF2) ---------- */

@font-face {
  font-family: "nexa-rust-sans-black-2";
  src: url("./fonts/nexa-rust-sans-black-2-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "nexa-rust-sans-black-shad-2";
  src: url("./fonts/nexa-rust-sans-black-shad-2-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "figtree";
  src: url("./fonts/figtree-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "figtree";
  src: url("./fonts/figtree-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "figtree";
  src: url("./fonts/figtree-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "figtree";
  src: url("./fonts/figtree-700i.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face { font-family: "liebling"; src: url("./fonts/liebling-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "liebling"; src: url("./fonts/liebling-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "liebling"; src: url("./fonts/liebling-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "liebling"; src: url("./fonts/liebling-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "liebling"; src: url("./fonts/liebling-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "liebling"; src: url("./fonts/liebling-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "liebling"; src: url("./fonts/liebling-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- Brand tokens ---------- */

:root {
  /* Palette */
  --color-eggshel:   #fffcf2;
  --color-tar:       #201614;
  --color-hickory:   #502c27;
  --color-midnight:  #2a2b2d;
  --color-blaze:     #ff7e00;
  --color-canary:    #fac43b;
  --color-glow:      #eff1b4;
  --color-denim:     #5f7497;
  --color-denim-alt: #61779b;
  --color-rust:      #ba452a;
  --color-olive:     #6b650a;
  --color-fern:      #bcb435;
  --color-olive-border: #bcb536;

  /* Type */
  --font-display: "nexa-rust-sans-black-2", "Archivo Black", "Anton", Impact, sans-serif;
  --font-display-shadow: "nexa-rust-sans-black-shad-2", "Archivo Black", Impact, sans-serif;
  --font-body: "figtree", "Figtree", -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif;
  --font-editorial: "liebling", "Cormorant", "Playfair Display", serif;
  --font-hand: "Shadow Into Light", cursive;

  /* Assets */
  --bg-paper: url("./images/670794babca830376038d209_bg-texture.webp");
  --bg-paper-mobile: url("./images/670794eb52f5d9b0565795c5_bg-texture-mobile.webp");
  --brand-logo: url("./images/671740708dbd70842afe1db7_builder-prime-logo.webp");
}

/* ---------- Base ---------- */

html, body {
  background: var(--color-eggshel) var(--bg-paper) center top / cover no-repeat;
  color: var(--color-tar);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0 0 0.5em;
  color: var(--color-tar);
}

h1 { font-size: 3.5rem;  letter-spacing: -0.14rem; line-height: 1;     }
h2 { font-size: 3rem;    letter-spacing: -0.12rem; line-height: 1.166; font-weight: 700; }
h3 { font-size: 1.75rem; letter-spacing: -0.07rem; line-height: 1;     font-weight: 700; }
h4 { font-size: 1.5rem;  letter-spacing: -0.06rem; line-height: 1.333; font-weight: 700; }
h5 { font-size: 1.25rem; letter-spacing: -0.05rem; line-height: 1;     font-weight: 700; }
h6 { font-size: 1rem;    line-height: 1.5;                              font-weight: 700; }

@media (max-width: 768px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}

p  { margin: 0 0 1em; }
a  { color: var(--color-hickory); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-blaze); }

strong { color: var(--color-tar); }
blockquote {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  border-left: 4px solid var(--color-canary);
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  background: rgba(255, 252, 242, 0.6);
}

/* ---------- Section/layout helpers ---------- */

.bp-container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.bp-section {
  padding: 4rem 0;
}

.bp-section--dark {
  background: var(--color-tar);
  color: var(--color-eggshel);
}
.bp-section--dark h1,
.bp-section--dark h2,
.bp-section--dark h3 { color: var(--color-eggshel); }

.bp-section--olive  { background: var(--color-olive);  color: var(--color-eggshel); }
.bp-section--denim  { background: var(--color-denim);  color: var(--color-eggshel); }
.bp-section--canary { background: var(--color-canary); color: var(--color-tar); }
.bp-section--rust   { background: var(--color-rust);   color: var(--color-eggshel); }

/* ---------- Rip dividers (torn paper) ---------- */

.bp-rip {
  display: block;
  width: 100%;
  height: auto;
}
.bp-rip--olive        { content: url("./images/66ddb863c5e6c9bbd16d29b4_rip-olive.webp"); }
.bp-rip--denim-eggshel{ content: url("./images/66e485b462e0d97c002fa88e_rip-denim-eggshel.webp"); }
.bp-rip--eggshel-olive{ content: url("./images/66f01bc4a174dc0405ae96f2_rip-eggshel-olive.webp"); }
.bp-rip--glow-denim   { content: url("./images/66f16e5cbbcba49f2f227608_rip-glow-denim.webp"); }
.bp-rip--white-glow   { content: url("./images/66e3f61ae06e47c0e103270b_rip-white-glow.webp"); }
.bp-rip--footer       { content: url("./images/66fe7c54ba3b86a628ef77cc_footer-rip-new.webp"); }

/* ---------- Buttons ---------- */

.bp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  max-height: 4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.bp-btn:hover { transform: translateY(-1px); }

.bp-btn--primary {          /* dark hickory pill */
  background: var(--color-hickory);
  border-color: var(--color-hickory);
  color: var(--color-eggshel);
}
.bp-btn--cta {              /* safety-orange schedule button */
  background: var(--color-blaze);
  border-color: var(--color-canary);
  color: var(--color-eggshel);
}
.bp-btn--canary {
  background: var(--color-canary);
  border-color: var(--color-canary);
  color: var(--color-tar);
}
.bp-btn--denim {
  background: var(--color-denim);
  border-color: var(--color-denim);
  color: var(--color-eggshel);
}
.bp-btn--rust {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: var(--color-eggshel);
  transform: rotate(-2deg);
}
.bp-btn--olive {
  background: var(--color-olive);
  border-color: var(--color-olive);
  color: var(--color-eggshel);
  transform: rotate(-2deg);
}
.bp-btn--secondary {
  background: var(--color-eggshel);
  border-color: var(--color-hickory);
  color: var(--color-hickory);
}

/* ---------- Slight tilt — use sparingly on headlines/stamps ---------- */
.bp-tilt-l { transform: rotate(-2deg); }
.bp-tilt-r { transform: rotate( 1.5deg); }

/* ---------- Utility pieces ---------- */

.bp-eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blaze);
}

.bp-logo {
  display: inline-block;
  width: 200px;
  height: 48px;
  background: var(--brand-logo) left center / contain no-repeat;
  text-indent: -9999px;
}

.bp-quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.4;
}
.bp-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-hickory);
}

.bp-kpi {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.1rem;
  color: var(--color-hickory);
}
.bp-kpi + .bp-kpi-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-tar);
}