/* NSG concepts — shared base. Tokens from NSG/brand-brain/tokens/nsg-tokens.css (v1.0) */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap");

:root {
  --red: #EC3013; --red-d: #C42410;
  --ink: #201E1D; --gray: #F3F2F2; --line: #E2E0DF; --muted: #6B6766; --white: #fff;
  --disp: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --r: 4px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-io: cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.55 var(--body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1,h2,h3 { font-family: var(--disp); font-weight: 700; line-height: .92; letter-spacing: -.01em; margin: 0; text-transform: uppercase; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { width: 100%; min-width: 0; }
label { min-width: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.eyebrow { font: 600 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.btn { display: inline-flex; align-items: center; gap: .6em; padding: 15px 22px; border: 0; border-radius: var(--r);
  background: var(--red); color: #fff; font: 600 15px/1 var(--body); text-decoration: none; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), background .3s; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn:hover { background: var(--red-d); transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn .ar { transition: transform .3s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }
.btn.ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.btn.ghost:hover { background: rgba(127,127,127,.12); }

/* kinetic helpers */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split .w > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.split.in .w > i { transform: none; }

.wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.wa:hover { transform: scale(1.08) rotate(-6deg); }
.wa svg { width: 28px; fill: #fff; }

/* concept switcher (prototype only) */
.cbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; gap: 4px; padding: 5px; border-radius: 99px;
  background: rgba(32,30,29,.92); backdrop-filter: blur(8px); font: 600 12px/1 var(--body); }
.cbar a { color: #fff; text-decoration: none; padding: 9px 13px; border-radius: 99px; opacity: .7; white-space: nowrap; }
.cbar a.on { background: var(--red); opacity: 1; }
@media (max-width: 560px) { .cbar { left: 12px; transform: none; } .cbar a { padding: 8px 10px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}