/* ============================================================
   REFLEX BRAND.CSS  —  website-matched
   Semantic + component layer on top of tokens.css (the 1:1 mirror
   of workreflex.com's Tailwind v4 theme). Every value here resolves
   to a real site token. Source of truth: https://dev.workreflex.com/

   Type system (measured from the live site):
   - Display headlines  -> QuincyCF serif, weight 700  (the hero look)
   - Section heads (h2/h3) + body -> CircularStd 400/500/600
   - Text color #292929 (gray-800). Page background #fbfbfb (background-sky).
   - Primary button: black #1a1a1a, rounded-full pill.
   - Eyebrow: pink-200 #ffe6e6 rounded-full pill.
   ============================================================ */

@import url("tokens.css");

/* ---- FONTS (self-hosted from the live site) ---- */
@font-face { font-family:"CircularStd"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/assets/fonts/CircularStd-Book.woff2") format("woff2"), url("/assets/fonts/CircularStd-Book.woff") format("woff"); }
@font-face { font-family:"CircularStd"; font-weight:500; font-style:normal; font-display:swap;
  src:url("/assets/fonts/CircularStd-Medium.woff2") format("woff2"), url("/assets/fonts/CircularStd-Medium.woff") format("woff"); }
@font-face { font-family:"CircularStd"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/assets/fonts/CircularStd-Bold.woff2") format("woff2"), url("/assets/fonts/CircularStd-Bold.woff") format("woff"); }
@font-face { font-family:"CircularStd"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/assets/fonts/CircularStd-Black.woff2") format("woff2"), url("/assets/fonts/CircularStd-Black.woff") format("woff"); }
/* QuincyCF display serif. The site maps weights 500-900 to the Bold cut. */
@font-face { font-family:"QuincyCF"; font-weight:500 900; font-style:normal; font-display:swap;
  src:url("/assets/fonts/QuincyCF-Bold.woff2") format("woff2"), url("/assets/fonts/QuincyCF-Bold.woff") format("woff"); }
@font-face { font-family:"QuincyCF-Italic"; font-weight:500 600; font-style:italic; font-display:swap;
  src:url("/assets/fonts/QuincyCF-BoldItalic.woff2") format("woff2"); }
@font-face { font-family:"QuincyCF-Italic"; font-weight:700 900; font-style:italic; font-display:swap;
  src:url("/assets/fonts/QuincyCF-BlackItalic.woff2") format("woff2"); }

/* ---- SEMANTIC ALIASES (named off the site's web-* layer) ---- */
:root {
  --text:        var(--color-gray-800);    /* #292929 web-primary  */
  --text-muted:  var(--color-stone-400);   /* #a1a1aa web-secondary */
  --surface:     var(--color-background-sky); /* #fbfbfb page bg     */
  --surface-accent: var(--color-blue-75);   /* #ebf2f6 web-accent    */
  --surface-cream:  var(--color-yellow-100);
  --navy:        var(--color-navy-500);     /* #284b63 */
  --navy-deep:   var(--color-navy-800);     /* #182d3b */
  --pink:        var(--color-pink-500);     /* #ff9a9a wordmark      */
  --pink-pill:   var(--color-pink-200);     /* #ffe6e6 eyebrow pill  */
  --ink:         var(--color-black);        /* #1a1a1a button        */
  --hairline:    var(--color-navy-100);
}

/* ============================================================ BASE */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  margin:0;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:1.125rem;        /* 18px, the site's airy body size */
  line-height:1.6;
  color:var(--text);
  background:var(--surface);
}
p { margin:0 0 1.25rem; max-width:65ch; }
a { color:var(--navy); text-decoration:none; }
a:hover { text-decoration:underline; }
strong { font-weight:600; }
img { max-width:100%; display:block; }

/* Display headlines use the serif. */
h1, .display {
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(2.5rem, 4.5vw, 3.5rem);  /* ~40 to 56px, site hero = 56 */
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--text);
  margin:0 0 1.25rem;
}
/* Section heads use Circular Std semibold (matches the site). */
h2 { font-family:var(--font-sans); font-weight:600; font-size:1.875rem; line-height:1.2; color:var(--text); margin:0 0 1rem; }
h3 { font-family:var(--font-sans); font-weight:600; font-size:1.5rem;  line-height:1.2; color:var(--text); margin:0 0 .75rem; }

ul { padding-left:1.1rem; margin:0 0 1.25rem; }
li { margin-bottom:.5rem; }

/* ============================================================ LAYOUT */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.section { padding:5.5rem 0; }
.section--accent { background:var(--surface-accent); }      /* #ebf2f6 */
.section--cream  { background:var(--surface-cream); }
.section--navy   { background:var(--navy); color:#fff; }
.section--navy h1,.section--navy h2,.section--navy h3 { color:#fff; }
/* Soft organic wash backdrops, pulled from the marketing site (reflex-mktg/public/images). */
.section--wash { background-color:var(--surface); background-image:url("/assets/bg/background-wash-2.png"); background-size:cover; background-position:center; background-repeat:no-repeat; }
.section--wash-alt { background-color:var(--surface); background-image:url("/assets/bg/background-wash-1.png"); background-size:cover; background-position:center bottom; background-repeat:no-repeat; }
.section--wash-3 { background-color:var(--surface); background-image:url("/assets/bg/background-wash-3.png"); background-size:cover; background-position:center top; background-repeat:no-repeat; }

.grid { display:grid; gap:1.5rem; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.hr { height:1px; background:var(--hairline); border:0; margin:2.5rem 0; }

/* ============================================================ EYEBROW PILL */
.eyebrow {
  display:inline-block;
  background:var(--pink-pill);
  color:var(--text);
  font-size:.9375rem;
  font-weight:500;
  padding:.45rem 1rem;
  border-radius:9999px;
  margin-bottom:1.25rem;
}
.eyebrow--navy { background:var(--color-navy-100); }

/* ============================================================ BUTTONS (rounded-full pills) */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-sans); font-weight:500; font-size:1rem; line-height:1;
  background:var(--ink); color:#fff;
  padding:15px 1.6rem;
  border:0; border-radius:9999px; cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
.btn:hover { text-decoration:none; opacity:.88; }
.btn:active { transform:translateY(1px); }
.btn--ghost { background:#fff; color:var(--text); box-shadow:inset 0 0 0 1px var(--color-navy-200); }
.btn--ghost:hover { opacity:1; box-shadow:inset 0 0 0 1px var(--navy); }
.btn .arrow { font-size:1.1em; line-height:0; }

/* ============================================================ CARDS */
.card {
  background:#fff;
  border-radius:1rem;            /* radius-2xl */
  box-shadow:var(--shadow-md);
  padding:1.75rem;
}
.card--lg { border-radius:1.5rem; box-shadow:var(--shadow-lg); padding:2.25rem; }

/* ============================================================ STAT */
.stat__num { font-family:var(--font-serif); font-weight:700; font-size:3.75rem; line-height:1; color:var(--text); }
.stat__label { font-size:1rem; color:var(--text-muted); margin-top:.5rem; }

/* ============================================================ QUOTE */
.quote__body { font-family:var(--font-serif); font-weight:700; font-size:1.75rem; line-height:1.3; color:var(--text); }
.quote__author { font-size:.95rem; color:var(--text-muted); margin-top:1rem; }

/* ============================================================ HEADER */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(251,251,251,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.site-header .bar { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 0; }
.wordmark { font-family:var(--font-serif); font-weight:700; font-size:1.9rem; color:var(--pink); letter-spacing:-0.01em; }
.nav { display:flex; align-items:center; gap:2rem; }
.nav a { color:var(--text); font-weight:500; font-size:1rem; }
.nav a:hover { text-decoration:none; }
.nav a.active { border-bottom:2px solid var(--text); padding-bottom:.35rem; }

/* ============================================================ FOOTER */
.site-footer { background:var(--navy-deep); color:#fff; padding:3rem 0; font-size:.95rem; }
.site-footer a { color:#fff; opacity:.85; }

/* ============================================================ CAROUSEL DOTS */
.dots { display:flex; gap:.6rem; justify-content:center; margin-top:2rem; }
.dot { width:11px; height:11px; border-radius:50%; background:var(--color-navy-200); }
.dot.active { background:var(--ink); }

/* ============================================================ FAQ */
.faq__item { border-bottom:1px solid var(--hairline); padding:1.25rem 0; }
.faq__q { font-weight:600; font-size:1.1rem; color:var(--text); }
.faq__a { color:var(--text-muted); margin-top:.5rem; }

/* ============================================================ RESPONSIVE */
@media (max-width:820px){
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .section { padding:3.5rem 0; }
  .nav { gap:1rem; }
}