/* Bisonica Technologies — shared stylesheet
   Loaded once and cached by the browser across every page. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format('woff2');
  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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format('woff2');
  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;
}

:root {
  --cream: oklch(0.97 0.012 75);
  --card: oklch(0.945 0.014 70);
  --dark: oklch(0.20 0.03 45);
  --ink: oklch(0.17 0.014 50);
  --accent: oklch(0.36 0.06 50);
  --accent-2: oklch(0.58 0.11 40);
  --gold: oklch(0.84 0.045 70);
  --on-dark: oklch(0.96 0.01 70);
  --on-dark-muted: oklch(0.9 0.015 70);
  --gutter: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; }
p { margin: 0; }
::selection { background: var(--accent); color: var(--cream); }
input, textarea, select { width: 100%; font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; }
.container-narrow { max-width: 1000px; margin: 0 auto; }
.container-prose { max-width: 900px; margin: 0 auto; }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow-on-dark { color: var(--gold); letter-spacing: 0.2em; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gutter);
  position: sticky;
  top: 0;
  z-index: 20;
  background: oklch(0.97 0.012 75 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid oklch(0.17 0.014 50 / 0.08);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { height: 44px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.brand-sub { font-size: 9px; letter-spacing: 0.22em; color: var(--accent); font-weight: 600; }

.menu-btn {
  width: 44px; height: 44px; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn span { width: 26px; height: 2px; background: var(--ink); }

/* ---------- mobile nav overlay ---------- */
.mobile-nav {
  position: fixed; inset: 0; background: var(--dark); z-index: 30;
  display: flex; flex-direction: column;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-top {
  display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter);
}
.mobile-nav-top .brand-name { color: var(--on-dark); }
.mobile-nav-top .logo { border-radius: 4px; }
.close-btn {
  width: 44px; height: 44px; background: none; border: none; cursor: pointer;
  color: var(--on-dark); font-size: 32px; line-height: 1;
}
.mobile-nav-links {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 24px; padding: 0 var(--gutter);
}
.mobile-nav-links a {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 6vw, 38px); font-weight: 600; color: var(--on-dark);
}
.mobile-nav-links a.active { color: var(--gold); }
.mobile-nav-footer {
  display: flex; justify-content: space-between; align-items: center; padding: 32px var(--gutter);
  border-top: 1px solid oklch(0.96 0.01 70 / 0.15);
  flex-wrap: wrap; gap: 16px;
}
.mobile-nav-footer .footer-email { color: oklch(0.9 0.015 70 / 0.8); font-size: 15px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 16px 32px; font-weight: 700; font-size: 16px; border-radius: 2px;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-sm { padding: 14px 26px; font-size: 15px; }
.btn-gold { background: var(--gold); color: var(--dark); }
.btn-accent { background: var(--accent); color: var(--cream); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark);
  padding: 120px var(--gutter) 90px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.08;
  background-image: repeating-linear-gradient(135deg, var(--on-dark) 0px, var(--on-dark) 2px, transparent 2px, transparent 64px);
}
.hero-ring {
  position: absolute; right: -80px; top: -60px; width: 420px; height: 420px;
  border: 1px solid oklch(0.96 0.01 70 / 0.15); border-radius: 50%;
}
.hero-inner { position: relative; max-width: 820px; }
.hero-inner.wide { max-width: 880px; }
.hero h1 {
  font-size: clamp(36px, 4.8vw, 58px); font-weight: 700; line-height: 1.1; margin: 0 0 26px; text-wrap: pretty;
}
.hero p { font-size: 18px; line-height: 1.6; max-width: 640px; color: var(--on-dark-muted); }
.hero p + p { margin-top: 10px; }

/* ---------- section spacing ---------- */
.section { padding: 100px var(--gutter); }
.section-sm { padding: 70px var(--gutter); }
.section-lg { padding: 110px var(--gutter); }
.section-dark { background: var(--dark); color: var(--on-dark); }
.section-card-bg { background: var(--card); }
.section-center { text-align: center; }

/* ---------- grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.grid-3-tight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.grid-founder { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }

/* ---------- cards ---------- */
.card { background: var(--card); padding: 36px; border-radius: 2px; }
.card p { color: oklch(0.17 0.014 50 / 0.8); font-size: 15px; line-height: 1.65; }
.card p + p { margin-top: 14px; }
.card-dark { background: var(--dark); color: var(--on-dark); }
.card-dark p { color: var(--on-dark-muted); }
.card-tag { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.card-tag-on-dark { color: var(--gold); }
.card h3 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }

.contact-card { background: var(--card); padding: 32px; border-radius: 2px; }
.contact-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.contact-card p { font-size: 15px; line-height: 1.6; color: oklch(0.17 0.014 50 / 0.75); }

/* ---------- decorative icon shapes ---------- */
.icon-box {
  width: 44px; height: 44px; background: oklch(0.36 0.06 50 / 0.12);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.icon-box.circle { border-radius: 50%; }
.icon-box.diamond { transform: rotate(45deg); }
.icon-box .dot { width: 16px; height: 16px; background: var(--accent); }
.icon-box .dot.circle { border-radius: 50%; }
.icon-box .dot.diamond { transform: rotate(-45deg); }

.icon-sm { width: 38px; height: 38px; background: oklch(0.36 0.06 50 / 0.12); margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.icon-sm.circle { border-radius: 50%; }
.icon-sm.diamond { transform: rotate(45deg); }
.icon-sm.square { border-radius: 2px; }
.icon-sm .dot-sm { width: 13px; height: 13px; background: var(--accent); }
.icon-sm .dot-sm.circle { border-radius: 50%; }
.icon-sm .dot-sm.diamond { transform: rotate(-45deg); }
.icon-sm .tri { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid var(--accent); }

.icon-md { width: 38px; height: 38px; background: oklch(0.36 0.06 50 / 0.14); margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.icon-md.circle { border-radius: 50%; }
.icon-md.diamond { transform: rotate(45deg); }
.icon-md .dot-md { width: 14px; height: 14px; background: var(--accent); }
.icon-md .dot-md.circle { border-radius: 50%; }
.icon-md .dot-md.diamond { transform: rotate(-45deg); }

.icon-lg { width: 44px; height: 44px; flex-shrink: 0; background: oklch(0.36 0.06 50 / 0.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-lg .dot-lg { width: 16px; height: 16px; background: var(--accent); border-radius: 50%; }

/* ---------- pills (process steps) ---------- */
.pill-row { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding-bottom: 12px; }
.pill-row.tight { gap: 6px; }
.pill {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
  background: var(--card); padding: 8px 16px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.pill.tight { padding: 9px 16px; background: var(--cream); }
.pill.current { background: var(--accent); color: var(--cream); }
.pill.final { background: var(--dark); color: var(--gold); }
.pill-sep { width: 24px; height: 1px; background: oklch(0.17 0.014 50 / 0.25); flex-shrink: 0; }
.pill-sep.tight { width: 18px; }

/* ---------- founder / stat blocks ---------- */
.avatar-circle {
  width: 120px; height: 120px; border-radius: 50%; background: var(--dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar-circle span { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 700; color: var(--gold); }

.value-block {
  grid-column: 1 / -1; background: var(--dark); color: var(--on-dark); border-radius: 2px; padding: 28px;
}
.value-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-2); margin-bottom: 16px; }
.value-block .caption { font-size: 14px; color: oklch(0.9 0.015 70 / 0.8); }
.mini-panel {
  background: var(--cream); border: 1px solid oklch(0.17 0.014 50 / 0.1); border-radius: 2px; padding: 20px;
}
.mini-panel.dots { display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start; }
.mini-panel.center { display: flex; align-items: center; justify-content: center; }
.mini-panel .dot-round { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.mini-panel .dot-round.c2 { background: var(--accent-2); }
.mini-panel .dot-round.c3 { background: var(--gold); }
.mini-panel .dot-round.c4 { background: oklch(0.36 0.06 50 / 0.5); }
.mini-panel .label { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: var(--accent); }

/* ---------- forms ---------- */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form input,
.contact-form textarea,
.contact-form select {
  padding: 15px 16px; border-radius: 2px; border: 1px solid oklch(0.96 0.01 70 / 0.25);
  background: oklch(0.96 0.01 70 / 0.06); color: var(--on-dark); font-size: 15px;
}
.contact-form textarea { resize: vertical; }
.contact-form option { color: var(--ink); }
.contact-form button { margin-top: 6px; cursor: pointer; }

/* ---------- footer ---------- */
.site-footer-simple { background: var(--ink); color: var(--on-dark-muted); padding: 56px var(--gutter); }
.footer-simple-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-simple-inner .muted { font-size: 13px; color: oklch(0.9 0.015 70 / 0.5); }
.footer-simple-inner a.footer-email { color: var(--gold); }

.site-footer-full { background: var(--dark); color: var(--on-dark-muted); padding: 80px var(--gutter) 40px; }
.footer-full-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; padding-bottom: 56px;
  border-bottom: 1px solid oklch(0.96 0.01 70 / 0.15);
}
.footer-full-top h2 { font-size: 28px; font-weight: 700; color: var(--on-dark); margin-bottom: 14px; }
.footer-full-top p { font-size: 15px; line-height: 1.6; color: oklch(0.9 0.015 70 / 0.75); margin-bottom: 18px; max-width: 420px; }
.footer-full-top .footer-email { color: var(--gold); font-weight: 600; font-size: 15px; }
.footer-col-label { font-size: 12px; letter-spacing: 0.14em; color: oklch(0.9 0.015 70 / 0.5); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-full-bottom { display: flex; justify-content: space-between; padding-top: 28px; font-size: 13px; color: oklch(0.9 0.015 70 / 0.5); flex-wrap: wrap; gap: 8px; }

/* ---------- utility text sizes reused across pages ---------- */
.lede { font-size: 17px; line-height: 1.75; color: oklch(0.17 0.014 50 / 0.8); }
.lede + .lede { margin-top: 18px; }
.lede-lg { font-size: 19px; line-height: 1.7; color: oklch(0.17 0.014 50 / 0.85); }
.body-copy { font-size: 16px; line-height: 1.7; color: oklch(0.17 0.014 50 / 0.8); }
.body-copy + .body-copy { margin-top: 16px; }
.h2 { font-size: 32px; font-weight: 700; margin-bottom: 24px; }
.h2-sm { font-size: 30px; font-weight: 700; margin-bottom: 20px; }
.h2-lg { font-size: 34px; font-weight: 700; margin-bottom: 18px; }
.h3-on-dark { font-size: 20px; font-weight: 600; margin-bottom: 14px; color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-3-tight, .grid-4, .footer-full-top { grid-template-columns: 1fr; gap: 40px; }
  .grid-founder { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 680px) {
  :root { --gutter: 20px; }
  .hero { padding: 90px var(--gutter) 60px; }
  .section, .section-sm, .section-lg { padding-left: var(--gutter); padding-right: var(--gutter); }
}