/* Fira base: shared by every direction. Tokens come from style.css (:root). Do not edit per site. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3 { overflow-wrap: break-word; min-width: 0; font-weight: inherit; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(18px, 4.5vw, 64px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* line masks made by fira.js */
.ln { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln-i { display: block; transform-origin: 0 100%; will-change: transform; }

/* hidden only while the motion engine prepares; a head timer and no-JS keep it visible */
.js:not(.fira-ready) [data-split], .js:not(.fira-ready) [data-load], .js:not(.fira-ready) [data-reveal="up"], .js:not(.fira-ready) [data-stagger] > * { opacity: 0; }

/* media frame: any phone photo, any ratio, cropped to the frame */
.media { position: relative; overflow: hidden; background: var(--bg-2); }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* film grain, fixed, never on scrolling layers */
.grain::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain, 0.07); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* marquee: pure CSS, content duplicated in the HTML */
.marquee { overflow: clip; white-space: nowrap; }
.marquee__track { display: inline-flex; width: max-content; animation: marquee var(--marquee-speed, 28s) linear infinite; }
.marquee__track > * { flex: none; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* icons */
.ic { width: 1.15em; height: 1.15em; flex: none; }

/* floating WhatsApp, always present */
.wa-float { position: fixed; z-index: 80; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--wa-bg, var(--fg)); color: var(--wa-fg, var(--bg)); box-shadow: 0 12px 30px -10px color-mix(in oklab, var(--fg) 55%, transparent); text-decoration: none; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.08) rotate(-6deg); }
.wa-float:active { transform: scale(0.94); }
.wa-float::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--wa-bg, var(--fg)); opacity: 0.5; animation: wa-ring 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes wa-ring { from { transform: scale(0.85); opacity: 0.6; } to { transform: scale(1.35); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee__track { animation: none; }
}