/* ==========================================================================
   Financial Synergy LLC — shared foundation
   Tokens, reset, and the primitives every page uses.
   Ported from the Claude Design canvas.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:             #071411;  /* page ground */
  --ink-plate:       #060c12;  /* hero door plates */
  --ink-card:        #0c1c18;  /* dark cards, light-section ink */
  --ink-card-hover:  #122620;
  --bone:            #e8ece7;  /* light section ground / body on dark */
  --cream:           #f4f1ea;  /* headings on dark */
  --cream-bright:    #fbf7ee;
  --gold:            #c9a24d;
  --gold-light:      #e6c98a;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad-x:  clamp(20px, 6vw, 110px);   /* section gutter */
  --edge-x: clamp(16px, 4vw, 56px);    /* viewport-edge gutter */

  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Set by site.js while the mobile menu is open. */
html.is-scroll-locked,
html.is-scroll-locked body {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  overflow-x: hidden;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }
img { max-width: 100%; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Shared type patterns ---------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.rule-tick {
  width: 26px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.rule-wide {
  width: 54px;
  height: 1px;
  background: var(--gold);
  margin-inline: auto;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prose {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  text-wrap: pretty;
}

/* --- Nav links (masthead on the homepage, header on Team) --------------- */
.navlink {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .72);
  transition: color .3s ease;
}
.navlink:hover { color: var(--gold); }

.navlink--pill {
  border: 1px solid rgba(201, 162, 77, .55);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--gold);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.navlink--pill:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* --- Scroll reveal ----------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Keyframes --------------------------------------------------------- */
@keyframes fs-spin-centered {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes fs-cue {
  0%, 100% { transform: translateY(0);   opacity: .35; }
  50%      { transform: translateY(9px); opacity: 1; }
}
@keyframes fs-ken {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.07); }
}

/* ==========================================================================
   Generic sections
   ========================================================================== */
.section {
  position: relative;
  padding: clamp(90px, 12vw, 180px) var(--pad-x);
}
.section--dark  { background: var(--ink);  color: var(--bone); overflow: hidden; }
.section--light { background: var(--bone); color: var(--ink-card); }

.section__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}

.display-xl {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 7.4vw, 118px);
  line-height: .9;
  letter-spacing: -.045em;
}

/* ==========================================================================
   Reduced motion — hold the decorative loops still, keep the page usable
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero__orbit,
  .dial__mark,
  .plate__ken,
  .hero__cue-line {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dial__hand,
  .value,
  .timeline__item,
  .dial__letter,
  .timeline__badge {
    transition-duration: .01ms !important;
  }
}