/* SparkSynergy site — base styles, design-system components, and responsive layer.
   Layout comes from inline styles exported from Claude Design; this file holds what
   the design system's React components provided, plus mobile overrides. */

body { margin: 0; background: var(--color-linen); color: var(--text-body); font-family: var(--font-body); }
::selection { background: var(--color-marigold); color: var(--color-ink); }
a { color: var(--color-navy); text-decoration: none; }
a:hover { color: var(--color-spark); }
img { max-width: 100%; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 110px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slowDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* — Button — */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.btn:hover { filter: brightness(0.94); }
.btn:active { transform: scale(0.98); }
.btn--sm { padding: 8px 16px; font-size: 13.5px; gap: 8px; }
.btn--md { padding: 12px 22px; font-size: 15px; gap: 10px; }
.btn--lg { padding: 16px 30px; font-size: 17px; gap: 12px; }
.btn--primary { background: var(--color-spark); color: #fff; border: 1px solid transparent; }
.btn--navy { background: var(--color-navy); color: #fff; border: 1px solid transparent; }
.btn--secondary { background: transparent; color: var(--color-navy); border: 1px solid var(--border-strong); }
.btn--ghost { background: transparent; color: var(--color-navy); border: 1px solid transparent; }
button.btn { margin: 0; }

/* — SectionLabel — */
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted);
}
.section-label--navy { color: var(--color-navy); }
.section-label--spark { color: var(--color-spark-ink); }
.section-label--marigold { color: var(--color-marigold-ink); }
.section-label--onDark { color: var(--text-on-dark-muted); }
.section-label__index { color: var(--color-spark); font-weight: 600; }

/* — HumanMark (circle) — */
.human-mark { position: relative; display: inline-block; }
.human-mark svg { position: absolute; inset: -14% -8%; width: 116%; height: 128%; pointer-events: none; overflow: visible; }

/* — StatBlock — */
.stat { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stat__value {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6vw, 72px);
  line-height: 0.95; letter-spacing: var(--tracking-display); color: var(--color-navy);
}
.stat--spark .stat__value { color: var(--color-spark); }
.stat--marigold .stat__value { color: var(--color-marigold-ink); }
.stat--ink .stat__value { color: var(--color-ink); }
.stat__label { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 32ch; }

/* — PullQuote — */
.pull-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); max-width: 30ch; }
.pull-quote__mark { font-family: var(--font-serif); font-size: 64px; line-height: 0.6; color: var(--color-spark); font-style: italic; }
.pull-quote blockquote {
  margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.35; color: var(--color-ink); letter-spacing: -0.01em;
}
.pull-quote__cite { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }

/* — FlowRule — */
.flow-rule { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.flow-rule > span:first-child, .flow-rule > span:last-child { flex: 1; border-radius: 999px; }
.flow-rule > span:first-child { background: var(--flow-input); }
.flow-rule > span:last-child { background: var(--flow-output); }
.flow-rule--horizontal { flex-direction: row; width: var(--flow-length); }
.flow-rule--horizontal > span:first-child, .flow-rule--horizontal > span:last-child { height: 2px; }
.flow-rule--vertical { flex-direction: column; width: 2px; height: var(--flow-length); }
.flow-rule--vertical > span:first-child, .flow-rule--vertical > span:last-child { width: 2px; }
.flow-rule__diamond { width: 11px; height: 11px; background: var(--flow-transform); transform: rotate(45deg); border-radius: 2px; flex-shrink: 0; }

/* — Card — */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.card--quiet { background: var(--surface-card); box-shadow: var(--shadow-sm); border: 1px solid var(--border-quiet); }
.card--editorial { background: var(--surface-panel); box-shadow: none; border: 1px solid transparent; }
.card--resource { background: var(--surface-card); box-shadow: var(--shadow-md); border: 1px solid var(--border-quiet); }
.card--proof { background: var(--surface-raised); box-shadow: var(--shadow-sm); border: 1px solid var(--border-quiet); }
.card--edge-navy { border-left: var(--border-accent-width) solid var(--color-navy); }
.card--edge-marigold { border-left: var(--border-accent-width) solid var(--color-marigold); }
.card--edge-spark { border-left: var(--border-accent-width) solid var(--color-spark); }

/* — Modals — */
.modal__overlay { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
.modal button[data-close]:hover { background: rgba(11,15,46,0.7) !important; }

/* ——— Responsive layer ———
   The design is composed at 1440px. Below these widths, fixed multi-column
   grids stack and the generous 48px gutters tighten. */
@media (max-width: 1080px) {
  .masthead-nav > a:not(:last-child) { display: none; }
}

@media (max-width: 900px) {
  .pad-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  .masthead-top { padding: 7px 24px !important; }
  .masthead-top > span:last-child { display: none; }
  .masthead-main { padding: 12px 24px !important; }

  .stack-md { grid-template-columns: 1fr !important; gap: 32px !important; }
  .wrap-md { flex-wrap: wrap; }

  .hero-rail { display: none !important; }
  .hero-photo { position: relative !important; width: 100% !important; height: 480px !important; }
  .hero-inner { padding: 48px 24px 0 !important; }
  .hero-copy { max-width: 100% !important; }

  .proof-split > div:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
  .proof-split > div:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; padding: 32px 24px !important; }
  .proof-split { gap: 0 !important; }

  .discipline { gap: 0 !important; }
  .discipline > div[style*="padding"] { padding: 40px 0 !important; }
  .discipline--reverse > div:last-child { order: -1; }

  .founder { padding: 0 !important; }
  .founder-grid { gap: 0 !important; }
  .founder-grid > div:first-child { min-height: 420px !important; }
  .founder-grid > div:last-child { padding: 56px 24px !important; max-width: none !important; }

  .unstick-md { position: static !important; }

  .modal article > header { padding: 72px 24px 36px !important; }
  .modal article > div { padding: 32px 24px !important; gap: 48px !important; }
  .modal__overlay { padding: 16px 12px !important; }
}

@media (max-width: 560px) {
  .masthead-main { gap: 12px !important; }
  .masthead-nav .btn { padding: 8px 14px; font-size: 12.5px; line-height: 1.2; white-space: normal; text-align: center; max-width: 150px; }
  .masthead-main img { height: 24px !important; }
  .masthead-main span[style*="font-size: 22px"] { font-size: 18px !important; }
  .btn--lg { white-space: normal; text-align: center; }
  span[aria-hidden="true"][style*="-webkit-text-stroke"] { display: none; }
}