/* ============================================================
   Symbio Bioculinary — Global Design System
   Warm, editorial, organic. Inter throughout.
   ============================================================ */

/* Google Fonts loaded via functions.php */

:root {
  /* Warm neutrals */
  --sbc-paper:     oklch(0.987 0.008 70);
  --sbc-paper-2:   oklch(0.972 0.012 70);
  --sbc-paper-3:   oklch(0.945 0.018 65);
  --sbc-ink:       oklch(0.20 0.012 50);
  --sbc-ink-2:     oklch(0.38 0.012 50);
  --sbc-ink-3:     oklch(0.58 0.014 60);
  --sbc-ink-4:     oklch(0.78 0.014 65);
  --sbc-hair:      oklch(0.88 0.012 65);
  --sbc-hair-2:    oklch(0.93 0.010 65);

  /* Fallbacks for older browsers */
  --sbc-paper-fb:  #fefdf9;
  --sbc-paper-2-fb:#f8f5ee;
  --sbc-ink-fb:    #1c1810;
  --sbc-ink-2-fb:  #46403a;
  --sbc-ink-3-fb:  #776b5e;
  --sbc-hair-fb:   #d8cfc4;

  /* Red accent */
  --sbc-red:       oklch(0.555 0.22 27);
  --sbc-red-2:     oklch(0.50 0.22 27);
  --sbc-red-soft:  oklch(0.92 0.06 30);
  --sbc-red-faint: oklch(0.965 0.025 35);
  --sbc-red-fb:    #c13a2a;

  /* Earth tones */
  --sbc-bark:      oklch(0.42 0.05 45);
  --sbc-clay:      oklch(0.72 0.10 55);
  --sbc-bark-fb:   #5e5142;

  /* Typography */
  --sbc-font: "Inter", "Inter Placeholder", system-ui, -apple-system, sans-serif;
  --sbc-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Type scale */
  --sbc-display: clamp(48px, 7.2vw, 120px);
  --sbc-h1:      clamp(36px, 4.4vw, 72px);
  --sbc-h2:      clamp(28px, 3vw, 48px);
  --sbc-h3:      clamp(20px, 1.6vw, 26px);
  --sbc-lead:    clamp(18px, 1.4vw, 22px);
  --sbc-body:    16px;
  --sbc-small:   13px;
  --sbc-tiny:    11px;

  /* Spacing */
  --sbc-gutter:  clamp(20px, 4vw, 64px);
  --sbc-section: clamp(80px, 10vw, 160px);

  /* Motion */
  --sbc-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --sbc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Body & global resets ── */
body {
  background: var(--sbc-paper, var(--sbc-paper-fb));
  color: var(--sbc-ink, var(--sbc-ink-fb));
  font-family: var(--sbc-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Layout helpers ── */
.sbc-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sbc-gutter);
}
.sbc-wrap-tight {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--sbc-gutter);
}

/* ── Hairline ── */
.sbc-hairline {
  height: 1px;
  background: var(--sbc-hair, var(--sbc-hair-fb));
  border: 0;
  width: 100%;
}

/* ── Eyebrow label ── */
.sbc-eyebrow {
  font-size: 15px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sbc-red, var(--sbc-red-fb));
  font-family: var(--sbc-font);
}
.sbc-eyebrow--muted {
  color: var(--sbc-ink-3, var(--sbc-ink-3-fb));
}

/* ── Display & heading typography ── */
.sbc-display {
  font-size: var(--sbc-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 300;
  color: var(--sbc-ink, var(--sbc-ink-fb));
  margin: 0;
  font-family: var(--sbc-font);
}
.sbc-display em {
  font-style: italic;
  color: var(--sbc-red, var(--sbc-red-fb));
  font-weight: 300;
}
.sbc-h1 {
  font-size: var(--sbc-h1);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 300;
  margin: 0;
  font-family: var(--sbc-font);
}
.sbc-h2 {
  font-size: var(--sbc-h2);
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-weight: 300;
  margin: 0;
  font-family: var(--sbc-font);
}
.sbc-h3 {
  font-size: var(--sbc-h3);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 500;
  margin: 0;
  font-family: var(--sbc-font);
}
.sbc-lead {
  font-size: var(--sbc-lead);
  line-height: 1.45;
  color: var(--sbc-ink-2, var(--sbc-ink-2-fb));
  font-weight: 400;
  letter-spacing: -0.005em;
  font-family: var(--sbc-font);
}
.sbc-body {
  color: var(--sbc-ink-2, var(--sbc-ink-2-fb));
  line-height: 1.6;
  font-family: var(--sbc-font);
}
.sbc-small {
  font-size: var(--sbc-small);
  color: var(--sbc-ink-3, var(--sbc-ink-3-fb));
  font-family: var(--sbc-font);
}
.sbc-mono {
  font-family: var(--sbc-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ── Buttons ── */
.sbc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s var(--sbc-ease);
  font-family: var(--sbc-font);
  line-height: 1;
}
.sbc-btn--primary {
  background: var(--sbc-red, var(--sbc-red-fb));
  color: var(--sbc-paper, var(--sbc-paper-fb));
}
.sbc-btn--primary:hover {
  background: var(--sbc-red-2, #a82e20);
  transform: translateY(-1px);
  color: var(--sbc-paper, var(--sbc-paper-fb));
  text-decoration: none;
}
.sbc-btn--ghost {
  background: transparent;
  color: var(--sbc-ink, var(--sbc-ink-fb));
  border-color: var(--sbc-hair, var(--sbc-hair-fb));
}
.sbc-btn--ghost:hover {
  border-color: var(--sbc-ink, var(--sbc-ink-fb));
  text-decoration: none;
  color: var(--sbc-ink, var(--sbc-ink-fb));
}
.sbc-btn--light {
  background: var(--sbc-paper, var(--sbc-paper-fb));
  color: var(--sbc-ink, var(--sbc-ink-fb));
  border-color: transparent;
}
.sbc-btn--light:hover {
  background: var(--sbc-paper-2, var(--sbc-paper-2-fb));
  text-decoration: none;
  color: var(--sbc-ink, var(--sbc-ink-fb));
}

/* ── Link arrow ── */
.sbc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sbc-red, var(--sbc-red-fb));
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: var(--sbc-font);
  transition: gap 0.3s var(--sbc-ease);
}
.sbc-link-arrow:hover {
  gap: 12px;
  text-decoration: none;
  color: var(--sbc-red, var(--sbc-red-fb));
}

/* ── Reveal animations ── */
.sbc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--sbc-ease), transform 0.9s var(--sbc-ease);
}
.sbc-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.sbc-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--sbc-ease), transform 0.7s var(--sbc-ease);
}
.sbc-stagger.is-visible > * { opacity: 1; transform: none; }
.sbc-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.sbc-stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.sbc-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.sbc-stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.sbc-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

/* ── Wave background ── */
.sbc-wave-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  color: var(--sbc-ink-3, var(--sbc-ink-3-fb));
}
.sbc-wave-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Pulse dot ── */
.sbc-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sbc-red, var(--sbc-red-fb));
  position: relative;
  flex-shrink: 0;
}
.sbc-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--sbc-red, var(--sbc-red-fb));
  opacity: 0.3;
  animation: sbc-pulse 2s ease-out infinite;
}
@keyframes sbc-pulse {
  0%   { transform: scale(0.5); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── KPI number ── */
.sbc-kpi-num {
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--sbc-ink, var(--sbc-ink-fb));
  font-variant-numeric: tabular-nums;
  font-family: var(--sbc-font);
}
.sbc-kpi-num em {
  font-style: italic;
  color: var(--sbc-red, var(--sbc-red-fb));
  font-weight: 300;
}
.sbc-kpi-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sbc-ink-3, var(--sbc-ink-3-fb));
  margin-top: 12px;
  font-weight: 500;
  font-family: var(--sbc-font);
}

/* ── ::selection ── */
::selection {
  background: var(--sbc-red, var(--sbc-red-fb));
  color: var(--sbc-paper, var(--sbc-paper-fb));
}

/* ── Scrollbar ── */
html { scrollbar-color: var(--sbc-ink-4, #b4a896) transparent; scrollbar-width: thin; }

/* ── Phases grid ── */
.symbio-phases { background: var(--sbc-paper, #fefdf9); width: 100%; padding: clamp(48px,5vw,72px) 0; }
.symbio-phases__wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sbc-gutter, clamp(20px,4vw,64px)); }
.symbio-phases__eyebrow { font-size: clamp(24px, 2.8vw, 42px); letter-spacing: -0.022em; text-transform: none; font-weight: 300; color: var(--sbc-ink, #1c1810); text-align: left; margin: 0 0 40px; font-family: var(--sbc-font, 'Inter', sans-serif); line-height: 1.1; }
.symbio-phases__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sbc-hair, #d8cfc4); border-bottom: 1px solid var(--sbc-hair, #d8cfc4); }
.symbio-phases__item { padding: 48px 36px; text-align: left; }
.symbio-phases__item--sep { border-right: 1px solid var(--sbc-hair, #d8cfc4); }
.symbio-phases__code { font-family: var(--sbc-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--sbc-ink-3, #776b5e); margin-bottom: 24px; }
.symbio-phases__label { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--sbc-ink, #1c1810); margin-bottom: 12px; font-family: var(--sbc-font, 'Inter', sans-serif); }
.symbio-phases__desc { font-size: 17px; line-height: 1.55; color: var(--sbc-ink-2, #46403a); margin: 0; font-family: var(--sbc-font, 'Inter', sans-serif); }
@media (max-width: 860px) { .symbio-phases__grid { grid-template-columns: repeat(2, 1fr); } .symbio-phases__item:nth-child(2) { border-right: none; } .symbio-phases__item:nth-child(1), .symbio-phases__item:nth-child(2) { border-bottom: 1px solid var(--sbc-hair, #d8cfc4); } }
@media (max-width: 540px) { .symbio-phases__grid { grid-template-columns: 1fr; } .symbio-phases__item--sep { border-right: none; border-bottom: 1px solid var(--sbc-hair, #d8cfc4); } }