/* Keelwork site CSS: the dealt tokens, then the page CSS carried over from demos/b.
   Loaded after the kit (public/kit) so it wins at equal specificity. */

:root {
  --p-bg: #f7f7f5; --p-surface: #ebebe8; --p-ink: #000000; --p-muted: #666662;
  --p-accent: #d0106f; --p-accent-ink: #ffffff; --p-action: #d0106f; --p-action-ink: #ffffff;
  --p-inv-bg: #000000; --p-inv-surface: #010101; --p-inv-ink: #f7f7f5; --p-inv-muted: #828280;
  --p-inv-accent: #d0106f; --p-inv-accent-ink: #ffffff; --p-inv-action: #d0106f; --p-inv-action-ink: #ffffff;
  --font-display: "Urbanist Variable", "Urbanist", system-ui, sans-serif;
  --font-text: "Urbanist Variable", "Urbanist", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.03em;
  --display-tracking-xl: -0.04em;
}

/* In-page anchors (the kit sets scroll-padding-top:0 and relies on each section's --padt to clear the
   fixed nav; bare heading targets like the Writing contents rail have no such padding). Smooth-scroll
   site-wide, and give heading anchor targets a scroll margin so they land below the nav, not under it.
   Reduced motion is honoured: the kit force-resets scroll-behavior to auto under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:is(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: calc(var(--nav, 72px) + var(--s-5)); }

  /* hero art: the lit sky ground with one soft light (no grain: the page's one effect is in #sprint) */
  .hero__art { background:
      radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 82%, white), transparent 70%),
      var(--ground-bg); }
  .hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
  @media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }
  .hero__proof { font-size: var(--t-small); color: var(--muted); }

  /* Keelwork's eval report window and result card, drawn as live HTML inside the hero's frame */
  .kw-win { background: #fff; color: #16181a; border-radius: 12px; overflow: hidden; font: 400 14px/1.4 var(--font-text);
            box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 24px 60px -28px rgb(0 0 0 / .45); text-align: left; }
  .kw-win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(0 0 0 / .07); font-size: 13px; color: #5d6268; }
  .kw-win__dots { display: flex; gap: 6px; } .kw-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcdfe2; }
  .kw-win__body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 480px; }
  .kw-side { padding: 14px 10px; border-right: 1px solid rgb(0 0 0 / .07); display: grid; align-content: start; gap: 2px; font-size: 13px; color: #4d5257; }
  .kw-side > span { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px; }
  .kw-side > span.is-on { background: rgb(0 0 0 / .05); color: #16181a; font-weight: 500; }
  .kw-side > span i { width: 14px; height: 14px; border-radius: 4px; background: currentColor; opacity: .3; flex: none; }
  .kw-side .kw-side__label { color: #6b7076; height: 26px; margin-top: 8px; }
  .kw-main { padding: 16px 18px; padding-right: var(--ly-cut-room); display: grid; align-content: start; gap: 12px; min-width: 0; }
  .kw-main__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .kw-main__title { font: 500 16px/1.2 var(--font-text); letter-spacing: -0.01em; }
  .kw-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; background: #16181a; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
  .kw-tabs { display: flex; gap: 4px; font-size: 13px; } .kw-tabs span { padding: 4px 10px; border-radius: 99px; color: #5f646a; }
  .kw-tabs span.is-on { background: rgb(0 0 0 / .06); color: #16181a; font-weight: 500; }
  .kw-meta { margin: 0; font-size: 13px; color: #5f646a; }
  .kw-rows { display: grid; border-top: 1px solid rgb(0 0 0 / .07); }
  .kw-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid rgb(0 0 0 / .07); font-size: 13px; }
  .kw-row b { display: block; font-weight: 500; color: #16181a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kw-row small { color: #5f646a; font-size: 13px; }
  .kw-row .num { text-align: right; font-variant-numeric: tabular-nums; color: #16181a; }
  .kw-chip { justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #e9eef3; color: #26394d; white-space: nowrap; }
  .kw-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .kw-chip--open { background: #fbe4ef; color: #a00d55; }
  .kw-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); text-align: left;
             box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 18px 44px -20px rgb(0 0 0 / .45); }
  .kw-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
  .kw-card__h { font: 500 14px/1.3 var(--font-text); }
  .kw-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
  .kw-line b { font-weight: 500; color: #16181a; }
  .kw-line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e9eef3; color: #26394d; font-style: normal; font-size: 12px; font-weight: 500; }
  .kw-line i.warn { background: #fbe4ef; color: #a00d55; }
  @media (max-width: 1279px) { .kw-win__body { grid-template-columns: minmax(0, 1fr); } .kw-side { display: none; } }
  @media (max-width: 639px) { .kw-win__body { grid-template-columns: minmax(0, 1fr); } .kw-side { display: none; } .kw-row { grid-template-columns: minmax(0, 1fr) 64px; } .kw-row .num { display: none; } }

  /* the nav's picture cards: a small Keelwork card at the panel's corner */
  .menu-card .panel { --p-h: 200px; }
  .menu-card .kw-card { width: min(280px, 26vw); }

  /* app-frame (sections-library.md, the whole recipe) */
  .app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); overflow: hidden; }
  .app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
  .app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
  .app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
  @media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  @media (max-width: 1023px) {
    .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .app > .app__pane--list { max-height: 252px; }
    .app > .app__pane--list::after { display: none; }
    .app .ui-win__side { display: none; }
    .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
    .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
  }
  @media (max-width: 639px) {
    .app.ui { grid-template-rows: minmax(0, 1fr); }
    .app > .app__pane--list { display: none; }
    .app > .app__pane + .app__pane { border-top: 0; }
  }

  /* the feature cards: one panel height for the group */
  #build .panel { --p-h: 336px; }
  @media (max-width: 639px) { main > section#build .card--open > .panel { --p-h: 190px; } }
  /* the sprint and studio frames: square beside the words from 1024, lower when stacked on a tablet */
  @media (min-width: 1024px) { #sprint .frame--split { --ratio: 100%; } }
  @media (min-width: 640px) and (max-width: 1023px) { #sprint .frame--split, #studio .frame--split { --ratio: 56%; } #prices { --h: 2; } #prices > .wrap { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: calc(var(--padt) + var(--padb) + var(--bar)); } #prices > .wrap > * { min-height: 0; align-self: start; } }
  /* a phone shows the eval window's first row; the frame's foot falls in the window's empty body */
  @media (max-width: 639px) { .kw-row:nth-child(n+2) { display: none; } }
  /* a 320px phone: the main button waits in the menu sheet, so the logo, the button and the menu button never run past the screen */
  @media (max-width: 379px) { .nav:not(.is-open) .nav__actions { display: none; } .nav:not(.is-open) .nav__toggle { margin-left: auto; } }
  /* a phone's 190px panel: the chat drops its day line and fades over 40px, so the answer stands clear */
  @media (max-width: 639px) { #rag .ui-chat__day { display: none; } #rag .stage { --fade-h: 40px; } }
  /* the three steps */
  #process .panel { --p-h: 344px; }
  @media (max-width: 639px) { #process .panel { --p-h: 280px; } }
  /* a tablet holds the stacked steps in two screens */
  @media (min-width: 640px) and (max-width: 1279px) { #process { --h: 2; } }
  @media (min-width: 1024px) and (max-width: 1279px) { #build .panel { --p-h: 264px; } }
  /* Short desktop windows (a 1440 laptop with browser chrome is ~780px tall): the kit fixes every
     section to exactly one screen from 1280px up, so content taller than the window spilled into the
     next block (the close word over the footer links). Let sections grow, as the kit already does
     from 640 to 1279. */
  @media (min-width: 1280px) {
    main > :is(section, .section):not(.hero, .section--hero), footer.closing {
      height: auto; min-height: calc(var(--h, 1) * 100svh);
      display: flex; flex-direction: column;
    }
    main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container),
    footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
    footer.closing > .wrap { grid-template-rows: auto auto; }
  }
  /* A two-screen section (.g2) pushes its second group to the top of screen two, which left a
     ~200px hole between the two rows of capability cards. Let the rows sit one card gap apart. */
  @media (min-width: 640px) {
    main > :is(section, .section).g2:not(.hero, .section--hero) { height: auto; min-height: 0; }
    main > :is(section, .section).g2:not(.hero, .section--hero) > .wrap { height: auto; grid-template-rows: auto auto; row-gap: var(--s-8); }
    main > :is(section, .section).g2:not(.hero, .section--hero) > .wrap > * { align-self: start; }
  }
  /* the capability cards: tall enough that the last toggle row clears the bottom fade */
  #build .panel { --p-h: clamp(300px, 26vw, 390px); }
  /* process steps: the number sits on the heading's line */
  .step-head { display: flex; align-items: center; gap: var(--s-4); }
  .step-head > .step-num { flex: none; }
  /* founder photo: in a frame on the same lit ground as the capability cards, centred, with two
     labels in the site's own UI-chip language (the founder's joke: the collaborator is their son) */
  .kw-founder { --ratio: 104%; align-self: stretch; background: none; border: 0; padding: 0; overflow: visible; }
  .kw-founder > .kw-founder__photo { position: relative; margin: 0; height: min(100%, 620px); max-height: 100%; aspect-ratio: 4 / 5; width: auto; }
  .kw-founder__photo > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md, 14px);
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px rgb(20 30 50 / .45); }
  /* the labels: handwritten notes in marker, no box, as if written on the print beside the arrows */
  .kw-tag { position: absolute; display: block; padding: 0; background: none; box-shadow: none; white-space: nowrap;
    font-family: "Nanum Pen Script", var(--font-text); color: var(--ink); line-height: .95; }
  .kw-tag b { display: block; font-weight: 400; font-size: clamp(30px, 2.8vw, 40px); }
  .kw-tag small { display: block; font-size: clamp(23px, 2vw, 29px); opacity: .75; }
  .kw-tag--lead { transform: rotate(-4deg); transform-origin: left center; }
  .kw-tag--help { text-align: right; transform: rotate(3deg); transform-origin: right center; }
  /* beside each head: the founder's to the right, the son's to the left, hanging over the photo edge */
  .kw-tag { z-index: 3; }
  .kw-tag--lead { top: 14%; left: 74%; }
  .kw-tag--help { top: 46%; right: 74%; }
  /* the arrows: drawn in the photo's own 100 x 125 space, from each label to its person */
  .kw-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
  .kw-arrows path { fill: none; stroke: #fff; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
  .kw-arrows:not(.kw-arrows--defs) { filter: drop-shadow(0 1px 1.5px rgb(60 30 0 / .35)); }
  .kw-arrows marker path { stroke-width: 1.6; }
  .kw-arrows--narrow { display: none; }
  .kw-arrows--defs { width: 0; height: 0; }
  @media (max-width: 639px) {
    .kw-founder { --ratio: 0px; align-self: start; }
    .kw-founder > .kw-founder__photo { height: auto; width: 100%; }
    .kw-tag--lead { top: 3%; left: auto; right: 8px; }
    .kw-tag--help { top: auto; bottom: 7%; right: auto; left: 8px; }
    .kw-arrows--wide { display: none; }
    .kw-arrows--narrow { display: block; }
  }
  /* the kit styles only .card > h3; keep the card title's own type now that it sits in .step-head */
  .card .step-head > h3 { margin: 0; font-family: var(--font-text); font-size: 18px; line-height: 26px; font-weight: 560; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }

/* ---------------------------------------------------------------- shared: inner pages */
/* a frame on the lit sky ground the capability-card panels use (no WebGL effect) */
.frame.kw-lit {
  background-color: var(--ground-bg);
  background-image:
    radial-gradient(70% 90% at 12% 0%, color-mix(in oklab, var(--ground-surface) 92%, white), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in oklab, var(--ground-accent) 34%, var(--ground-bg)), transparent 72%),
    radial-gradient(50% 60% at 85% 10%, color-mix(in oklab, var(--ground-surface) 60%, transparent), transparent 70%);
}

/* ---------------------------------------------------------------- /poc-sprint: the ten days */
.kw-days { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.kw-day { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.kw-day__when { font: 500 var(--t-small)/1.6 var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.kw-day__what { display: grid; gap: var(--s-2); }
.kw-day__what h3 { font: 560 18px/26px var(--font-text); letter-spacing: -0.012em; }
.kw-day__what p { color: var(--muted); max-width: 46ch; }
.kw-days__visual { --ratio: 0px; align-self: stretch; min-height: 420px; }
@media (max-width: 1023px) {
  .kw-days { grid-column: 1 / -1; }
  .kw-days__visual { grid-column: 1 / -1; margin-top: var(--s-6); min-height: 380px; }
}
@media (max-width: 639px) { .kw-day { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); } }

/* ---------------------------------------------------------------- /poc-sprint: what you keep */
#keep .panel { --p-h: clamp(300px, 26vw, 380px); }

/* ---------------------------------------------------------------- /poc-sprint: three answers (type only) */
.kw-outcome { display: grid; align-content: start; gap: var(--s-3); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.kw-outcome:first-child { border-top-color: var(--accent); }
.kw-outcome h3 { font: var(--display-weight) var(--t-h3, 28px)/1.15 var(--font-display); letter-spacing: var(--display-tracking); }
.kw-outcome p { color: var(--muted); max-width: 38ch; }
.kw-outcome .link { justify-self: start; margin-top: var(--s-2); }
@media (max-width: 1023px) { .kw-outcomes { row-gap: var(--s-7); } .kw-outcome { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- inner pages: content-height sections */
/* The homepage keeps the kit's one-section-per-screen rhythm; inner pages (main.kw-flow) let every
   section take its content's height, so short sections leave no screen-sized gaps. */
main.kw-flow > :is(section, .section):not(.hero, .section--hero) {
  height: auto !important; min-height: 0 !important;
  padding-block: clamp(64px, 7vw, 112px);
}
main.kw-flow > :is(section, .section):first-child { padding-top: calc(var(--padt) + var(--s-4)); }
main.kw-flow > :is(section, .section) > :is(.wrap, .container) { height: auto; }
main.kw-flow > :is(section, .section) + :is(section, .section) { padding-top: 0; }
/* a fragment that keeps its own height, centred in its frame */
.stage > .kw-center-y { top: 50%; translate: 0 -50%; }
@media (max-width: 639px) { .stage > .kw-center-y { top: 50%; } }

/* ---------------------------------------------------------------- /how-we-work */
main.kw-flow .kw-head-visual { --ratio: 82%; }
.kw-step { row-gap: var(--s-6); align-items: center; }
.kw-step + .kw-step { margin-top: clamp(56px, 6vw, 96px); }
.kw-step .step-head > h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.kw-step .step-head > .step-num { width: 36px; height: 36px; }
.kw-step__visual { --ratio: 72%; }
@media (max-width: 1023px) { .kw-step__visual { --ratio: 64%; } }
@media (max-width: 639px) { .kw-step__visual, main.kw-flow .kw-head-visual { --ratio: 100%; } }

/* inner pages on a phone: a long value goes under its name instead of wrapping in a narrow column */
@media (max-width: 639px) {
  main.kw-flow .rows > li { grid-template-columns: minmax(0, 1fr); }
  main.kw-flow .rows__value { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; max-width: none; text-wrap: pretty; color: var(--muted); }
  /* the header document's floating note would cover its headline at this width */
  main.kw-flow .kw-head-visual .ui-doc__note { display: none; }
}

/* ---------------------------------------------------------------- /services/* */
.kw-svc { align-items: center; row-gap: var(--s-6); }
.kw-svc__visual { --ratio: 74%; }
.kw-svc--flip > .kw-first { grid-row: 1; }
@media (max-width: 1023px) { .kw-svc__visual { --ratio: 64%; } .kw-svc--flip > .kw-first { grid-row: auto; } }
@media (max-width: 639px) { .kw-svc__visual { --ratio: 90%; } }
.kw-day__term { font: 560 18px/26px var(--font-text); color: var(--ink); letter-spacing: -0.012em; }
/* a Keelwork card (not a kit .ui fragment) keeps the fragment width limit */
.stage > .fit > .kw-card { width: 100%; max-width: var(--fit-max, 100%); margin-inline: auto; }

/* ---------------------------------------------------------------- /faq */
.kw-topics > li { padding: 0; }
.kw-topic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); padding-block: var(--s-4); color: inherit; text-decoration: none; }
.kw-topics > li:first-child .kw-topic { padding-top: 0; }
.kw-topic:hover .rows__name, .kw-topic:focus-visible .rows__name { text-decoration: underline; text-underline-offset: 4px; }
.kw-topic .rows__value { color: var(--muted); }
/* a section's heading column stays beside its long list (FAQ answers, term lists, rows) while it scrolls past */
@media (min-width: 1024px) {
  main > section > .wrap.grid:has(> .faq, > .kw-days, > .span-6 > .rows, > .kw-story, > .kw-timeline) > .span-5:first-child {
    position: sticky; top: calc(var(--nav, 72px) + var(--s-6)); align-self: start;
  }
}

/* ---------------------------------------------------------------- /pricing: the offer list (type only) */
.kw-offers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kw-offer { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 14rem; gap: var(--s-6); align-items: baseline; padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.kw-offer__what { display: grid; gap: var(--s-2); justify-items: start; }
.kw-offer__what h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.kw-offer__what p { color: var(--muted); max-width: 48ch; }
.kw-offer__what .link { margin-top: var(--s-2); }
.kw-offer__len { color: var(--muted); font-variant-numeric: tabular-nums; }
.kw-offer__price { justify-self: end; text-align: right; font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .kw-offer { grid-template-columns: minmax(0, 1fr) auto; } .kw-offer__len { grid-column: 1; grid-row: 2; } .kw-offer__price { grid-column: 2; grid-row: 1; } }
@media (max-width: 639px) { .kw-offer { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .kw-offer__price, .kw-offer__len { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; } }

/* ---------------------------------------------------------------- /about */
.kw-quote { margin: 0; display: grid; gap: var(--s-5); }
.kw-quote blockquote { margin: 0; }
.kw-quote blockquote p { font: var(--display-weight) clamp(28px, 2.4vw + 12px, 48px)/1.18 var(--font-display); letter-spacing: var(--display-tracking); text-wrap: balance; max-width: 30ch; }
.kw-quote blockquote p::before { content: "\201C"; margin-left: -0.45em; color: var(--accent); }
.kw-quote blockquote p::after { content: "\201D"; color: var(--accent); }
.kw-quote figcaption { font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
main.kw-flow #about .kw-founder { --ratio: 104%; }
/* /about up to 1279px: the photo reaches the page edge, so the notes go inside it (the phone arrangement) */
@media (max-width: 1279px) {
  #about .kw-tag--lead { top: 3%; left: auto; right: 8px; }
  #about .kw-tag--help { top: auto; bottom: 7%; right: auto; left: 8px; }
  #about .kw-arrows--wide { display: none; }
  #about .kw-arrows--narrow { display: block; }
}

/* ---------------------------------------------------------------- legal documents (MDX, src/layouts/Legal.astro) */
.kw-doc__head { align-self: start; }
@media (min-width: 1024px) { .kw-doc__head { position: sticky; top: calc(var(--nav, 72px) + var(--s-6)); } }
.kw-doc__meta { color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.kw-prose { max-width: 68ch; }
.kw-prose > * + * { margin-top: var(--s-4); }
.kw-prose h2 { margin-top: var(--s-8); font: var(--display-weight) var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--display-tracking); }
.kw-prose h2 + * { margin-top: var(--s-3); }
.kw-prose p, .kw-prose li { line-height: 1.65; }
.kw-prose ul { padding-left: 1.2em; display: grid; gap: var(--s-2); list-style: disc; }
.kw-prose li::marker { color: var(--accent); }
.kw-prose a { text-decoration: underline; text-underline-offset: 3px; }
.kw-prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.kw-prose th, .kw-prose td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kw-prose th { font-weight: 500; }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- /writing article (src/layouts/Writing.astro) */
/* left-aligned reading column + sticky contents rail pinned to the page edge; fills desktop width */
.kw-post__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
@media (min-width: 1024px) {
  .kw-post__layout { grid-template-columns: minmax(0, 84ch) 15rem; justify-content: space-between; column-gap: var(--s-8); align-items: start; }
}
.kw-post__main { min-width: 0; }
.kw-post__kicker { margin-bottom: var(--s-6); }
.kw-post__back { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-small); font-weight: 500; text-decoration: none; }
.kw-post__back:hover { color: var(--ink); }
/* editorial masthead: the signature accent start-rule (as on .kw-outcome), title, standfirst, byline */
.kw-post__head { margin-bottom: var(--s-7); padding-top: var(--s-5); border-top: 2px solid var(--accent); }
.kw-post__head h1 { max-width: 22ch; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
.kw-post__dek { margin-top: var(--s-5); max-width: 60ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
/* the reading column fills the wider post track (legal pages keep .kw-prose's own 68ch) */
.kw-post .kw-prose { max-width: none; }
.kw-post__byline { margin-top: var(--s-6); color: var(--muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
/* contents rail */
.kw-post__aside { display: none; }
@media (min-width: 1024px) {
  .kw-post__aside { display: block; position: sticky; top: calc(var(--nav, 72px) + var(--s-6)); }
}
.kw-post__toc-h { font-size: var(--t-small); font-weight: 500; color: var(--ink); margin-bottom: var(--s-3); }
.kw-post__toc ol { list-style: none; display: grid; gap: var(--s-1); border-left: 1px solid var(--line); }
.kw-post__toc li { margin: 0; }
.kw-post__toc a { display: block; padding: var(--s-1) 0 var(--s-1) var(--s-4); margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); font-size: var(--t-small); line-height: 1.4; text-decoration: none; }
.kw-post__toc a:hover { color: var(--ink); border-left-color: var(--accent); }

/* ---------------------------------------------------------------- /work case study (src/layouts/CaseStudy.astro) */
.kw-cs__tag { display: inline-block; margin-bottom: var(--s-4); padding: 2px 10px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: var(--t-label); font-weight: 500; }
.kw-cs__meta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); }
.kw-cs__meta div { display: grid; gap: 2px; }
.kw-cs__meta dt { color: var(--muted); font-size: var(--t-label); }
.kw-cs__meta dd { margin: 0; color: var(--ink); font-size: var(--t-small); }
.kw-cs__meta dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.kw-cs__meta dd a:hover { text-decoration-color: var(--accent); }
/* architecture figure */
/* the diagram stays legible: it scrolls inside the figure whenever the column is narrower than it */
.kw-cs__fig { margin: var(--s-7) 0; overflow-x: auto; }
.kw-cs__fig figcaption { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-small); line-height: 1.6; max-width: 60ch; }
.kw-cs__diagram { display: block; width: 100%; min-width: 720px; height: auto; }
.kw-cs__diagram .d-box rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.kw-cs__diagram .d-t { fill: var(--ink); font: 500 17px/1 var(--font-display); letter-spacing: var(--display-tracking); }
.kw-cs__diagram .d-s { fill: var(--muted); font: 400 12.5px/1 var(--font-text); }
.kw-cs__diagram .d-io { fill: var(--muted); font: 500 13px/1 var(--font-text); }
.kw-cs__diagram .d-io--a { fill: var(--accent); }
.kw-cs__diagram .d-flow { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.kw-cs__diagram .d-flow--a { stroke: var(--accent); }
.kw-cs__diagram .d-kb ellipse, .kw-cs__diagram .d-kb path { fill: color-mix(in oklab, var(--accent) 6%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.kw-cs__diagram .d-kb .d-s { fill: var(--ink); stroke: none; }
.kw-cs__diagram .d-cap { fill: var(--ink); font: 500 14px/1 var(--font-text); }
.kw-cs__diagram .d-doc { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.kw-cs__diagram .d-line { stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.kw-cs__diagram .d-cut { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.kw-cs__diagram .d-clause { fill: color-mix(in oklab, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.kw-cs__diagram .d-ct { fill: var(--accent); font: 500 12.5px/1 var(--font-text); }
.kw-cs__diagram .d-seg { fill: color-mix(in oklab, var(--ink) 6%, transparent); stroke: var(--line); stroke-width: 1.5; }
.kw-cs__diagram .d-seg--gen { fill: color-mix(in oklab, var(--ink) 12%, transparent); }
.kw-cs__diagram .d-seg--over { fill: color-mix(in oklab, var(--accent) 10%, transparent); stroke: var(--accent); }
.kw-cs__diagram .d-budget { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.kw-cs__diagram .d-box--a rect { stroke: var(--accent); }
.kw-cs__diagram .d-bound { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; }

/* outcome tiles: the scannable layer above the deep body */
.kw-cs__stats { list-style: none; margin: var(--s-7) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
@media (min-width: 680px) { .kw-cs__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kw-cs__stat { border-top: 2px solid var(--line); padding-top: var(--s-3); display: grid; gap: 4px; }
.kw-cs__stat:first-child { border-top-color: var(--accent); }
.kw-cs__stat-n { font: var(--display-weight) clamp(26px, 2vw + 14px, 34px)/1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.kw-cs__stat-l { color: var(--ink); font-size: var(--t-small); line-height: 1.3; }
.kw-cs__stat-s { color: var(--muted); font-size: var(--t-label); line-height: 1.4; }

/* ---------------------------------------------------------------- /writing index (src/pages/writing/index.astro) */
.kw-posts { list-style: none; margin-top: var(--s-7); display: grid; gap: var(--s-6); }
.kw-post + .kw-post { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.kw-post__link { display: grid; gap: var(--s-2); color: inherit; text-decoration: none; }
.kw-post__title { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.kw-post__link:hover .kw-post__title { color: var(--accent); }
.kw-post__excerpt { max-width: 68ch; line-height: 1.65; color: var(--ink); }
.kw-post__meta { color: var(--muted); font-size: var(--t-small); }

/* ---------------------------------------------------------------- /brief */
.kw-brief__intro { align-self: start; }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--s-3); font-weight: 400; }
.field--check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin-top: 2px; padding: 0; accent-color: var(--accent); }
.field--check label { font-weight: 400; line-height: 1.5; }
.field--check label a { text-decoration: underline; text-underline-offset: 3px; }
.field--check .field__error { grid-column: 2; }
.kw-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kw-sent { display: none; }
.kw-sent:target { display: block; margin-bottom: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: color-mix(in oklab, var(--accent) 10%, var(--bg)); font-weight: 500; }
.kw-brief .muted { font-weight: 400; }

/* ---------------------------------------------------------------- forms: dropdowns and error lines */
/* dropdowns: the site's own chevron with room around it, and the placeholder in the muted colour until a choice is made */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: calc(var(--s-3) + 28px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 12px 12px;
  cursor: pointer;
}
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field select option { color: var(--ink); }
.field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* error lines: words only, no icon in front */
.field__error::before { content: none; display: none; }
/* the founder quote stands alone, centred across the page */
.kw-quote { grid-column: 1 / -1; justify-items: center; text-align: center; }
.kw-quote blockquote p { max-width: 28ch; margin-inline: auto; }
.kw-quote blockquote p::before { margin-left: 0; }
/* a quiet aside under the h1: "(all two of us)" */
.kw-h1-aside { display: block; margin-top: var(--s-2); font-size: 0.42em; line-height: 1.2; letter-spacing: -0.01em; color: var(--muted); }

/* term and timeline lists: the text runs to the row's end, and a wider term column keeps short terms on one line */
.kw-day { grid-template-columns: 13.5rem minmax(0, 1fr); }
.kw-day__what p { max-width: 64ch; }
@media (max-width: 1023px) { .kw-day { grid-template-columns: 10rem minmax(0, 1fr); } }
@media (max-width: 639px) { .kw-day { grid-template-columns: minmax(0, 1fr); } }
/* the founder's story: first person, set a size up from body text */
.kw-story p { font-size: var(--t-lead); line-height: 1.55; max-width: 60ch; }

/* nav: the current page's link keeps its underline */
.nav__link[aria-current="page"]::before { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }

/* nav: the current page's link keeps its underline */
.nav__link[aria-current="page"]::before { transform: scaleX(1); }

/* ---------------------------------------------------------------- link lists (service overview, related) */
.kw-offer--link { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-5); }
.kw-offer--link h3 a { color: inherit; text-decoration: none; }
@media (min-width: 1024px) { .kw-offers--links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut, 24px); } }

/* ---------------------------------------------------------------- nav: the Services mega menu */
.kw-mega { align-items: start; }
.kw-mega__col { display: grid; gap: var(--s-3); align-content: start; }
/* the column heading is the link to its overview page */
.kw-mega__head { justify-self: start; font: 500 var(--t-small)/1.4 var(--font-text); color: var(--ink); text-decoration: none; }
.kw-mega__head span { display: inline-block; margin-left: var(--s-1); color: var(--accent); transform: rotate(-45deg); transition: transform 160ms var(--ease, ease); }
.kw-mega__head:hover span, .kw-mega__head:focus-visible span { transform: translate(2px, -2px) rotate(-45deg); }
.kw-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
/* items: a soft rounded highlight on hover, and an arrow after the title; the text stays on the column line */
.kw-mega__col li a { display: grid; gap: 2px; margin-inline: calc(-1 * var(--s-3)) 0; padding: var(--s-3); border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background-color 140ms var(--ease, ease); }
.kw-mega__t { font: 500 16px/1.3 var(--font-text); }
.kw-mega__col li a small { font: 400 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
.kw-mega__col li a:hover, .kw-mega__col li a:focus-visible { background: color-mix(in oklab, var(--ink) 5%, transparent); }
@media (prefers-reduced-motion: reduce) { .kw-mega__head span, .kw-mega__col li a { transition: none; } }

/* ---------------------------------------------------------------- service diagrams (kit diagram.js, section size) */
.panel.kw-diagram { --p-h: clamp(360px, 32vw, 440px); margin-top: var(--s-5); border-radius: var(--r-lg); }
.panel.kw-diagram > .dg { position: absolute; inset: 0; }
.kw-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--s-5); }
.kw-steps h3 { font: 560 18px/26px var(--font-text); letter-spacing: -0.012em; }
.kw-steps p { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
@media (max-width: 1023px) { .kw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .kw-steps { grid-template-columns: minmax(0, 1fr); } .panel.kw-diagram { --p-h: 640px; } }
.panel.kw-diagram--short { --p-h: 380px; }
@media (max-width: 639px) { .panel.kw-diagram--short { --p-h: 520px; } }
/* case studies: the standing note under the dek (real project, anonymised) */
.kw-cs__notice { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.55; color: var(--muted); max-width: 62ch; }

/* ---------------------------------------------------------------- /poc-sprint: the documents you receive */
main.kw-flow #sprint .kw-docs { --ratio: 86%; }
/* the stack is sized by the frame's height as well as its width, so it fits a tall narrow frame and a wide short one */
@media (min-width: 640px) and (max-width: 1023px) { main.kw-flow #sprint .kw-docs { --ratio: 0px; align-self: stretch; min-height: 440px; } }
@media (min-width: 640px) and (max-width: 819px) { main.kw-flow #sprint .kw-docs { min-height: 520px; } }
/* The stack fills the frame and is a size container; the pile is sized from it so the whole fanned group
   (front sheet plus the two behind, which reach up and right) fits with a margin at any frame shape.
   Group geometry, in front-sheet widths W (height 1.25W): spans 1.10W x 1.475W, centre offset +0.05W, -0.09H. */
.frame.kw-docs > .kw-docs__stack { position: absolute; inset: 0; max-width: none; container-type: size; }
.kw-docs__pile { position: absolute; left: 50%; top: 50%; width: min(66cqw, 56cqh, 380px); aspect-ratio: 0.8; transform: translate(-55%, -41%); }
/* the sheets behind show only their header strip above the front one */
.kw-sheet--back1 > :not(.kw-sheet__kind, .kw-sheet__title), .kw-sheet--back2 > :not(.kw-sheet__kind, .kw-sheet__title) { visibility: hidden; }
.kw-sheet { position: absolute; inset: 0; padding: 26px 26px 22px; border-radius: 6px; background: #fff; color: #16181a;
  font: 400 13px/1.45 var(--font-text); box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 22px 48px -26px rgb(20 30 50 / .55); overflow: hidden; }
.kw-sheet--back2 { transform: translate(14%, -22%) rotate(5deg) scale(.92); }
.kw-sheet--back1 { transform: translate(7%, -11%) rotate(2.5deg) scale(.96); }
.kw-sheet--front { transform: rotate(-1.5deg); }
.kw-sheet__kind { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .02em; color: #5f646a; }
.kw-sheet__title { margin-top: 6px; font: 500 17px/1.25 var(--font-display); letter-spacing: -0.01em; color: #16181a; }
.kw-sheet__table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 12.5px; }
.kw-sheet__table th { text-align: left; font-weight: 500; color: #5f646a; padding: 0 0 6px; border-bottom: 1px solid rgb(0 0 0 / .1); }
.kw-sheet__table td { padding: 8px 8px 8px 0; border-bottom: 1px solid rgb(0 0 0 / .07); vertical-align: top; }
.kw-sheet__table td:last-child, .kw-sheet__table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.kw-sheet__table--nums td:not(:first-child) { font-variant-numeric: tabular-nums; }
.kw-sheet__table tr.is-open td:last-child { color: var(--accent); font-weight: 500; }
.kw-sheet__line { margin-top: 14px; color: #3d4247; }
.kw-sheet__sign { margin-top: 18px; padding-top: 10px; border-top: 1px solid rgb(0 0 0 / .1); font-size: 12px; color: #5f646a; }
.kw-sheet__code { margin: 14px 0 0; padding: 12px; border-radius: 4px; background: #f3f4f5; font: 400 12px/1.6 var(--font-mono); white-space: pre; }
@media (max-width: 639px) { main.kw-flow #sprint .kw-docs { --ratio: 112%; } .kw-sheet { padding: 16px; font-size: 12px; } .kw-sheet__table { font-size: 11px; } .kw-sheet__title { font-size: 15px; } .kw-sheet__line, .kw-sheet__sign { display: none; } }

/* keep each sheet's content whole at its size: drop the sign-off line, and on phones one table row */
.kw-sheet__sign { display: none; }
@media (max-width: 639px) { .kw-sheet--front .kw-sheet__table tbody tr:nth-child(2) { display: none; } }
/* /poc-sprint what you keep: the same panel height as the homepage process cards */
#keep .panel { --p-h: 344px; }
@media (max-width: 639px) { #keep .panel { --p-h: 280px; } }

/* ---------------------------------------------------------------- /poc-sprint: ten working days (a vertical timeline) */
.kw-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.kw-timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.kw-timeline__item { position: relative; display: grid; gap: var(--s-2); padding: 0 0 var(--s-7) var(--s-8); }
.kw-timeline__item:last-child { padding-bottom: 0; }
.kw-timeline__item::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid color-mix(in oklab, var(--ink) 35%, transparent); }
.kw-timeline__item.is-key::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.kw-timeline__when { font: 500 var(--t-small)/1.4 var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.kw-timeline__item.is-key .kw-timeline__when { color: var(--accent); }
.kw-timeline h3 { font: 560 20px/1.3 var(--font-text); letter-spacing: -0.014em; }
.kw-timeline p { color: var(--muted); max-width: 56ch; }
@media (max-width: 1023px) { .kw-timeline { margin-top: var(--s-7); } }

/* ---------------------------------------------------------------- /poc-sprint: ten working days (calendar week view) */
.kw-week { display: grid; gap: var(--s-6); }
.kw-week__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; }
.kw-week__label { padding-top: 6px; font: 500 var(--t-small)/1.3 var(--font-text); color: var(--muted); }
.kw-week__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s-2); row-gap: var(--s-3);
  border-top: 1px solid var(--line); }
.kw-week__day { grid-row: 1; display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-3) var(--s-3) 0;
  border-left: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.kw-week__day:first-child { border-left: 0; }
.kw-week__day b { font: 500 15px/1 var(--font-text); color: var(--ink); font-variant-numeric: tabular-nums; }
.kw-week__ev { grid-row: 2; grid-column: var(--col) / span var(--span); display: grid; align-content: start; gap: 4px; min-height: 7.5rem;
  padding: var(--s-3) var(--s-4) var(--s-4); border-radius: var(--r-md); background: color-mix(in oklab, var(--ink) 5%, var(--bg));
  border-left: 3px solid color-mix(in oklab, var(--ink) 30%, transparent); }
.kw-week__ev b { font: 560 16px/1.3 var(--font-text); letter-spacing: -0.01em; }
.kw-week__when { font: 500 12px/1.3 var(--font-text); color: var(--muted); }
.kw-week__txt { font-size: var(--t-small); line-height: 1.45; color: var(--muted); }
.kw-week__ev.is-key { background: color-mix(in oklab, var(--accent) 9%, var(--bg)); border-left-color: var(--accent); }
.kw-week__ev.is-key .kw-week__when { color: var(--accent); }
/* a phone: the agenda view, one event per row with its days */
@media (max-width: 767px) {
  .kw-week__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .kw-week__grid { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .kw-week__day { display: none; }
  .kw-week__ev { grid-row: auto; grid-column: 1; min-height: 0; }
}

/* ---------------------------------------------------------------- /services/backend hero: an API request and response */
.kw-api { width: 100%; background: #fff; color: #16181a; border-radius: 12px; overflow: hidden; text-align: left;
  font: 400 13px/1.5 var(--font-text); box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 24px 60px -28px rgb(20 30 50 / .5); }
.kw-api__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(0 0 0 / .07); color: #5d6268; font-size: 13px; }
.kw-api__dots { display: flex; gap: 6px; } .kw-api__dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcdfe2; }
.kw-api__host { font-family: var(--font-mono); font-size: 12.5px; }
.kw-api__env { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #e9eef3; color: #26394d; font-size: 12px; font-weight: 500; }
.kw-api__part { padding: 14px 16px 12px; }
.kw-api__part--res { border-top: 1px dashed rgb(0 0 0 / .12); background: #fafbfb; }
.kw-api__line { display: flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--font-mono); }
.kw-api__m { padding: 2px 7px; border-radius: 5px; background: #16181a; color: #fff; font-size: 11.5px; letter-spacing: .02em; }
.kw-api__path { color: #16181a; }
.kw-api__status { padding: 2px 8px; border-radius: 5px; background: #e3f2ea; color: #1d6b45; font-size: 12px; }
.kw-api__time { margin-left: auto; color: #5f646a; font-weight: 400; }
.kw-api__hdr { margin-top: 8px; font: 400 12px/1.4 var(--font-mono); color: #5f646a; }
.kw-api__hdr span { color: #16181a; }
.kw-api__code { margin: 8px 0 0; padding: 0; background: none; font: 400 12.5px/1.65 var(--font-mono); color: #5f646a; white-space: pre; overflow: hidden; }
.kw-api__code .k { color: #16181a; }
.kw-api__code .s { color: #4a5a6a; }
.kw-api__code .n { color: var(--accent); }
.kw-api__foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid rgb(0 0 0 / .07); font-size: 12.5px; color: #5f646a; }
.kw-api__foot b { font-weight: 500; color: #16181a; }

/* ---------------------------------------------------------------- /services/web-apps hero: a browser with an admin screen */
.kw-browser { width: 100%; background: #fff; color: #16181a; border-radius: 12px; overflow: hidden; text-align: left; font: 400 12.5px/1.45 var(--font-text);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 24px 60px -28px rgb(20 30 50 / .5); }
.kw-browser__bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #f3f4f5; border-bottom: 1px solid rgb(0 0 0 / .07); }
.kw-browser__url { flex: 1; max-width: 320px; margin: 0 auto; padding: 4px 12px; border-radius: 6px; background: #fff; color: #5f646a; font-size: 12px; text-align: center; }
.kw-browser__body { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.kw-browser__side { display: grid; align-content: start; gap: 2px; padding: 14px 10px; border-right: 1px solid rgb(0 0 0 / .07); color: #5f646a; }
.kw-browser__side b { margin: 0 6px 10px; color: #16181a; font-weight: 600; }
.kw-browser__side span { padding: 6px; border-radius: 6px; }
.kw-browser__side .is-on { background: rgb(0 0 0 / .05); color: #16181a; font-weight: 500; }
.kw-browser__main { display: grid; gap: 12px; padding: 14px 16px 16px; min-width: 0; }
.kw-browser__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kw-browser__head b { font: 500 15px/1.2 var(--font-text); }
.kw-browser__search { padding: 4px 10px; border: 1px solid rgb(0 0 0 / .1); border-radius: 6px; color: #8a8f95; font-size: 12px; }
.kw-browser__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kw-browser__stats div { padding: 8px 10px; border-radius: 8px; background: #f6f7f8; display: grid; gap: 2px; }
.kw-browser__stats span { color: #5f646a; font-size: 11.5px; }
.kw-browser__stats b { font: 500 15px/1.2 var(--font-text); font-variant-numeric: tabular-nums; }
.kw-browser__table { width: 100%; border-collapse: collapse; }
.kw-browser__table td { padding: 7px 4px; border-top: 1px solid rgb(0 0 0 / .06); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-browser__table td:first-child { color: #5f646a; }
.kw-browser__table td:nth-child(3) { text-align: right; }
.kw-browser__table td:last-child { text-align: right; }
.kw-browser__chip { padding: 2px 8px; border-radius: 99px; background: #eef0f2; color: #3d4247; font-size: 11.5px; font-weight: 500; }
.kw-browser__chip.ok { background: #e3f2ea; color: #1d6b45; }
.kw-browser__chip.warn { background: #fbe4ef; color: #a00d55; }
@media (max-width: 639px) { .kw-browser__body { grid-template-columns: minmax(0, 1fr); } .kw-browser__side { display: none; } .kw-browser__table tr:nth-child(n+4) { display: none; } }

/* ---------------------------------------------------------------- /services/mobile-apps hero: a phone with an app screen */
.kw-phone-wrap { position: relative; display: grid; justify-items: center; padding: 8px 0; }
.kw-phone { position: relative; width: 236px; padding: 10px; border-radius: 38px; background: #16181a;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .2), 0 30px 60px -28px rgb(20 30 50 / .6); }
.kw-phone__notch { position: absolute; left: 50%; top: 18px; width: 70px; height: 20px; border-radius: 99px; background: #16181a; transform: translateX(-50%); z-index: 1; }
.kw-phone__screen { display: flex; flex-direction: column; gap: 8px; min-height: 440px; padding: 14px 16px 12px; border-radius: 29px; background: #fff; color: #16181a; text-align: left; font: 400 12.5px/1.45 var(--font-text); }
.kw-phone__status { display: flex; justify-content: space-between; padding: 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.kw-phone__kicker { margin-top: 18px; color: #5f646a; font-size: 12px; }
.kw-phone__title { font: 600 18px/1.25 var(--font-display); letter-spacing: -0.01em; }
.kw-phone__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; position: relative; }
.kw-phone__steps::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #e6e8ea; }
.kw-phone__steps li { position: relative; display: grid; padding-left: 22px; }
.kw-phone__steps li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #c8ccd0; }
.kw-phone__steps li.is-done::before { background: #16181a; border-color: #16181a; }
.kw-phone__steps li.is-now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }
.kw-phone__steps b { font-weight: 500; }
.kw-phone__steps span { color: #5f646a; font-size: 11.5px; }
.kw-phone__btn { margin-top: 8px; padding: 10px; border-radius: 10px; background: #16181a; color: #fff; text-align: center; font-weight: 500; }
.kw-phone__tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 0 4px; border-top: 1px solid #eef0f2; color: #8a8f95; font-size: 11px; }
.kw-phone__tabs .is-on { color: #16181a; font-weight: 600; }
@media (max-width: 639px) { .kw-phone { width: 210px; } .kw-phone__screen { min-height: 390px; } }
/* the phone needs a taller frame on a phone screen */
@media (max-width: 639px) { main.kw-flow #mobile .kw-head-visual { --ratio: 140%; } } 
/* ---------------------------------------------------------------- /services/product-engineering hero: a sprint board */
.kw-board { width: 100%; background: #fff; color: #16181a; border-radius: 12px; overflow: hidden; text-align: left; font: 400 12.5px/1.4 var(--font-text);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 24px 60px -28px rgb(20 30 50 / .5); }
.kw-board__bar { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-bottom: 1px solid rgb(0 0 0 / .07); color: #5f646a; }
.kw-board__bar b { color: #16181a; font-weight: 600; }
.kw-board__wk { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: #e9eef3; color: #26394d; font-size: 12px; font-weight: 500; }
.kw-board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; background: #f6f7f8; }
.kw-board__col { display: grid; align-content: start; gap: 8px; }
.kw-board__h { display: flex; align-items: center; gap: 6px; margin: 0 2px 2px; font-weight: 500; color: #3d4247; }
.kw-board__h span { padding: 0 6px; border-radius: 99px; background: rgb(0 0 0 / .06); color: #5f646a; font-size: 11.5px; }
.kw-board__h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c8ccd0; }
.is-review .kw-board__h::before { background: #26394d; }
.is-done .kw-board__h::before { background: #1d6b45; }
.kw-board__card { display: grid; gap: 8px; padding: 10px 11px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .08); }
.kw-board__card b { font-weight: 500; line-height: 1.35; }
.kw-board__card.is-hot { box-shadow: 0 0 0 1.5px var(--accent), 0 6px 16px -8px color-mix(in oklab, var(--accent) 50%, transparent); }
.kw-board__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #5f646a; font-size: 11.5px; }
.kw-board__tag { padding: 1px 7px; border-radius: 5px; background: #eef0f2; color: #3d4247; font-weight: 500; }
.is-done .kw-board__card b { color: #5f646a; }
@media (max-width: 639px) { .kw-board__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kw-board__col.is-doing { display: none; } .kw-board__col.is-done .kw-board__card:nth-child(n+4) { display: none; } }

/* link lists (What we build, Related, See it built): the whole row is clickable. The title stays the
   one real link; its ::after stretches over the row, so keyboards and screen readers meet one link. */
.kw-offer--link { position: relative; }
.kw-offer--link h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kw-offer--link h3 a { transition: color 140ms var(--ease, ease); }
.kw-offer--link:hover h3 a { color: var(--accent); text-decoration: none; }
.kw-offer--link:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kw-offer--link h3 a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .kw-offer--link h3 a { transition: none; } }

/* ---------------------------------------------------------------- service pages: See it built (case study rows) */
.kw-cases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kw-case { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--s-8); align-items: center; padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.kw-case__text { display: grid; gap: var(--s-2); }
.kw-case h3 { font: var(--display-weight) var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--display-tracking); text-wrap: balance; }
.kw-case h3 a { color: inherit; text-decoration: none; transition: color 140ms var(--ease, ease); }
.kw-case h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kw-case__text p { color: var(--muted); max-width: 60ch; }
.kw-case__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--s-5); }
.kw-case__stats li { display: grid; gap: 2px; min-width: 0; }
.kw-case__stats b { font: 500 22px/1.1 var(--font-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kw-case__stats span { font-size: 12.5px; line-height: 1.35; color: var(--muted); max-width: 16ch; }
.kw-case:hover h3 a { color: var(--accent); }
.kw-case:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kw-case h3 a:focus-visible { outline: none; }
@media (max-width: 1023px) { .kw-case { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
@media (max-width: 639px) { .kw-case__stats { gap: var(--s-4); } }

/* /work: the same case-study rows, with the service each one belongs to */
.kw-cases--work { margin-top: var(--s-7); }
.kw-case__service { font: 500 var(--t-small)/1.3 var(--font-text); color: var(--muted); }

/* ---------------------------------------------------------------- footer: contact under the logo, linked column headings */
.footer__contact { font-style: normal; display: grid; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.footer__contact a { color: var(--ink); }
.footer__contact a:hover { color: var(--accent); }
.footer__col h3 a { color: inherit; text-decoration: none; }
.footer__col h3 a span { display: inline-block; margin-left: 2px; color: var(--accent); transform: rotate(-45deg); transition: transform 160ms var(--ease, ease); }
.footer__col h3 a:hover { color: var(--ink); }
.footer__col h3 a:hover span { transform: translate(2px, -2px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .footer__col h3 a span { transition: none; } }