/* ==========================================================================
   Lexi · shared foundation. OWNED BY THE LEAD. Section files must not edit this;
   put section-specific styles in css/<section>.css, scoped under the section id.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#181818;          /* page */
  --bg-black:#000;       /* hero */
  --surface:#1f1f1f;     /* raised cards */
  --surface-2:#262626;   /* chips, inputs */
  --line:#2e2c2a;        /* hairlines on dark */
  --cream:#eae3dd;       /* light card / primary light text */
  --cream-2:#ddd4cc;

  /* text */
  --fg:#eae3dd;          /* strong text on dark */
  --taupe:#a8978c;       /* headline secondary / labels */
  --taupe-2:#897972;     /* muted headline on light */
  --muted:#7c736c;       /* body muted */
  --ink:#1a1918;         /* text on light */

  /* brand */
  /* NO GREEN OR TEAL anywhere on the site (brand decision). */
  --accent:#ff8f5a;      /* Lexi apricot · primary accent */
  --accent-hover:#ffab80;
  --accent-ink:#2b1105;  /* text on accent */
  --accent-soft:rgba(255,143,90,.14); /* tints, glows, active backgrounds */
  --violet:#9b9cff;      /* secondary accent: "teammate is working" states, data series 2 */
  --sky:#7cb8ff;         /* tertiary: info / data series 3 */
  --ok:#ffd28a;          /* "done"/approved state · warm gold, NOT green */
  --danger:#ff7a7a;      /* errors */

  /* type */
  /* Owner decision: Montserrat for EVERYTHING (headings, body, labels, buttons). */
  --font-display:"Montserrat",system-ui,sans-serif;
  --font-mono:"Montserrat",system-ui,sans-serif; /* kept as a name for the small uppercase label style */

  /* layout */
  --container:1312px;
  --gutter:64px;
  --header-h:72px;
  --r-sm:6px; --r:8px; --r-lg:16px; --r-xl:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (max-width:1024px){:root{--gutter:32px}}
@media (max-width:640px){:root{--gutter:16px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}

.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:var(--r)}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* small uppercase label style (nav, buttons, tags). Owner decision: NO eyebrows above headings. */
.mono{font-family:var(--font-mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.eyebrow{display:none!important} /* safety net: eyebrows are not used on this site */

/* display headings: two-tone, accent full stop */
.display{font-family:var(--font-display);font-weight:700;color:var(--taupe)}
.display .hi{color:var(--fg)}
.display .dot{color:var(--accent)}
.display-xl{font-size:clamp(56px,7.8vw,112px);line-height:.9;letter-spacing:-.04em}
.display-l{font-size:clamp(44px,6.7vw,96px);line-height:.9;letter-spacing:-.03em}
.display-m{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.03em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--r-sm);font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn .arrow{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arrow{animation:arrow-kick .5s var(--ease)}
@keyframes arrow-kick{0%{transform:none}40%{transform:translateX(4px)}100%{transform:none}}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-dark{background:var(--surface-2);color:var(--fg)}
.btn-dark:hover{background:#333}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{background:#fff}
.btn-lg{height:48px;padding:0 20px;font-size:13px}

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

/* ==========================================================================
   STATUS SYMBOL (owner decision, 7 Oct 2026): wherever the site shows a status, use a small solid
   rounded square. No border, no ring, no glow, no halo. Colour comes from the theme, never green.
   Usage: <span class="status-sq" aria-hidden="true"></span> next to the status text, plus an
   optional state class. Sizes with the surrounding text (about cap height).
   ========================================================================== */
.status-sq{display:inline-block;flex:none;width:.62em;height:.62em;min-width:7px;min-height:7px;border-radius:22%;
  background:var(--status-c,var(--accent));border:0;outline:0;box-shadow:none;vertical-align:.02em}
.status-sq.is-live,.status-sq.is-active{--status-c:var(--accent)}      /* listening, live, in progress */
.status-sq.is-working{--status-c:var(--violet)}                       /* thinking, working */
.status-sq.is-info{--status-c:var(--sky)}                             /* informational */
.status-sq.is-done{--status-c:var(--ok)}                              /* done, approved, ready */
.status-sq.is-wait{--status-c:var(--taupe)}                           /* waiting, paused, idle */
.status-sq.is-error{--status-c:var(--danger)}                         /* blocked, failed */
/* optional gentle blink for live states (opacity only, never a ring) */
.status-sq.is-blink{animation:status-sq-blink 1.6s var(--ease) infinite}
@keyframes status-sq-blink{0%,100%{opacity:1}50%{opacity:.35}}