/* CHIKARA Health brand layer: tokens, grain, buttons, eyebrow. Shared by the landing page and CHIKARA Wellness. */
:root {
  --ivory: #F5F0E4; --ivory-light: #FAF7F0; --vellum: #F7F1E5; --parchment: #EDE8DB; --cream: #F4E7D0;
  --teal: #0D7377; --teal-deep: #0A4F52; --teal-mid: #14919B; --teal-mist: #D4F1F2; --forest: #0E2A1C;
  --mustard: #C9A227; --mustard-light: #E0BC4A; --mustard-ink: #8A6E12;
  --charcoal: #1A1F1E; --stone: #5E6662; --danger: #9B2430; --ok: #1A6B3C; --warn: #8A6E12;
  --border: rgba(13, 115, 119, .12); --line: rgba(10, 79, 82, .14);
  --shadow-soft: 0 8px 32px rgba(10, 79, 82, .08); --shadow-medium: 0 18px 54px rgba(10, 79, 82, .16);
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1160px; --nav-h: 72px; --ease: cubic-bezier(.25, .46, .45, .94); --ease-slow: cubic-bezier(.16, 1, .3, 1);
  --mesh: linear-gradient(118deg, #0A4F52 0%, #0D7377 22%, #14919B 40%, #8A6E12 55%, #C9A227 68%, #0A0A0A 85%, #0A4F52 100%);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-weight: 400; color: var(--charcoal); background: var(--ivory); line-height: 1.7; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* canonical gamazine grain: 320px feDiffuseLighting tile, overlay blend */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9990; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2.4'%3E%3CfeDistantLight azimuth='42' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 320px; mix-blend-mode: overlay; opacity: .36; }
img, svg, video { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: var(--teal-deep); text-decoration: none; transition: color .3s; }
a:hover { color: var(--mustard-ink); }
::selection { background: var(--teal); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--mustard-ink); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 2; }
.eyebrow { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--teal-deep); display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.eyebrow::before { content: ''; width: 28px; height: 3px; border-radius: 999px; background: var(--mesh); background-size: 400% 400%; animation: sweep 28s ease-in-out infinite; flex-shrink: 0; }
.eyebrow--light { color: var(--mustard-light); }
.eyebrow--center { justify-content: center; }
@keyframes sweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1.9rem; min-height: 46px; font-family: var(--font-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-radius: 3px; cursor: pointer; border: 1px solid transparent; transition: all .35s var(--ease); line-height: 1.2; text-align: center; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--mesh { background: var(--mesh); background-size: 400% 400%; animation: sweep 28s ease-in-out infinite; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85); border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 26px rgba(0, 0, 0, .25); }
.btn--mesh:hover { filter: brightness(1.12); transform: translateY(-2px); color: #fff; }
.btn--gold { background: linear-gradient(180deg, #E5BE6A, #C9973A 40%, #96702A); color: #1A140C; border-color: rgba(26, 20, 12, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px rgba(0, 0, 0, .22); }
.btn--gold:hover { filter: brightness(1.06); transform: translateY(-2px); color: #1A140C; }
.btn--ghost-light { background: transparent; color: var(--ivory); border-color: rgba(245, 240, 228, .45); }
.btn--ghost-light:hover { border-color: var(--mustard-light); color: var(--mustard-light); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--teal-deep); border-color: rgba(10, 79, 82, .35); }
.btn--ghost:hover { border-color: var(--mustard-ink); color: var(--mustard-ink); transform: translateY(-2px); }
.badge { display: inline-block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--mustard-light); border: 1px solid rgba(224, 188, 74, .45); padding: .38rem .9rem; border-radius: 999px; background: rgba(201, 162, 39, .12); }
.badge--ink { color: var(--mustard-ink); border-color: rgba(138, 110, 18, .4); background: rgba(201, 162, 39, .1); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn--mesh, .eyebrow::before { animation: none !important; } body::after { opacity: .16; } }