/* ═══════════════════════════════════════════════════════════════════════════
   AscendWorks — ascendworks.co
   One stylesheet, one request. No @import, no build step.

   Layer order is the cascade contract: anything in `components` beats anything
   in `base`, regardless of selector specificity. That is what lets every rule
   below stay a single flat class. The only !important in the file is in the
   reduced-motion block, where overriding author styles is the whole point.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens, base, layout, components;

/* ═══ TOKENS ═══════════════════════════════════════════════════════════════
   Base ramps, then semantic aliases. Components reference the SEMANTIC names
   only — never a ramp step, never a literal. Two rules carried from the brand
   spec: primary is a fill and never a text colour (brand-coloured text is
   primary-700+), and semantic families are fixed so "done" is green in every
   colourway.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer tokens {
  :root {
    /* ── Palette: primary. Follows the colourway (apricot). Interaction only. */
    --primary-50:  #fff8f0;
    --primary-100: #ffeedc;
    --primary-200: #fedcba;
    --primary-300: #fdc692;
    --primary-400: #fcac67;
    --primary-500: #fb923c;
    --primary-600: #e37626;
    --primary-700: #c2410c;
    --primary-800: #9a3412;
    --primary-900: #7c2d12;

    /* ── Palette: neutral. Surfaces, borders, text. Never follows the colourway. */
    --neutral-50:  #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;

    /* ── Palette: semantic. MEANING. Fixed across colourways. */
    --info-50:    #eff6ff;
    --info-500:   #3b82f6;
    --info-700:   #1d4ed8;
    --success-50: #f0fdf4;
    --success-100:#dcfce7;
    --success-500:#22c55e;
    --success-700:#15803d;

    /* ── Palette: agency. Who acted. Also fixed — violet must not become the brand. */
    --ai-500: #8b5cf6;
    --ai-600: #7c3aed;

    /* ── Type. Heading and body share the system stack: hierarchy comes from
       size and weight, never a second face. IBM Plex Sans is the wordmark face
       ONLY; IBM Plex Mono carries numerals and code. Every stack ends in a
       generic family so a failed webfont still sets. */
    --font-body:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading:  var(--font-body);
    --font-mono:     "IBM Plex Mono", Menlo, ui-monospace, monospace;
    --font-wordmark: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  30px;
    --text-3xl:  38px;
    --text-4xl:  48px;
    --text-5xl:  60px;

    --leading-tight:   1.15;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;

    --weight-medium:   500;
    --weight-semibold: 600;

    --tracking-tight: -0.02em;
    --tracking-caps:   0.08em;

    --measure-body: 68ch;

    /* ── Space. 4px grid. */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    --pad-card:    16px;
    --pad-section: 80px;
    --container-max: 1200px;

    /* ── Radius. Controls 6, cards 8, panels 12. Full is for pills only. */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 999px;

    /* ── Elevation. Borders do the separating; shadow is for things that float. */
    --shadow-xs: 0 1px 2px rgb(17 24 39 / 0.05);
    --shadow-md: 0 2px 4px rgb(17 24 39 / 0.06), 0 4px 12px rgb(17 24 39 / 0.08);
    --ring-focus: 0 0 0 3px rgb(251 146 60 / 0.45);

    /* ── Motion. Short, flat, functional. Nothing bounces — overshoot reads as
       imprecision in a product that reports on machine work. */
    --dur-fast: 120ms;
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --transition-control:
      background-color var(--dur-fast) var(--ease-standard),
      border-color     var(--dur-fast) var(--ease-standard),
      color            var(--dur-fast) var(--ease-standard),
      box-shadow       var(--dur-fast) var(--ease-standard);

    /* ── Semantic aliases. Everything below this line is what components use. */
    --surface-page:    #ffffff;
    --surface-card:    #ffffff;
    --surface-sunken:  var(--neutral-50);
    --surface-inverse: var(--neutral-900);

    --text-body:       var(--neutral-900);
    --text-muted:      var(--neutral-500);
    --text-subtle:     var(--neutral-400);
    --text-heading:    var(--neutral-900);
    --text-on-brand:   #ffffff;
    --text-on-inverse: #ffffff;
    --text-link:       var(--primary-700);
    --text-link-hover: var(--primary-800);

    --border-subtle: var(--neutral-200);
    --rule-hairline: 1px solid var(--neutral-200);

    --action-primary-bg:       var(--primary-500);
    --action-primary-bg-hover: var(--primary-600);
    --action-primary-fg:       #ffffff;

    --status-progress-fg:  var(--info-700);
    --status-progress-bg:  var(--info-50);
    --status-progress-dot: var(--info-500);
    --status-done-dot:     var(--success-500);
    --status-idle-dot:     var(--neutral-300);
    --badge-alpha-fg:      var(--success-700);
    --badge-alpha-bg:      var(--success-50);
    --badge-alpha-border:  var(--success-100);

    /* Agency. Staff reads orange but is a FIXED hex — it must not follow the
       colourway, or "who acted" would change meaning when the brand does. */
    --agency-ai-fg:      var(--ai-600);
    --agency-ai-dot:     var(--ai-500);
    --agency-staff-fg:   #fb923c;
    --agency-staff-dot:  #f97316;

    --brand-spark: var(--primary-500);
  }
}

/* ═══ BASE ═════════════════════════════════════════════════════════════════ */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

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

  body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  p { margin: 0; text-wrap: pretty; }

  a {
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition-control);
  }
  a:hover { color: var(--text-link-hover); }

  svg { display: block; }

  :focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-sm);
  }

  ::selection { background: var(--primary-200); color: var(--neutral-900); }

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

/* ═══ LAYOUT ═══════════════════════════════════════════════════════════════ */

@layer layout {
  /* The single horizontal rhythm for the page. Every band uses .section, every
     inner measure uses .container — so gutters can never drift apart. */
  .section { padding: var(--pad-section) var(--space-6); }
  .section--hero { padding-top: 96px; padding-bottom: var(--space-16); }
  .section--flush-top { padding-top: 0; }
  .section--sunken {
    background: var(--surface-sunken);
    border-top: var(--rule-hairline);
    border-bottom: var(--rule-hairline);
  }

  .container {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
  .split--center { align-items: center; }
  .split--top    { align-items: start; }

  .triptych {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .triptych--below-title { margin-top: var(--space-10); }

  .stack { display: flex; flex-direction: column; }
  .stack--3 { gap: var(--space-3); }
  .stack--5 { gap: var(--space-5); }

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--surface-inverse);
    color: var(--text-on-inverse);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: top var(--dur-fast) var(--ease-standard);
  }
  .skip-link:focus { top: var(--space-4); color: var(--text-on-inverse); }

  @media (max-width: 900px) {
    .split, .triptych { grid-template-columns: 1fr; gap: var(--space-10); }
  }
  @media (max-width: 600px) {
    .section { padding-inline: var(--space-4); }
  }
}

/* ═══ COMPONENTS ═══════════════════════════════════════════════════════════ */

@layer components {

  /* ── Wordmark ────────────────────────────────────────────────────────────
     One component, three sizes. Size comes from font-size, colour from
     currentColor, and the spark is a pseudo-element — so an instance is markup
     with no styling attached to it at all. The per-letter kerning is optical
     correction for this specific letterform sequence and is defined once here,
     rather than being re-tuned by hand at every size. */
  .wordmark {
    /* Spark colour is a property of the instance, not a separate rule — the
       footer mark carries a dark spark, everywhere else it is brand orange. */
    --spark: var(--brand-spark);

    font-family: var(--font-wordmark);
    font-weight: var(--weight-medium);
    font-size: 22px;
    line-height: 0.8;
    letter-spacing: -0.008em;
    color: var(--neutral-900);
    white-space: nowrap;
  }
  .wordmark--lg      { font-size: 20px; letter-spacing: -0.006em; }
  .wordmark--sm      { font-size: 16px; }
  .wordmark--inverse { color: var(--text-on-inverse); }
  .wordmark--quiet   { opacity: 0.55; --spark: currentColor; }

  .wordmark i { font-style: normal; }
  .wordmark .k-a { letter-spacing: -0.014em; }
  .wordmark .k-d { letter-spacing: -0.016em; }
  .wordmark .k-w { letter-spacing: -0.010em; }
  .wordmark .k-r { letter-spacing: -0.006em; }

  /* The spark sits off the shoulder of the "e". Sized in em so it tracks the
     wordmark at every size without a second declaration. */
  .wordmark .spark {
    position: relative;
    display: inline-block;
  }
  .wordmark .spark::after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 100%;
    width: 0.5em;
    height: 0.5em;
    margin-left: -0.374em;
    margin-bottom: -0.294em;
    background: var(--spark);
    clip-path: polygon(90% 10%, 18% 36%, 46% 54%, 64% 82%);
  }

  /* ── Buttons ─────────────────────────────────────────────────────────────
     One primary action, two sizes. The chevron is generated, not typed. */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--action-primary-fg);
    background: var(--action-primary-bg);
    border: 0;
    border-radius: var(--radius-md);
    padding: 14px 24px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-control);
  }
  .btn:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }

  .btn--sm { font-size: var(--text-sm); padding: 9px 16px; }

  .btn--chevron::after {
    content: "\203A";
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
  }

  /* ── Eyebrow ─────────────────────────────────────────────────────────────
     The small uppercase label above every section heading. */
  .eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ── Pill ────────────────────────────────────────────────────────────────
     Status and badge chips. Colour comes from a modifier; shape never varies. */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    padding: 3px 9px;
    white-space: nowrap;
  }
  .pill--alpha {
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--badge-alpha-fg);
    background: var(--badge-alpha-bg);
    border: 1px solid var(--badge-alpha-border);
    padding: 4px 10px;
  }
  .pill--running {
    color: var(--status-progress-fg);
    background: var(--status-progress-bg);
  }

  /* ── Dot ─────────────────────────────────────────────────────────────────
     The state marker. One shape, colour by modifier — this is the piece that
     was being hand-written with a literal hex at every call site. */
  .dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    flex: none;
  }
  .dot--lg { width: 8px; height: 8px; }
  .dot--done     { color: var(--status-done-dot); }
  .dot--progress { color: var(--status-progress-dot); }
  .dot--idle     { color: var(--status-idle-dot); }

  /* ── Actor ───────────────────────────────────────────────────────────────
     Who performed a step. Agent is violet, a person is staff-orange — both
     fixed hexes, deliberately outside the colourway. */
  .actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 11px;
    white-space: nowrap;
  }
  .actor--agent { color: var(--agency-ai-fg); }
  .actor--agent .dot { color: var(--agency-ai-dot); }
  .actor--staff { color: var(--agency-staff-fg); }
  .actor--staff .dot { color: var(--agency-staff-dot); }

  /* ── Site header ─────────────────────────────────────────────────────────*/
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-page);
    border-bottom: var(--rule-hairline);
  }
  .site-header__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .site-header .btn { margin-left: auto; }

  @media (max-width: 600px) {
    .site-header__inner { padding-inline: var(--space-4); }
  }

  /* ── Hero ────────────────────────────────────────────────────────────────*/
  .hero__title {
    font-size: var(--text-5xl);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-top: var(--space-5);
    max-width: 18ch;
  }
  .hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: var(--measure-body);
  }
  .hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    flex-wrap: wrap;
  }
  .hero__aside { font-size: var(--text-sm); color: var(--text-subtle); }

  @media (max-width: 900px) { .hero__title { font-size: var(--text-4xl); } }
  @media (max-width: 600px) { .hero__title { font-size: var(--text-3xl); } }

  /* ── Run panel ───────────────────────────────────────────────────────────
     The product mock in the hero. Decorative: it is marked aria-hidden in the
     markup, because a screen reader announcing a fake paused workflow as if it
     were live UI is worse than silence. */
  .run {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
  .run__head,
  .run__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-4);
  }
  .run__head { border-bottom: var(--rule-hairline); }
  .run__foot {
    border-top: var(--rule-hairline);
    background: var(--neutral-50);
    padding-block: var(--space-3);
    gap: 10px;
  }
  .run__title {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
  }
  .run__head .pill { margin-left: auto; }

  .run__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .run__step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--text-body);
  }
  .run__step--pending { color: var(--text-muted); }

  .run__status { font-size: var(--text-xs); color: var(--text-muted); }
  .run__cta {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-on-inverse);
    background: var(--surface-inverse);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
  }

  /* ── Card ────────────────────────────────────────────────────────────────*/
  .card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--pad-card);
    box-shadow: var(--shadow-xs);
  }
  .card__title { font-size: var(--text-lg); }
  .card__body {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
  }

  /* ── Section heading ─────────────────────────────────────────────────────*/
  .section__title {
    font-size: var(--text-3xl);
    margin-top: var(--space-3);
    max-width: 26ch;
  }
  .section__intro {
    margin-top: var(--space-5);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: var(--measure-body);
  }

  /* ── Numbered list ───────────────────────────────────────────────────────
     Numbers are generated by a CSS counter, so adding or reordering an item is
     a markup change only — the 01/02/03 sequence cannot fall out of step. */
  .steps { counter-reset: step; }

  .steps__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-5);
    border-bottom: var(--rule-hairline);
  }
  .steps__item:last-child { padding-bottom: 0; border-bottom: 0; }

  .steps__item::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--primary-700);
  }

  .steps__title { font-weight: var(--weight-semibold); }
  .steps__body {
    margin-top: 6px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
  }

  /* ── Call to action band ─────────────────────────────────────────────────*/
  .cta {
    background: var(--surface-inverse);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    display: flex;
    align-items: center;
    gap: var(--space-10);
    flex-wrap: wrap;
  }
  .cta__copy { flex: 1; min-width: 320px; }
  .cta__title {
    color: var(--text-on-inverse);
    font-size: var(--text-2xl);
    margin-top: var(--space-5);
  }
  .cta__body {
    margin-top: var(--space-3);
    max-width: 52ch;
    line-height: var(--leading-normal);
    color: var(--neutral-400);
  }

  @media (max-width: 600px) { .cta { padding: var(--space-8); } }

  /* ── Footer ──────────────────────────────────────────────────────────────*/
  .site-footer {
    border-top: var(--rule-hairline);
    padding: var(--space-10) var(--space-6);
  }
  .site-footer__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-subtle);
  }
  .site-footer__copyright { margin-left: auto; }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }

  @media (max-width: 600px) {
    .site-footer { padding-inline: var(--space-4); }
    .site-footer__copyright { margin-left: 0; }
  }
}