/* allOrganics mockups: shared floor. Each direction sets its own tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--f-display); font-weight: var(--display-w, 400); letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1300px, 100% - 48px); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }
.label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px max(24px, calc((100vw - 1300px) / 2)); }
.nav .brand { font-family: var(--f-display); font-size: 22px; text-decoration: none; letter-spacing: -0.02em; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav ul a { text-decoration: none; opacity: 0.85; }
.nav ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.cur { display: inline-flex; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 99px; padding: 2px; }
.cur button { border: 0; background: none; padding: 0 12px; height: 32px; min-width: 44px; border-radius: 99px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cur button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.nav { transition: background-color .35s, backdrop-filter .35s; }
.nav.scrolled { background: color-mix(in srgb, var(--nav-bg, var(--bg)) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: var(--nav-ink, var(--ink)); }
@media (max-width: 900px) { .nav ul { display: none; } }

/* WhatsApp button: the one action */
.wa { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s; }
.wa:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wa:active { transform: translateY(1px) scale(.98); }
.wa svg { width: 20px; height: 20px; flex: none; }
.wa.ghost { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }

/* scrub act */
[data-scrub] { position: relative; height: var(--span, 400vh); --p: 0; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage > video, .stage > .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--obj, 50% 50%); }
.stage > .poster.end { opacity: 0; }
.ready .stage > .poster { opacity: 0; }
html.rm [data-scrub] { height: auto; }
html.rm .stage { position: relative; }
html.rm .stage > .poster.start { opacity: 0; }
html.rm .stage > .poster.end { opacity: 1; }

/* support entrances */
html.js .rise { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
html.js .rise.in, html.rm .rise { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* round-2 shared fixes */
.cur button { position: relative; }
.cur button::after { content: ""; position: absolute; inset: -6px 0; }
.past .h-copy, .past .h-sub { visibility: hidden; }
html.rm .stage .h-copy, html.rm .stage .h-sub, html.rm .stage .flank, html.rm .stage .h-top p { opacity: 1 !important; transform: none !important; visibility: visible !important; }
html.rm .h-end { display: none; }
.dock { display: none; }
@media (max-width: 700px) {
  .dock { display: flex; justify-content: center; position: fixed; z-index: 70; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); min-height: 52px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
    opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
  .dock { background: var(--dock-bg, var(--accent)); color: var(--dock-ink, var(--accent-ink)); }
  html.past-hero .dock { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  html.past-hero.at-close .dock { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, 0s, .35s; }
  html.past-hero body { padding-bottom: 84px; }
}