/* ==========================================================================
   Bold Etik — base styles
   Fonts, design tokens, reset, type scale and shared UI pieces.
   Breakpoints: desktop ≥ 1200px · tablet 810–1199px · phone ≤ 809px
   ========================================================================== */

/* ---------- Fonts (all self-hosted) ---------- */
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "The Patience"; src: url("/assets/fonts/the-patience-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fragment Mono"; src: url("/assets/fonts/fragment-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fragment Mono"; src: url("/assets/fonts/fragment-mono-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-variable-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --be-ink: #020108;
  --be-ink-60: rgba(2, 1, 8, 0.6);
  --be-ink-50: rgba(2, 1, 8, 0.5);
  --be-ink-12: rgba(2, 1, 8, 0.12);
  --be-grey: #808083;
  --be-bg: #f5f5f5;
  --be-surface: #fff;
  --be-menu: #e9e9e9;
  --be-charcoal: #333;
  --be-orange: #f65600;
  --be-orange-bright: #ff5900;
  --be-white-70: rgba(255, 255, 255, 0.7);

  --be-sans: "Switzer", "Inter", system-ui, sans-serif;
  --be-script: "The Patience", cursive;
  --be-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* The FAQ and pill buttons were designed with a font that never loaded, so
     they have always rendered in the browser's default sans-serif. Kept as is. */
  --be-system: sans-serif;

  --be-ease: cubic-bezier(0.44, 0, 0.56, 1);
  --be-ease-out: cubic-bezier(0.2, 0, 0.4, 1);
  --be-ease-elastic: linear(0, 0.42 8%, 0.72 14%, 0.9 20%, 1.02 26%, 1.08 32%, 1.1 36%, 1.08 42%, 1.04 50%, 1.01 62%, 0.995 74%, 1);
  --be-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--be-bg);
  color: var(--be-ink);
  font-family: var(--be-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--be-orange); outline-offset: 3px; }

.be-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Type scale ----------
   Sizes are desktop / tablet / phone. Line heights are relative to the size. */
.t-hero        { font: 500 112px/1.15 var(--be-sans); letter-spacing: -0.04em; }
.t-display     { font: 600 96px/1 var(--be-sans); letter-spacing: -1px; }
.t-display-md  { font: 500 96px/1 var(--be-sans); letter-spacing: -0.04em; }
.t-h2          { font: 700 46.4px/1.15 var(--be-sans); letter-spacing: -1px; }
.t-h2-medium   { font: 500 46.4px/1.15 var(--be-sans); letter-spacing: -0.04em; }
.t-h3          { font: 600 27.2px/1.15 var(--be-sans); letter-spacing: -0.05em; }
.t-h3-tight    { font: 600 27.2px/1.15 var(--be-sans); letter-spacing: -0.04em; }
.t-h3-relaxed  { font: 600 27.2px/1.3 var(--be-sans); letter-spacing: -0.04em; }
.t-lead        { font: 600 19.2px/1.3 var(--be-sans); letter-spacing: -0.4px; }
.t-h4          { font: 600 17.6px/1.15 var(--be-sans); letter-spacing: -0.04em; }
.t-body-strong { font: 600 16px/1.3 var(--be-sans); letter-spacing: -0.6px; }
.t-body        { font: 500 16px/1.15 var(--be-sans); }
.t-small       { font: 500 14.4px/1.15 var(--be-sans); }
.t-note        { font: 500 12.8px/1.3 var(--be-sans); }
.t-tiny        { font: 500 11.2px/1.15 var(--be-sans); }

.t-script-xl   { font: 400 92.8px/1 var(--be-script); letter-spacing: -0.04em; }
.t-script-lg   { font: 400 80px/1 var(--be-script); letter-spacing: -0.04em; }
.t-script-md   { font: 400 46.4px/1.15 var(--be-script); letter-spacing: -0.04em; }
.t-script-sm   { font: 400 16px/1.15 var(--be-script); letter-spacing: -0.02em; }

.t-eyebrow     { font: 600 14.4px/1.15 var(--be-mono); letter-spacing: -0.3px; text-transform: uppercase; }
.t-label       { font: 500 11.2px/1.15 var(--be-mono); letter-spacing: 0.3px; text-transform: uppercase; }
.t-mono        { font: 600 12.8px/1.15 var(--be-mono); letter-spacing: 0.3px; }
.t-mono-caps   { font: 500 14.4px/1.3 var(--be-mono); text-transform: uppercase; }

@media (max-width: 1199.98px) {
  .t-hero        { font-size: 64px; }
  .t-display, .t-display-md { font-size: 48px; }
  .t-h2, .t-h2-medium { font-size: 38.4px; }
  .t-h3, .t-h3-tight, .t-h3-relaxed { font-size: 22.4px; }
  .t-small, .t-note { font-size: 16px; }
  .t-tiny        { font-size: 13px; }
  .t-script-xl   { font-size: 64px; }
  .t-script-lg   { font-size: 41.6px; }
  .t-script-md   { font-size: 38.4px; }
  .t-script-sm   { font-size: 12.8px; }
  .t-eyebrow, .t-mono, .t-mono-caps { font-size: 16px; }
  .t-label       { font-size: 13px; }
}
@media (max-width: 809.98px) {
  .t-hero        { font-size: 40px; }
  .t-display     { font-size: 36.8px; }
  .t-display-md  { font-size: 30.4px; }
  .t-h2          { font-size: 36.8px; }
  .t-h2-medium   { font-size: 25.6px; }
  .t-h3, .t-h3-tight, .t-h3-relaxed { font-size: 19.2px; }
  .t-body-strong { letter-spacing: -0.3px; }
  .t-script-xl   { font-size: 40px; }
  .t-script-lg   { font-size: 48px; }
  .t-script-md   { font-size: 25.6px; }
  .t-script-sm   { font-size: 14.4px; line-height: 1.3; }
}

/* Switzer's alternate glyphs, used by the headline and script styles.
   Set after the `font` shorthands above because those reset it. */
.t-hero, .t-display, .t-display-md, .t-h2, .t-h2-medium, .t-h3, .t-h3-tight, .t-h3-relaxed,
.t-lead, .t-h4, .t-body-strong, .t-script-xl, .t-script-lg, .t-script-md, .t-script-sm {
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
}

.c-grey   { color: var(--be-grey); }
.c-orange { color: var(--be-orange); }
.c-white  { color: #fff; }

/* ---------- Shared pieces ---------- */

/* Small orange dot + mono label, used as a section eyebrow */
.be-eyebrow { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--be-grey); }
.be-eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 100px; background: var(--be-orange); }
.be-eyebrow--light { color: #fff; }
.be-eyebrow--light::before { background: #fff; }

/* Pill button with an elastic squash and a rolling label on hover */
.be-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border: 0; border-radius: 999px;
  background: var(--be-ink); color: #fff;
  font: 600 16px/1 var(--be-system); letter-spacing: -0.3px;
  overflow: hidden; cursor: pointer;
  transition: transform 0.65s var(--be-ease-elastic);
}
.be-button--orange { background: var(--be-orange); }
.be-button__wrap { display: block; height: 1.2em; overflow: hidden; }
.be-button__label {
  display: block; line-height: 1.2em;
  text-shadow: 0 1.2em currentColor;
  transition: transform 0.65s var(--be-ease-elastic);
}
.be-button:hover { transform: scale(0.92) rotate(-3deg); }
.be-button:hover .be-button__label { transform: translateY(-1.2em); }

/* Form feedback message */
.be-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 99999;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font: 500 15px/1.4 system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.be-toast--error { background: #c0392b; }

/* Entrance animations. Elements start hidden only when JS is running,
   so the page stays fully visible without JavaScript. */
.js [data-reveal] {
  opacity: 0.001;
  transform: translateY(var(--reveal-y, 0px)) scale(var(--reveal-scale, 1));
  transition: opacity var(--reveal-duration, 0.6s) var(--be-ease-out) var(--reveal-delay, 0s),
              transform var(--reveal-duration, 0.6s) var(--be-ease-out) var(--reveal-delay, 0s);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }