/* BioSynova brand system — from "BioSynova Brand Direction" (Figma)
   Primary: Libre Baskerville · Secondary: Geist · Supporting: Geist Mono */


:root {
  /* Warm neutrals */
  --amber: #DABE81;
  --warm-beige: #D7CAB0;
  --sand: #E9E2D1;
  --cloud: #F0EDE5;
  /* Greens / teals */
  --sage: #B0BDB0;
  --olive: #778A86;
  --bio-cyan: #4C7E86;
  --pine: #254A5D;
  --pine-deep: #17303D;
  /* Greys */
  --white: #FFFFFF;
  --alabaster: #DBDBDB;
  --charcoal: #494949;
  --onyx: #242424;

  --ink: var(--pine-deep);
  --ink-soft: rgba(23, 48, 61, .72);
  --ink-faint: rgba(23, 48, 61, .14);
  --paper: var(--cloud);

  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  --gutter: clamp(16px, 3vw, 40px);
  --max: 1440px;
  --radius: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 8px; vertical-align: 1px; }
.section { padding: clamp(80px, 11vw, 160px) 0; }
.rule { height: 1px; background: var(--ink-faint); border: 0; margin: 0; }

/* ---------- Mark + wordmark ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 30px; width: auto; display: block; }
@media (max-width: 600px) { .brand img { height: 26px; } }

/* ---------- Buttons (BYQ text-roll hover) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  font: 500 15px/1 var(--sans); cursor: pointer; border: 0; isolation: isolate;
  transition: color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.btn .roll { display: block; height: 1em; overflow: hidden; }
.btn .roll > span { display: block; transition: transform .45s var(--ease); text-shadow: 0 1.6em 0 currentColor; }
.btn:hover .roll > span { transform: translateY(-1.6em); }
.btn svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { color: var(--cloud); }
.btn-primary::before { background: var(--pine); }
.btn-primary:hover { color: var(--pine-deep); }
.btn-primary:hover::before { background: var(--amber); }
.btn-light { color: var(--pine-deep); }
.btn-light::before { background: var(--cloud); }
.btn-light:hover::before { background: var(--amber); }
.btn-ghost { color: currentColor; }
.btn-ghost::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: .35; }
.btn-ghost:hover::before { opacity: .8; }
.link-u { position: relative; text-decoration: none; font: 500 15px/1.2 var(--sans); }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform-origin: right; transition: transform .45s var(--ease); }
.link-u:hover::after { transform: scaleX(0); }

/* ---------- Motion (BYQ: blur-in, fade-up) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.blur { transform: none; filter: blur(12px); transition: opacity .8s ease-out, filter .8s ease-out; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .12s; }
.reveal[data-d="2"] { transition-delay: .24s; }
.reveal[data-d="3"] { transition-delay: .36s; }
.reveal[data-d="4"] { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* ---------- Motion layer ---------- */
.btn { transition: color .35s var(--ease), transform .5s var(--ease); will-change: transform; }

/* Masked word rise for headings */
.reveal.wsplit { opacity: 1; transform: none; filter: none; }
.wsplit .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.wsplit .wi { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.wsplit.in .wi { transform: none; }

/* Scroll Blur Reveal words */
.sbr-word { display: inline-block; will-change: opacity, filter, transform; }

/* Curtain image reveal (BYQ gem timings) */
[data-curtain] { --cr: 20px; clip-path: inset(0 100% 0 0 round var(--cr)); transition: clip-path .9s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
[data-curtain][data-wipe="tb"] { clip-path: inset(0 0 100% 0 round var(--cr)); }
[data-curtain][data-wipe="rl"] { clip-path: inset(0 0 0 100% round var(--cr)); }
[data-curtain] img { transform: scale(1.25); transition: transform 1.05s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
[data-curtain][data-revealed="true"] { clip-path: inset(0 0 0 0 round var(--cr)) !important; }
[data-curtain][data-revealed="true"] img { transform: scale(1); }
[data-curtain] + figcaption, [data-curtain] ~ .cap { opacity: 0; transform: translateY(8px); transition: opacity .45s ease calc(var(--d, 0s) + .7s), transform .55s cubic-bezier(.16,1,.3,1) calc(var(--d, 0s) + .7s); }
[data-curtain][data-revealed="true"] + figcaption, [data-curtain][data-revealed="true"] ~ .cap { opacity: 1; transform: none; }

/* Marquee */
.mq { overflow: hidden; flex-wrap: nowrap !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; flex: none; gap: 10px 40px; padding-right: 40px; white-space: nowrap; animation: mq 38s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* Nav hide on scroll down */
[data-nav] { transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease); }
[data-nav].hide { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .wsplit .wi { transform: none; transition: none; }
  [data-curtain] { clip-path: inset(0 round var(--cr)) !important; transition: none; }
  [data-curtain] img { transform: none !important; transition: none; }
  .mq-track { animation: none; }
}