/* ==========================================================================
   The kinetic design: the home page and the service pages.
   The type is the design: heavy capitals that land one word at a time, set against plain
   running text. Motion is spent in three places only - the hero line, each section's title
   and the figures - so it reads as deliberate rather than decorative.

   Scoped under .kn-. Every part follows the site's theme tokens, the hero included: in the
   light theme the header over it switches to dark text, so a hero that stayed dark left the
   menu, the wordmark and the theme switch invisible against it.

   Nothing is ever hidden to wait for script. Every element rests in its final place, and an
   entrance only plays over the top of that:
     .kn-go  on <html>, set inline in <head> unless the visitor asked for reduced motion.
             Runs the hero entrance on load.
     .kn-in  on a block, added by kinetic.js as the block scrolls into view. Runs that
             block's entrance. If the script is slow or never runs, the block is simply
             there, already readable. (An earlier version held titles back until the
             observer fired, and a slow observer left them missing.)
   ========================================================================== */

.kn { --kn-rule: rgba(var(--ink), .14); --kn-soft: rgba(var(--ink), .7); --kn-ease: cubic-bezier(.16, 1, .3, 1); }
/* Sizes below use cqw so a headline is sized by the column it sits in, not the window. */
.kn .container { container-type: inline-size; }

@keyframes kn-slam { from { transform: translateY(112%) scaleY(1.6); } to { transform: none; } }
@keyframes kn-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes kn-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes kn-row { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes kn-marq { to { transform: translateX(calc(-100% / 3)); } }

/* ---------- words that land: shared by the hero line and every section title ---------- */
.kn-m { display: inline-block; overflow: hidden; padding-block: .05em .08em; vertical-align: top; }
.kn-w { display: inline-block; }

/* ---------- buttons ---------- */
.kn-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 10px; font-weight: 600; font-size: .98rem; text-decoration: none; transition: background .2s, border-color .2s, color .2s, transform .2s; }
/* Colour is restated on hover: the site-wide a:hover rule outranks a single class. */
.kn-btn-fill, .kn-btn-fill:hover { background: var(--accent-fill); color: #fff; }
.kn-btn-fill:hover { background: var(--accent-fill-hover); transform: translateY(-2px); }
.kn-btn-line, .kn-btn-line:hover { color: var(--heading-color); }
.kn-btn-line { border: 1.5px solid rgba(var(--ink), .3); }
.kn-btn-line:hover { border-color: var(--accent-color); }
.kn-btn i { font-size: .85em; }

/* ---------- hero ---------- */
/* The hero's own inks. On the dark theme the headline is pure white and the accent a brighter
   green than the brand accent, which is tuned for small text; the light theme takes both
   from the site tokens. */
.kn-hero { position: relative; overflow: clip; background: var(--bg-deep); color: var(--default-color); padding: clamp(118px, 17vh, 176px) 0 clamp(64px, 10vh, 120px);
    --kn-hero-ink: #fff; --kn-pop: #6ee23f; --kn-hero-soft: #cfdccb; --kn-hero-mute: #a9b6a3; }
html[data-theme="light"] .kn-hero { background: var(--bg);
    --kn-hero-ink: var(--heading-color); --kn-pop: var(--accent-color); --kn-hero-soft: var(--default-color); --kn-hero-mute: rgba(var(--ink), .62); }
.kn-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(58% 60% at 90% 8%, color-mix(in srgb, var(--accent-color), transparent 83%), transparent 70%); }
.kn-hero .container { position: relative; }
/* Three set lines. Sized so the longest, "BIG BUSINESSES", always fits its column: left to
   wrap freely, the seven words ran to five lines and doubled the height of the hero. */
.kn-slam { font-family: var(--display-font); font-weight: 400; text-transform: uppercase; color: var(--kn-hero-ink); margin: 0;
    font-size: clamp(1.9rem, 8.5cqw, 7rem); line-height: .9; letter-spacing: -.02em; display: grid; }
.kn-slam .kn-ln { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .24em; }
/* On a phone, holding "BIG BUSINESSES" to one row left the type at 30px. Letting that line
   break gives four rows at half as big again, which is what a hero built on type needs. */
@container (max-width: 520px) { .kn-slam { font-size: 13.4cqw; } }
.kn-slam .kn-g { color: var(--kn-pop); }
.kn-slam .kn-dot { display: inline-block; width: .19em; height: .19em; border-radius: 50%; background: var(--kn-pop); margin-left: -.14em; }
.kn-go .kn-slam .kn-w { animation: kn-slam .5s var(--kn-ease, cubic-bezier(.16, 1, .3, 1)) both; animation-delay: calc(var(--i) * .11s + .15s); }
.kn-go .kn-slam .kn-dot { animation: kn-pop .5s cubic-bezier(.34, 1.8, .5, 1) both .97s; }
/* The page's h1 is the plain statement of what the company is. It is the supporting line
   visually and the heading semantically, so search engines read the words that matter. */
.kn-h1 { font-family: var(--heading-font); font-weight: 600; font-size: clamp(1.05rem, 2.1cqw, 1.45rem); line-height: 1.45; letter-spacing: -.01em;
    color: var(--kn-hero-soft); max-width: 36ch; margin: clamp(20px, 3cqw, 34px) 0 26px; }
.kn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.kn-demo, .kn-demo:hover { color: var(--kn-hero-soft); }
.kn-demo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; padding: 10px 6px; }
.kn-demo:hover { color: var(--kn-pop); }
.kn-go .kn-h1 { animation: kn-rise .6s cubic-bezier(.22, 1, .36, 1) both 1.1s; }
.kn-go .kn-cta { animation: kn-rise .6s cubic-bezier(.22, 1, .36, 1) both 1.25s; }

/* ---------- sections ---------- */
.kn-sec { padding: clamp(64px, 9vw, 118px) 0; background: var(--bg); color: var(--default-color); }
.kn-sec.kn-alt { background: var(--bg-deep); }
.kn-title { font-family: var(--display-font); font-weight: 400; text-transform: uppercase; color: var(--heading-color);
    font-size: clamp(1.9rem, 6cqw, 4.5rem); line-height: .92; letter-spacing: -.02em;
    margin: 0 0 clamp(26px, 4cqw, 48px); display: flex; flex-wrap: wrap; gap: 0 .24em; }
.kn-title .kn-g { color: var(--accent-color); }
.kn-title:has(+ .kn-lead) { margin-bottom: 16px; }
.kn-lead { max-width: 58ch; margin: 0 0 clamp(26px, 4cqw, 44px); color: var(--kn-soft); font-size: clamp(1rem, 1.5cqw, 1.12rem); line-height: 1.65; }

.kn-in .kn-title .kn-w,
.kn-title.kn-in .kn-w { animation: kn-slam .5s var(--kn-ease) both; animation-delay: calc(var(--i) * .09s); }

/* ---------- what we do: the list is the design ---------- */
.kn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5cqw, 72px); }
.kn-list li { border-top: 1px solid var(--kn-rule); }
.kn-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 2px; text-decoration: none;
    font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.1rem, 2.2cqw, 1.65rem); letter-spacing: -.02em; line-height: 1.2;
    color: var(--heading-color); transition: color .2s, padding-left .25s var(--kn-ease); }
.kn-list a i { font-size: .68em; opacity: .45; transition: transform .25s var(--kn-ease), opacity .2s; }
.kn-list a:hover { color: var(--accent-color); padding-left: 12px; }
.kn-list a:hover i { opacity: 1; transform: translateX(4px); }
.kn-in .kn-list li { animation: kn-row .5s var(--kn-ease) both; animation-delay: calc(var(--i) * .045s + .15s); }
.kn-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 700; text-decoration: none; }

/* ---------- the names behind the work, drifting under the list ----------
   Our products keep their own marks. A client's logo was drawn for some other page, so it is
   kept as its shape alone (see InkLogo) and painted here in the theme's ink: no white box on
   the dark theme, no vanished white logo on the light one. The list is set three times and
   moves by one of them, which keeps the drift seamless on a screen wider than one set.
   Without motion it is the same list, wrapped. */
.kn-sec.kn-flush { padding-bottom: 0; }
.kn-band { margin-top: clamp(44px, 7vw, 92px); padding-block: 22px 32px; border-top: 1px solid var(--kn-rule); }
.kn-band-label { margin: 0 0 20px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); text-wrap: balance; }
.kn-marq { overflow: hidden; }
.kn-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 22px; list-style: none;
    max-width: 1140px; margin: 0 auto; padding: 0; color: rgba(var(--ink), .88); }
/* Each item is positioned so the name hidden beside a wordmark logo (an absolutely placed
   .visually-hidden span) belongs to it. Unanchored, those spans answer to the page instead,
   escape the strip's clipping and, whenever the drift is not running, give the whole page a
   sideways scroll as long as the track. */
.kn-track li { position: relative; display: inline-flex; align-items: center; gap: 11px; flex: none; margin-inline: 26px; white-space: nowrap; }
.kn-track .product-mark { display: block; flex: none; width: calc(30px * var(--kn-k, 1)); height: calc(30px * var(--kn-k, 1)); border-radius: 23%; }
.kn-nm { font-family: var(--heading-font); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.kn-ink { display: block; flex: none; height: calc(var(--h) * var(--kn-k, 1)); aspect-ratio: var(--ar); background: currentColor;
    -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.kn-track .kn-dup { display: none; }
.kn-go .kn-marq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kn-go .kn-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; max-width: none; margin: 0; animation: kn-marq 48s linear infinite; }
.kn-go .kn-track .kn-dup { display: inline-flex; }
/* Resting the pointer on the strip holds it still. Only where there is a pointer to rest: on
   a touch screen the hover state sticks after a tap and would leave it stopped. */
@media (hover: hover) { .kn-go .kn-marq:hover .kn-track { animation-play-state: paused; } }

/* ---------- products ---------- */
.kn-prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kn-prod, .kn-prod:hover { color: var(--default-color); }
.kn-prod { min-width: 0; display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3cqw, 34px); border-radius: 18px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--kn-rule); transition: border-color .2s, transform .25s var(--kn-ease); }
.kn-prod:hover { border-color: color-mix(in srgb, var(--accent-color), transparent 45%); transform: translateY(-3px); }
.kn-prod-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kn-prod-top .product-mark { width: 52px; height: 52px; display: block; border-radius: 13px; flex: none; }
.kn-prod-name { font-family: var(--display-font); font-size: clamp(1.4rem, 3cqw, 2rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; color: var(--heading-color); }
.kn-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 99px; border: 1px solid var(--kn-rule); color: var(--kn-soft); }
.kn-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }
.kn-pill.kn-live::before { background: #22c55e; }
.kn-prod-cat { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kn-soft); }
.kn-prod p { margin: 0; color: var(--kn-soft); line-height: 1.65; }
.kn-prod-go { font-weight: 700; color: var(--accent-color); display: inline-flex; align-items: center; gap: 8px; }
.kn-prod-go i { transition: transform .25s var(--kn-ease); }
.kn-prod:hover .kn-prod-go i { transform: translateX(4px); }
.kn-after { margin-top: 28px; }
/* On the products page the same card carries the tagline and two ways in: the page about the
   product, and the product itself. So there it is an article holding links, not one link. */
h2.kn-prod-name { margin: 0; font-weight: 400; }
.kn-prod-name a, .kn-prod-name a:hover { color: inherit; text-decoration: none; }
.kn-prod .kn-prod-tag { font-family: var(--heading-font); font-weight: 600; font-size: 1.08rem; line-height: 1.35; letter-spacing: -.01em; color: var(--heading-color); }
.kn-prod-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 4px; }
.kn-prod-acts a { text-decoration: none; }
.kn-prod-out, .kn-prod-out:hover { color: var(--kn-soft); }
.kn-prod-out { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: color .2s; }
.kn-prod-out:hover { color: var(--heading-color); }
.kn-prod-out i { font-size: .85em; }
.kn-prods + .kn-strip { margin-top: clamp(36px, 6cqw, 72px); }

/* ---------- figures ---------- */
.kn-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4cqw, 56px); }
.kn-num { min-width: 0; }
.kn-num-v { font-family: var(--display-font); font-size: clamp(3.4rem, 11cqw, 8rem); line-height: .9; letter-spacing: -.03em; color: var(--heading-color); font-variant-numeric: tabular-nums; }
.kn-num-l { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kn-rule); color: var(--kn-soft); max-width: 24ch; line-height: 1.5; }

/* ---------- two doors: client work and the partnership ---------- */
.kn-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kn-door, .kn-door:hover { color: var(--default-color); }
.kn-door { min-width: 0; display: grid; gap: 18px; align-content: space-between; min-height: 300px; padding: clamp(24px, 3.4cqw, 40px); border-radius: 18px;
    text-decoration: none; background: var(--surface); border: 1px solid var(--kn-rule); transition: border-color .2s, transform .25s var(--kn-ease); }
.kn-door:hover { border-color: color-mix(in srgb, var(--accent-color), transparent 45%); transform: translateY(-3px); }
.kn-door :is(h2, h3) { font-family: var(--display-font); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 4.6cqw, 3.2rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 12px; color: var(--heading-color); }
.kn-door p { margin: 0; color: var(--kn-soft); max-width: 42ch; line-height: 1.65; }
.kn-door .kn-names { font-size: .86rem; margin-top: 10px; }
.kn-door .kn-prod-go { align-self: end; }
.kn-door:hover .kn-prod-go i { transform: translateX(4px); }
.kn-strip, .kn-strip:hover { color: var(--heading-color); }
.kn-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 24px 2px; text-decoration: none;
    border-block: 1px solid var(--kn-rule); font-family: var(--display-font); text-transform: uppercase; font-size: clamp(1.2rem, 3.6cqw, 2.4rem); line-height: 1; letter-spacing: -.01em;
    transition: color .2s, padding-left .25s var(--kn-ease); }
.kn-strip:hover { color: var(--accent-color); padding-left: 12px; }
.kn-strip small { font-family: var(--default-font); font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--kn-soft); }

/* ---------- questions ---------- */
.kn-two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
/* These titles sit in the narrower column, where a single long word (QUESTIONS) filled it
   edge to edge at the full size. One step down leaves room at every width. */
.kn-two .kn-title { margin-bottom: 18px; font-size: clamp(1.9rem, 5cqw, 3.9rem); }
.kn-two .kn-lead { margin: 0; }
.kn-faq details { border-top: 1px solid var(--kn-rule); }
.kn-faq details:last-child { border-bottom: 1px solid var(--kn-rule); }
.kn-faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 2px; }
.kn-faq summary::-webkit-details-marker { display: none; }
.kn-faq summary h3 { margin: 0; font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.02rem, 1.6cqw, 1.2rem); line-height: 1.35; color: var(--heading-color); }
.kn-faq summary::after { content: "+"; flex: none; font-family: var(--display-font); font-size: 1.3rem; line-height: 1; color: var(--accent-color); transition: transform .2s; }
.kn-faq details[open] summary::after { transform: rotate(45deg); }
.kn-faq summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.kn-faq details p { margin: 0 2px 20px; max-width: 64ch; color: var(--kn-soft); line-height: 1.7; }

/* ---------- contact ---------- */
.kn-ways { list-style: none; margin: 26px 0 0; padding: 0; }
.kn-ways li { border-top: 1px solid var(--kn-rule); padding: 15px 2px; display: grid; gap: 3px; }
.kn-ways li:last-child { border-bottom: 1px solid var(--kn-rule); }
.kn-ways span { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }
.kn-ways b, .kn-ways a { font-weight: 700; font-size: 1.08rem; color: var(--heading-color); text-decoration: none; }
.kn-ways a:hover { color: var(--accent-color); }
.kn-social { display: flex; gap: 10px; margin-top: 22px; }
.kn-social a, .kn-social a:hover { color: var(--heading-color); }
.kn-social a { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--kn-rule); font-size: 1.05rem; transition: border-color .2s, color .2s; }
.kn-social a:hover { border-color: var(--accent-color); color: var(--accent-color); }
.kn-form { display: grid; gap: 14px; padding: clamp(20px, 3cqw, 34px); border-radius: 18px; background: var(--surface-2); border: 1px solid var(--kn-rule); }
.kn-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kn-form label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--kn-soft); }
.kn-form input, .kn-form select, .kn-form textarea { width: 100%; padding: 13px 14px; border-radius: 10px; font: inherit; font-weight: 400; font-size: 1rem;
    color: var(--default-color); background: var(--input-bg); border: 1px solid var(--input-border); }
.kn-form input:focus, .kn-form select:focus, .kn-form textarea:focus { outline: 2px solid var(--accent-color); outline-offset: 1px; border-color: transparent; }
.kn-form textarea { resize: vertical; min-height: 140px; }
.kn-form button { justify-self: start; border: 0; cursor: pointer; }
.kn-form-note { margin: 0; font-size: .84rem; color: var(--kn-soft); }

/* ---------- narrower screens ---------- */
@media (max-width: 991.98px) {
    .kn-two { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .kn-list, .kn-prods, .kn-doors { grid-template-columns: 1fr; }
    .kn-list li:last-child { border-bottom: 1px solid var(--kn-rule); }
    .kn-nums { grid-template-columns: 1fr; gap: 30px; }
    .kn-num-v { font-size: clamp(3.4rem, 24cqw, 6rem); }
    .kn-door { min-height: 0; }
}
@media (min-width: 768px) {
    /* Two columns of rows: close the bottom of each column, whichever row ends it. */
    .kn-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--kn-rule); }
}
@media (max-width: 575.98px) {
    .kn-form-row { grid-template-columns: 1fr; }
    .kn-cta .kn-btn { flex: 1 1 100%; justify-content: center; }
    .kn-track { --kn-k: .88; }
    .kn-track li { margin-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .kn-btn, .kn-prod, .kn-door, .kn-list a, .kn-strip, .sv-index a { transition: none; }
}

/* ==========================================================================
   Service pages (.sv-)
   One design for every service: _ServicePage.cshtml draws it from a ServiceContent. The hero
   shares the home page's inks and landing words, sized for a name rather than a slogan.
   ========================================================================== */
.kn-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 clamp(20px, 3cqw, 32px); padding: 0; font-size: .86rem; color: var(--kn-hero-mute); }
.kn-crumbs li + li::before { content: "/"; padding: 0 9px; }
.kn-crumbs a, .kn-crumbs a:hover { color: inherit; text-decoration: none; }
.kn-crumbs a:hover { color: var(--kn-pop); }
.kn-crumbs [aria-current] { color: var(--kn-hero-ink); }

.sv-hero { padding-bottom: clamp(44px, 6cqw, 84px); }
.sv-top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 5cqw, 64px); align-items: center; }
.sv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; font-size: .84rem; color: var(--kn-hero-mute); }
.sv-badge { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kn-pop);
    padding: 5px 12px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--kn-pop), transparent 62%); }
/* A service name is one to three words, the longest of them eleven letters (DEVELOPMENT,
   INTEGRATION), so the size is set by what that word needs to fit its column. */
.kn-slam.sv-name { display: flex; flex-wrap: wrap; gap: 0 .24em; font-size: clamp(1.8rem, 5.6cqw, 4.6rem); line-height: .92; }
@container (max-width: 520px) { .kn-slam.sv-name { font-size: 10.6cqw; } }
.sv-intro { margin: clamp(16px, 2.4cqw, 26px) 0 26px; max-width: 44ch; color: var(--kn-hero-soft); font-size: clamp(1.02rem, 1.7cqw, 1.25rem); line-height: 1.55; }
/* On an index page the introduction has the hero to itself, with no picture beside it. */
.sv-hero > .container > .sv-intro { max-width: 60ch; margin-bottom: 0; }
.sv-hero > .container > .sv-intro + .kn-cta { margin-top: 28px; }
.sv-art .il-svg { width: 100%; height: auto; display: block; }
.kn-go .sv-intro { animation: kn-rise .6s cubic-bezier(.22, 1, .36, 1) both .5s; }
.kn-go .sv-hero .kn-cta { animation-delay: .65s; }
.kn-go .sv-art { animation: kn-rise .8s cubic-bezier(.22, 1, .36, 1) both .3s; }

/* what it is, beside the facts of an engagement */
.sv-state { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5cqw, 72px); align-items: start; }
.sv-headline { font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.6rem, 3.6cqw, 2.7rem); line-height: 1.1; letter-spacing: -.03em; color: var(--heading-color); margin: 0 0 18px; text-wrap: balance; }
.sv-lead { margin: 0; max-width: 60ch; color: var(--kn-soft); font-size: clamp(1rem, 1.5cqw, 1.14rem); line-height: 1.7; }
.sv-facts h3 { margin: 0; padding: 0 2px 12px; font-family: var(--default-font); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }
.sv-facts dl { margin: 0; }
.sv-facts dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 2px; border-top: 1px solid var(--kn-rule); }
.sv-facts dl div:last-child { border-bottom: 1px solid var(--kn-rule); }
.sv-facts dt { font-weight: 500; color: var(--kn-soft); }
.sv-facts dd { margin: 0; font-weight: 700; color: var(--heading-color); text-align: right; }

/* how it runs */
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3cqw, 36px); }
.sv-steps li { min-width: 0; padding-top: 16px; border-top: 2px solid var(--heading-color); }
.sv-step-n { display: block; margin-bottom: 14px; font-family: var(--display-font); font-size: clamp(2.2rem, 5cqw, 3.6rem); line-height: .9; color: var(--accent-color); }
.sv-steps h3 { margin: 0 0 8px; font-family: var(--heading-font); font-weight: 700; font-size: 1.12rem; line-height: 1.25; color: var(--heading-color); }
.sv-steps p { margin: 0; color: var(--kn-soft); font-size: .96rem; line-height: 1.6; }
.kn-in .sv-steps li { animation: kn-rise .55s cubic-bezier(.22, 1, .36, 1) both; }
.kn-in .sv-steps li:nth-child(2) { animation-delay: .08s; }
.kn-in .sv-steps li:nth-child(3) { animation-delay: .16s; }
.kn-in .sv-steps li:nth-child(4) { animation-delay: .24s; }

/* what it covers: every group open, a name on the left and its items beside it */
.sv-group { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, 1fr); gap: 18px clamp(20px, 4cqw, 56px); padding: 28px 0; border-top: 1px solid var(--kn-rule); }
.sv-group:last-child { border-bottom: 1px solid var(--kn-rule); }
.sv-group-name { margin: 3px 0 0; font-family: var(--display-font); font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 2.1cqw, 1.45rem); line-height: 1.05; color: var(--heading-color); }
.sv-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(20px, 3cqw, 40px); }
.sv-items li { min-width: 0; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.sv-items i { padding-top: 2px; font-size: 1.15rem; color: var(--accent-color); }
.sv-items h4 { margin: 0 0 5px; font-family: var(--heading-font); font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--heading-color); }
.sv-items p { margin: 0; color: var(--kn-soft); font-size: .94rem; line-height: 1.6; }

/* where next */
.sv-sub { margin: clamp(30px, 5cqw, 52px) 0 14px; font-family: var(--default-font); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }
.sv-cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sv-cities a, .sv-cities a:hover { color: var(--heading-color); }
.sv-cities a { display: inline-block; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--kn-rule); font-weight: 600; font-size: .9rem; text-decoration: none; transition: border-color .2s, color .2s; }
.sv-cities a:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* the services index: every service, each with the one line that says what it is */
.sv-index-sec { padding-top: clamp(36px, 5vw, 64px); }
.sv-index { list-style: none; margin: 0; padding: 0; }
.sv-index li { border-top: 1px solid var(--kn-rule); }
.sv-index li:last-child { border-bottom: 1px solid var(--kn-rule); }
.sv-index a, .sv-index a:hover { color: var(--heading-color); }
.sv-index a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: baseline; gap: 6px clamp(20px, 4cqw, 56px);
    padding: 22px 2px; text-decoration: none; transition: padding-left .25s var(--kn-ease); }
.sv-index h2 { margin: 0; font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.2rem, 2.6cqw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; color: inherit; transition: color .2s; }
.sv-index p { margin: 0; color: var(--kn-soft); line-height: 1.6; }
.sv-index i { font-size: 1.1rem; opacity: .45; transition: transform .25s var(--kn-ease), opacity .2s, color .2s; }
.sv-index a:hover { padding-left: 12px; }
.sv-index a:hover h2, .sv-index a:hover i { color: var(--accent-color); }
.sv-index a:hover i { opacity: 1; transform: translateX(4px); }
.kn-in .sv-index li { animation: kn-row .5s var(--kn-ease) both; animation-delay: calc(var(--i) * .045s + .15s); }
.sv-index + .kn-strip { margin-top: clamp(36px, 6cqw, 72px); }

/* ==========================================================================
   The about page (.ab-) and the contact page (.ct-)
   Both borrow the service pages' hero and statement. What is their own: the three things the
   company stands for, the founders, and the map.
   ========================================================================== */
/* In a hero that leads with a display line, the h1 and the line after it sit closer. */
.sv-hero .kn-h1 { margin-bottom: 12px; }
.kn-h1 + .sv-intro { margin-top: 0; }
.kn-go .sv-hero .kn-h1 { animation-delay: .45s; }
.ab-eyebrow { margin: 0 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); }
.ab-sub { margin: 0 0 16px; max-width: 46ch; font-family: var(--heading-font); font-weight: 600; font-size: clamp(1.05rem, 1.8cqw, 1.3rem); line-height: 1.45; letter-spacing: -.01em; color: var(--heading-color); }
.ab-vals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3cqw, 36px); }
.ab-vals li { min-width: 0; padding-top: 18px; border-top: 2px solid var(--heading-color); }
.ab-vals i { display: block; margin-bottom: 14px; font-size: 1.7rem; line-height: 1; color: var(--accent-color); }
.ab-vals h3 { margin: 0 0 8px; font-family: var(--heading-font); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--heading-color); }
.ab-vals p { margin: 0; color: var(--kn-soft); line-height: 1.65; }
.ab-text { margin: 0; max-width: 62ch; color: var(--kn-soft); font-size: clamp(1rem, 1.5cqw, 1.14rem); line-height: 1.75; }
.ab-text a { font-weight: 600; }
.ab-quote { margin: -10px 0 clamp(26px, 4cqw, 44px); font-style: italic; font-size: clamp(1.02rem, 1.6cqw, 1.2rem); color: var(--kn-soft); }
.ab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ab-person { min-width: 0; display: grid; grid-template-columns: clamp(110px, 16cqw, 180px) minmax(0, 1fr); gap: clamp(16px, 2.6cqw, 28px); align-items: start;
    padding: clamp(18px, 2.6cqw, 28px); border-radius: 18px; background: var(--surface); border: 1px solid var(--kn-rule); }
.ab-photo { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-photo .ab-light, html[data-theme="light"] .ab-photo .ab-dark { display: none; }
html[data-theme="light"] .ab-photo .ab-light { display: block; }
.ab-person h3 { margin: 2px 0 6px; font-family: var(--display-font); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 2.6cqw, 1.7rem); line-height: 1; color: var(--heading-color); }
.ab-role { display: block; margin-bottom: 12px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); }
.ab-person p { margin: 0 0 14px; color: var(--kn-soft); line-height: 1.65; }
.ab-person .kn-social { margin-top: 0; }
.kn-strip.ab-first { margin-top: 0; }

.kn-form h2 { margin: 0; font-family: var(--heading-font); font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--heading-color); }
.kn-ways b { line-height: 1.5; }
.ct-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--kn-rule); }
.ct-map iframe { display: block; width: 100%; height: 420px; border: 0; }
.ct-note { margin: 14px 0 0; font-size: .92rem; color: var(--kn-soft); }

@media (max-width: 991.98px) {
    .ab-people { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .ab-vals { grid-template-columns: 1fr; }
    .ct-map iframe { height: 340px; }
}
@media (max-width: 479.98px) {
    .ab-person { grid-template-columns: 1fr; }
    .ab-photo { max-width: 190px; }
}

/* ==========================================================================
   The location pages (.lc-)
   One template for the city pages and the three that are about a kind of work rather than a
   place. Most of their text is stored as HTML in the database: paragraphs, and lists whose
   items open with a bold title. These rules style that HTML as it comes.
   ========================================================================== */
.lc-band { padding: clamp(30px, 4.5vw, 52px) 0; border-bottom: 1px solid var(--kn-rule); }
.lc-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3cqw, 40px); }
.lc-stats div { min-width: 0; display: flex; flex-direction: column-reverse; gap: 8px; }
.lc-stats dd { margin: 0; font-family: var(--display-font); font-size: clamp(2.2rem, 5.4cqw, 4rem); line-height: .9; letter-spacing: -.02em; color: var(--heading-color); font-variant-numeric: tabular-nums; }
.lc-stats dt { padding-top: 10px; border-top: 1px solid var(--kn-rule); font-weight: 500; color: var(--kn-soft); }

.lc-rich { color: var(--kn-soft); font-size: clamp(1rem, 1.4cqw, 1.1rem); line-height: 1.75; }
.lc-rich p { margin: 0 0 16px; }
.lc-rich p:last-child { margin-bottom: 0; }
.lc-rich strong { color: var(--heading-color); font-weight: 600; }
.lc-quick h2 { margin: 0; padding: 0 2px 6px; font-family: var(--default-font); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }
.lc-quick .lc-quick-note { margin: 0 0 14px; padding: 0 2px; color: var(--kn-soft); font-size: .92rem; }
.lc-quick dd a { color: var(--heading-color); text-decoration: none; }
.lc-quick dd a:hover { color: var(--accent-color); }
.lc-quick-acts { display: grid; gap: 10px; margin-top: 20px; }
.lc-quick-acts .kn-btn { justify-content: center; }

/* A list whose items open with a bold title becomes a grid of titled points. */
.lc-points ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 4cqw, 56px); }
.lc-points li { position: relative; min-width: 0; padding: 18px 2px 18px 30px; border-top: 1px solid var(--kn-rule); color: var(--kn-soft); line-height: 1.65; }
.lc-points li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 12px; height: 7px; border-left: 2px solid var(--accent-color); border-bottom: 2px solid var(--accent-color); transform: rotate(-45deg); }
.lc-points li strong { display: block; margin-bottom: 3px; font-family: var(--heading-font); font-weight: 700; font-size: 1.04rem; color: var(--heading-color); }
/* Some pages open a list with a sentence of its own. */
.lc-points p, .lc-steps p { margin: 0 0 20px; max-width: 72ch; color: var(--kn-soft); line-height: 1.7; }
.lc-points p strong, .lc-steps p strong { color: var(--heading-color); font-weight: 600; }
.lc-points + .sv-sub { margin-top: clamp(36px, 6cqw, 64px); }
.lc-points + .sv-sub + .kn-list + .kn-more { margin-top: 22px; }

/* The process: a numbered list, its numbers set like the service pages' steps. */
.lc-steps ol { list-style: none; margin: 0; padding: 0; counter-reset: lc; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3cqw, 40px) clamp(18px, 3cqw, 36px); }
.lc-steps li { counter-increment: lc; min-width: 0; padding-top: 16px; border-top: 2px solid var(--heading-color); color: var(--kn-soft); line-height: 1.6; }
.lc-steps li::before { content: counter(lc, decimal-leading-zero); display: block; margin-bottom: 12px; font-family: var(--display-font); font-size: clamp(2rem, 4.4cqw, 3.2rem); line-height: .9; color: var(--accent-color); }
.lc-steps li strong { display: block; margin-bottom: 6px; font-family: var(--heading-font); font-weight: 700; font-size: 1.08rem; line-height: 1.3; color: var(--heading-color); }

.lc-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lc-case { min-width: 0; padding: clamp(22px, 3cqw, 32px); border-radius: 18px; background: var(--surface); border: 1px solid var(--kn-rule); }
.lc-case-ind { display: block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); }
.lc-case h3 { margin: 0 0 16px; font-family: var(--heading-font); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--heading-color); }
.lc-case dl { margin: 0; display: grid; gap: 14px; }
.lc-case dt { margin-bottom: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }
.lc-case dd { margin: 0; color: var(--kn-soft); line-height: 1.6; }
.lc-case-result { padding: 14px 16px; border-radius: 12px; border-left: 3px solid var(--accent-color); background: color-mix(in srgb, var(--accent-color), transparent 90%); }
.lc-case-result dt { color: var(--accent-color); }
.lc-case-result dd { color: var(--heading-color); font-weight: 600; }

.lc-closing { max-width: 64ch; color: var(--kn-soft); font-size: clamp(1.05rem, 1.7cqw, 1.3rem); line-height: 1.65; }
.lc-closing p { margin: 0 0 14px; }
.lc-closing strong { color: var(--heading-color); }
.sv-index h2 small { margin-left: 8px; font-size: .55em; font-weight: 600; letter-spacing: .04em; color: var(--kn-soft); }

@media (max-width: 991.98px) {
    .lc-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .lc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .lc-points ul, .lc-cases { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .lc-steps ol { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The work page (.wk-)
   Delivered projects as rows: who it was for and what kind of thing, then what was built,
   then its mark in the theme's ink (see InkLogo). A row is not a link, because there is no
   page behind it.
   ========================================================================== */
.wk-list { list-style: none; margin: 0 0 clamp(36px, 6cqw, 72px); padding: 0; }
.wk-list li { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr) 170px; gap: 12px clamp(20px, 4cqw, 56px); align-items: start;
    padding: 30px 2px; border-top: 1px solid var(--kn-rule); }
.wk-list li:last-child { border-bottom: 1px solid var(--kn-rule); }
.wk-head h2 { margin: 0 0 8px; font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.25rem, 2.5cqw, 1.8rem); line-height: 1.15; letter-spacing: -.02em; color: var(--heading-color); }
.wk-cat { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); }
.wk-sum { margin: 0; color: var(--kn-soft); line-height: 1.7; }
.wk-mark { display: grid; justify-items: end; gap: 8px; color: rgba(var(--ink), .88); }
.wk-mark small { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.wk-mark i { font-size: 1.9rem; line-height: 1; color: var(--accent-color); }
/* The stagger stops growing after the first screenful, so a long list does not keep its
   last rows waiting. */
.kn-in .wk-list li { animation: kn-row .5s var(--kn-ease) both; animation-delay: calc(min(var(--i), 10) * .045s + .15s); }
/* Two closing strips in a row share one rule between them. */
.kn-strip + .kn-strip { margin-top: 0; border-top: 0; }

@media (max-width: 991.98px) {
    /* Name and mark side by side, the account of the work across the full width below. */
    .wk-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .wk-sum { grid-column: 1 / -1; }
    .wk-mark { grid-column: 2; grid-row: 1; }
}
@media (max-width: 575.98px) {
    /* One column, the mark first and on a line of its own with its caption beside it. */
    .wk-list li { grid-template-columns: minmax(0, 1fr); padding-block: 26px; }
    .wk-mark { grid-column: 1; grid-row: auto; order: -1; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 10px; margin-bottom: 4px; }
}

@media (max-width: 991.98px) {
    .sv-top, .sv-state { grid-template-columns: 1fr; }
    .sv-art { max-width: 520px; }
    .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 767.98px) {
    .sv-group, .sv-items { grid-template-columns: 1fr; }
    /* The line drops under the name, and the arrow stays beside the name. */
    .sv-index a { grid-template-columns: minmax(0, 1fr) auto; }
    .sv-index p { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 575.98px) {
    .sv-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The blog (.bl-)
   The index is a list, like the other index pages: the newest article leads with its cover
   beside it, the rest are rows of date, topic and title. A row is one link, its title's,
   stretched over the whole row. An article is set for reading: one column of running text at
   a comfortable measure, with its contents beside it on a wide screen.
   ========================================================================== */
.bl-cats { margin-bottom: clamp(30px, 4.5cqw, 52px); }
.bl-cats a[aria-current], .bl-cats a[aria-current]:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.bl-none a { font-weight: 600; }

.bl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; font-size: .84rem; color: var(--kn-soft); }
.bl-cat { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); }
.bl-ex { margin: 0; max-width: 70ch; color: var(--kn-soft); line-height: 1.65; }
.bl-lead h2 a, .bl-row :is(h2, h3) a { color: var(--heading-color); text-decoration: none; transition: color .2s; }
.bl-lead h2 a::after, .bl-row :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.bl-lead:hover h2 a, .bl-row:hover :is(h2, h3) a, .bl-row:hover > i { color: var(--accent-color); }

.bl-lead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4cqw, 56px); align-items: center; margin-bottom: clamp(30px, 5cqw, 56px); }
.bl-lead h2 { margin: 0 0 14px; font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.5rem, 3.3cqw, 2.4rem); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.bl-lead .bl-ex { margin-bottom: 20px; font-size: 1.05rem; }
.bl-lead-img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--kn-rule); transition: transform .4s var(--kn-ease); }
.bl-lead:hover .bl-lead-img { transform: translateY(-3px); }
.bl-lead:hover .kn-prod-go i { transform: translateX(4px); }

.bl-list { list-style: none; margin: 0; padding: 0; }
.bl-list li { border-top: 1px solid var(--kn-rule); }
.bl-list li:last-child { border-bottom: 1px solid var(--kn-rule); }
.bl-row { position: relative; display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 6px clamp(20px, 4cqw, 52px); align-items: baseline;
    padding: 26px 2px; transition: padding-left .25s var(--kn-ease); }
.bl-row > time { font-size: .86rem; font-weight: 600; color: var(--kn-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-row :is(h2, h3) { margin: 0 0 8px; font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.12rem, 2.1cqw, 1.45rem); line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.bl-row > i { font-size: 1.1rem; opacity: .45; transition: transform .25s var(--kn-ease), opacity .2s, color .2s; }
.bl-row:hover { padding-left: 12px; }
.bl-row:hover > i { opacity: 1; transform: translateX(4px); }
.kn-in .bl-list li { animation: kn-row .5s var(--kn-ease) both; animation-delay: calc(min(var(--i), 10) * .045s + .15s); }
.bl-list + .kn-more { margin-top: 26px; }

.bl-pages { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: clamp(30px, 5cqw, 52px); }
.bl-pages ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.bl-pages a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--kn-rule);
    font-weight: 600; font-variant-numeric: tabular-nums; color: var(--heading-color); text-decoration: none; transition: border-color .2s, color .2s; }
.bl-pages a:hover { border-color: var(--accent-color); color: var(--accent-color); }
.bl-pages a[aria-current], .bl-pages a[aria-current]:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.bl-pages .bl-step:first-child { justify-self: start; }
.bl-pages .bl-step:last-child { justify-self: end; }
.bl-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--kn-soft); }
.bl-list + .kn-strip, .bl-pages + .kn-strip, .bl-none + .kn-strip { margin-top: clamp(36px, 6cqw, 72px); }

/* the article */
.bl-hero .kn-crumbs li[aria-current] { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-hero a.sv-badge { text-decoration: none; transition: border-color .2s; }
.bl-hero a.sv-badge:hover { color: var(--kn-pop); border-color: var(--kn-pop); }
.bl-title { margin: 0; font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.7rem, 3.6cqw, 3rem); line-height: 1.1; letter-spacing: -.03em; color: var(--kn-hero-ink); text-wrap: balance; }
.bl-hero .sv-intro { max-width: 54ch; margin-bottom: 20px; }
.bl-by { display: flex; flex-wrap: wrap; margin: 0; font-size: .9rem; color: var(--kn-hero-mute); }
.bl-by > * + *::before { content: "\00b7"; margin: 0 10px; }
.bl-cover { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .55); }
html[data-theme="light"] .bl-cover { box-shadow: 0 24px 50px -30px rgba(20, 35, 26, .45); }
.kn-go .bl-cover { animation: kn-rise .8s cubic-bezier(.22, 1, .36, 1) both .3s; }

.bl-sec { padding-top: clamp(28px, 4vw, 52px); }
.bl-layout { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 270px); justify-content: space-between; gap: clamp(32px, 6cqw, 80px); align-items: start; }
.bl-aside { position: sticky; top: 108px; display: grid; gap: 28px; }
.bl-toc h2, .bl-foot h2 { margin: 0 0 12px; font-family: var(--default-font); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--kn-soft); }
/* Short of the full height, so the box under it stays on screen too; a long list scrolls. */
.bl-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--kn-rule); max-height: max(160px, calc(100vh - 420px)); overflow-y: auto; }
.bl-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.4; color: var(--kn-soft); text-decoration: none; transition: color .2s, border-color .2s; }
.bl-toc a:hover { color: var(--heading-color); }
.bl-toc a[aria-current] { color: var(--heading-color); border-left-color: var(--accent-color); font-weight: 600; }
.bl-ask { padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--kn-rule); }
.bl-ask h2 { margin: 0 0 6px; font-family: var(--heading-font); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--heading-color); }
.bl-ask p { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--kn-soft); }
.bl-ask .kn-btn { display: flex; justify-content: center; padding: 11px 16px; font-size: .92rem; }
.bl-ask .kn-btn + .kn-btn { margin-top: 10px; }

/* Running text set for reading: the blog's stored HTML and the privacy policy. Headings,
   paragraphs, lists, now and then a table or a quote. */
.kn-prose { color: rgba(var(--ink), .86); font-size: clamp(1.04rem, 1.4cqw, 1.125rem); line-height: 1.8; overflow-wrap: break-word; }
.kn-prose > :first-child { margin-top: 0; }
.kn-prose h2 { margin: 2.1em 0 .65em; font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.35rem, 2.4cqw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; color: var(--heading-color); text-wrap: balance; scroll-margin-top: 110px; }
.kn-prose h3 { margin: 1.7em 0 .5em; font-family: var(--heading-font); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--heading-color); scroll-margin-top: 110px; }
.kn-prose h4 { margin: 1.5em 0 .5em; font-weight: 700; font-size: 1.05rem; color: var(--heading-color); }
.kn-prose p { margin: 0 0 1.15em; }
.kn-prose ul, .kn-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.kn-prose li { margin-bottom: .55em; padding-left: .25em; }
.kn-prose li::marker { color: var(--accent-color); }
.kn-prose ol li::marker { font-weight: 700; }
.kn-prose strong { color: var(--heading-color); font-weight: 700; }
.kn-prose a, .kn-prose a:hover { color: var(--accent-color); }
.kn-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kn-prose a:hover { text-decoration-thickness: 2px; }
.kn-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.kn-prose table { display: block; max-width: 100%; overflow-x: auto; margin: 1.6em 0; border-collapse: collapse; font-size: .94rem; line-height: 1.55; }
.kn-prose th, .kn-prose td { padding: 10px 14px; border: 1px solid var(--kn-rule); text-align: left; vertical-align: top; }
.kn-prose th { background: rgba(var(--ink), .05); color: var(--heading-color); }
.kn-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent-color); color: var(--heading-color); font-size: 1.1em; }
.kn-prose blockquote p:last-child { margin-bottom: 0; }
.kn-prose pre { margin: 1.6em 0; padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--kn-rule); font-size: .9rem; line-height: 1.6; }
.kn-prose code { padding: 2px 6px; border-radius: 5px; background: rgba(var(--ink), .07); font-size: .9em; }
.kn-prose pre code { padding: 0; background: none; }
.kn-prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--kn-rule); opacity: 1; }

.bl-foot { display: grid; gap: 26px; margin-top: clamp(36px, 5cqw, 56px); padding-top: 28px; border-top: 1px solid var(--kn-rule); }
.bl-tags a { padding: 7px 14px; font-size: .86rem; }
.bl-share { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-share a, .bl-share button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--kn-rule); background: none;
    font: inherit; font-size: .9rem; font-weight: 600; color: var(--heading-color); text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s; }
.bl-share a:hover, .bl-share button:hover { border-color: var(--accent-color); color: var(--accent-color); }
.bl-explore .sv-sub:first-child { margin-top: 8px; }

@media (max-width: 991.98px) {
    .bl-layout { grid-template-columns: minmax(0, 1fr); }
    /* The contents list is for a wide screen; the closing section asks what the box asked. */
    .bl-aside { display: none; }
    .bl-hero .bl-cover { max-width: 560px; }
}
@media (max-width: 767.98px) {
    .bl-lead { grid-template-columns: minmax(0, 1fr); }
    .bl-lead-img { order: -1; }
    /* Date, topic and reading time share one line above the title. */
    .bl-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; padding-block: 22px; }
    .bl-row > div { display: contents; }
    .bl-row :is(h2, h3), .bl-row .bl-ex { flex-basis: 100%; }
    .bl-row > i { display: none; }
    .bl-pages { grid-template-columns: 1fr 1fr; }
    .bl-pages ol { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 575.98px) {
    /* The title is the heading right below; on a phone the trail stops at the blog. */
    .bl-hero .kn-crumbs li[aria-current] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bl-row, .bl-lead-img { transition: none; }
}

/* ==========================================================================
   The remaining pages: booking (.bk-), careers (.cr-), the privacy policy (.pv-), and the
   pages a visitor lands on after a form or a wrong turn (.ty-, .er-). Most of what they need
   is above; these are the parts that are their own.
   ========================================================================== */
/* booking: every way to hire us, each a card with the platform's own mark. The card is one
   link, its name's, stretched over the whole card. */
.bk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bk-card { position: relative; min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 18px; align-content: start; padding: clamp(22px, 3cqw, 30px);
    border-radius: 18px; background: var(--surface); border: 1px solid var(--kn-rule); transition: border-color .2s, transform .25s var(--kn-ease); }
.bk-card:hover { border-color: color-mix(in srgb, var(--accent-color), transparent 45%); transform: translateY(-3px); }
.bk-card > :not(.book-mark) { grid-column: 2; }
.bk .book-mark { grid-row: 1 / span 4; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; }
.bk .book-mark svg { width: 26px; height: 26px; display: block; }
.bk-tag { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); }
.bk-card h3 { margin: 0 0 4px; font-family: var(--heading-font); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.bk-card h3 a, .bk-card h3 a:hover { color: var(--heading-color); text-decoration: none; }
.bk-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.bk-card p { margin: 0; color: var(--kn-soft); line-height: 1.65; }
.bk-card .kn-prod-go { margin-top: 12px; }
.bk-card:hover .kn-prod-go i { transform: translateX(4px); }

/* careers: open roles listed as the services index lists services, a role beside its facts */
.cr-roles h3 { margin: 0 0 6px; font-family: var(--heading-font); font-weight: 700; font-size: clamp(1.2rem, 2.6cqw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; color: inherit; transition: color .2s; }
.cr-roles a:hover h3 { color: var(--accent-color); }
.sv-index .cr-meta { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-color); }
.cr-block + .cr-block { margin-top: clamp(30px, 4cqw, 46px); }
.cr-block h2 { margin: 0 0 14px; font-family: var(--heading-font); font-weight: 800; font-size: clamp(1.3rem, 2.4cqw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; color: var(--heading-color); }
.cr-block ul { list-style: none; margin: 0; padding: 0; }
.cr-block li { position: relative; padding: 12px 2px 12px 30px; border-top: 1px solid var(--kn-rule); color: rgba(var(--ink), .84); line-height: 1.65; }
.cr-block li:last-child { border-bottom: 1px solid var(--kn-rule); }
.cr-block li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 12px; height: 7px; border-left: 2px solid var(--accent-color); border-bottom: 2px solid var(--accent-color); transform: rotate(-45deg); }
.cr .sv-facts .kn-btn { width: 100%; justify-content: center; margin-top: 22px; }
.cr-for { margin: 20px 0 0; color: var(--kn-soft); }
.cr-for strong { color: var(--heading-color); }
.cr-error { margin: 0; padding: 12px 16px; border-radius: 10px; font-size: .92rem; color: #e05a5a; background: color-mix(in srgb, #d33, transparent 88%); border: 1px solid color-mix(in srgb, #d33, transparent 65%); }
html[data-theme="light"] .cr-error { color: #b3261e; }
.kn-form .cr-hint { font-size: .78rem; font-weight: 400; color: var(--kn-soft); }
.kn-form input[type="file"] { padding: 9px; cursor: pointer; }
.kn-form input[type="file"]::file-selector-button { margin-right: 14px; padding: 9px 16px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; font-size: .9rem; color: #fff; background: var(--accent-fill); cursor: pointer; }

/* community: the two projects as the home page's two doors */
.kn-door .kn-prod-cat { margin-bottom: 14px; }

/* the privacy policy: one column of running text, a rule between its sections */
.pv-body { max-width: 46rem; }
.pv-body h2 { padding-top: 1.3em; border-top: 1px solid var(--kn-rule); }
.kn-prose .tablewrap { overflow-x: auto; margin: 1.4em 0 1.6em; }
.kn-prose .tablewrap table { display: table; width: 100%; margin: 0; }

/* after a form is sent, and after a wrong turn */
.ty-hero, .er-hero { min-height: min(80vh, 780px); display: flex; align-items: center; }
.ty-hero > .container, .er-hero > .container { width: 100%; }
.er-code { margin: 0 0 8px; font-family: var(--display-font); font-size: clamp(5rem, 22cqw, 12rem); line-height: .8; letter-spacing: -.04em; color: var(--kn-pop); }
.er-hero .sv-sub { margin-top: clamp(36px, 6cqw, 56px); }
.ty-hero .sv-badge i { margin-right: 4px; }

@media (max-width: 767.98px) {
    .bk-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-card { transition: none; }
}
.bk-next { margin-top: 26px; }
@media (max-width: 991.98px) {
    /* On a narrow screen the facts of a role come before the lists of what it involves. */
    .cr .sv-state > .sv-facts { order: -1; }
}
.kn-doors + .kn-strip { margin-top: clamp(36px, 6cqw, 72px); }
/* Cookie names are long single words; in a table cell they may break anywhere. */
.kn-prose td code { overflow-wrap: anywhere; }