/* ============================================================
   kresvik.com/company/ and /branding/ - the company pages' own styles,
   loaded after /assets/site.css on both and built from its tokens and
   parts: paper, Basalt ink, flat Signal Blue, Sora and Spline Sans Mono,
   the hero swoosh, hairline rows, one dark band. Only what the company
   pages have and the Guardian pages do not lives here, and nearly all of
   it is the company page. That page reads as a short letter: the words
   are the product.
   ============================================================ */

:root {
  --steam:     #6FA0FF;                   /* Signal Blue lifted, for the dark band */
  --band-text: #AFBDD9;
  --band-line: rgba(159, 183, 226, 0.22);
}

/* headlines break where the sense breaks; prose never ends on one word */
main h2 { text-wrap: balance; }
.co-id, .co-letter p, .co-turn p, .co-prose, .gd__body p, .gd__facts .f-l, .lede { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ hero + letter
   One section: the headline, one plain sentence saying what Kresvik is,
   then the letter. The letter carries on from the headline ("that wasted work"),
   so it sits under it rather than opening a section of its own. */
.co-hero { padding-block: clamp(40px, 8vw, 136px) clamp(80px, 9vw, 150px); }
.co-hero__pre {
  display: block;
  font-size: clamp(20px, 2.1vw, 40px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--muted);
}
.co-hero__main {
  display: block; margin-top: clamp(10px, 1.1vw, 20px);
  font-size: clamp(36px, 5.5vw, 96px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1.02; color: var(--ink);
}
.co-hero__main .hero__accent { padding-bottom: 0.06em; }
.co-br { display: none; }
@media (min-width: 900px) { .co-br { display: inline; } }

/* what Kresvik is, in one sentence on a hairline strip - the Guardian
   hero's spec-strip rules, at reading size */
.co-id {
  margin-top: clamp(40px, 4.4vw, 68px);
  padding-block: clamp(14px, 1.2vw, 18px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: clamp(17px, 1.35vw, 22px); line-height: 1.45; letter-spacing: -0.01em;
  color: var(--muted);
}
.co-id b { font-weight: 600; color: var(--ink); }

/* The letter. From 900px the list of pieces is pushed across the page,
   out of line with the paragraphs around it: the stitching made visible.
   The turn that answers it is the first thing on the page set square. */
.co-letter {
  margin-top: clamp(48px, 5.5vw, 88px);
  font-size: clamp(19px, 1.6vw, 26px); line-height: 1.5; letter-spacing: -0.012em; color: var(--ink);
}
@media (min-width: 900px) {
  .co-letter {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }
  .co-letter > p { grid-column: 1 / span 8; }
  .co-letter > .co-pieces { grid-column: 5 / -1; }
}
.co-pieces { list-style: none; margin-block: 1.2em; }
.co-pieces li {
  font-weight: 500; padding-block: 0.5em;
  padding-inline-start: var(--o, 0);
  border-top: 1px solid var(--line2);
}
.co-pieces li:last-child { border-bottom: 1px solid var(--line2); }
.co-pieces li:nth-child(2) { --o: 2.4em; }
.co-pieces li:nth-child(3) { --o: 0.9em; }
.co-pieces li:nth-child(4) { --o: 3.3em; }
.co-pieces li:nth-child(5) { --o: 1.6em; }
@media (max-width: 559px) {
  .co-pieces li:nth-child(2) { --o: 1.2em; }
  .co-pieces li:nth-child(3) { --o: 0.4em; }
  .co-pieces li:nth-child(4) { --o: 1.6em; }
  .co-pieces li:nth-child(5) { --o: 0.8em; }
}

/* ------------------------------------------------------------ the turn: the one dark band
   The founder's sentence at display size, what "the pieces" means right
   under it, and the four of them drawn beside it. */
.co-turn { padding-block: clamp(80px, 9vw, 160px); overflow: hidden; }
.co-turn__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .co-turn__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 10fr); } }
.co-turn__copy { container-type: inline-size; }
/* sized to the copy column, so "and to make them fit." - one idea, never
   broken - always clears it */
.co-turn h2 {
  font-size: clamp(24px, 9.6cqi, 76px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05;
}
.co-turn .hero__accent { color: var(--steam); white-space: nowrap; }
.co-turn .hero__accent .swoosh path { stroke: var(--steam); }
.co-turn p {
  margin-top: clamp(36px, 3.6vw, 56px); max-width: 46ch;
  font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6;
}
.co-turn p b { color: #fff; font-weight: 600; }

/* The exploded stack: the four things we design, drawn as plates pulled
   apart along one axis the way an assembly drawing shows parts that fit.
   Generated by tools/gen_stack.py; its strokes do not scale. */
.co-stack { margin: 0; width: 100%; max-width: 560px; justify-self: end; }
.co-stack svg { width: 100%; height: auto; overflow: visible; }
.co-stack path { vector-effect: non-scaling-stroke; }
.co-stack .guide { fill: none; stroke: rgba(159, 183, 226, 0.34); stroke-dasharray: 3 5; }
.co-stack .pl-t { fill: #0E2046; stroke: rgba(159, 183, 226, 0.55); }
.co-stack .pl-l { fill: #0A1836; stroke: rgba(159, 183, 226, 0.28); }
.co-stack .pl-r { fill: #0C1C3E; stroke: rgba(159, 183, 226, 0.28); }
.co-stack .hb { fill: none; stroke: rgba(111, 160, 255, 0.4); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.co-stack .hb-run { fill: none; stroke: var(--steam); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 24 76; }
.co-stack .rr { fill: none; stroke: rgba(111, 160, 255, 0.65); stroke-dasharray: 4 5; }
.co-stack .rc { fill: var(--steam); }
.co-stack .code { fill: none; stroke: rgba(111, 160, 255, 0.5); stroke-width: 2.2; stroke-linecap: round; }
.co-stack .code--hi { stroke: var(--steam); }
.co-stack .bx-t { fill: #1B3566; stroke: var(--steam); }
.co-stack .bx-f { fill: #12284F; stroke: rgba(111, 160, 255, 0.75); }
.co-stack .bx-s { fill: #0F2143; stroke: rgba(111, 160, 255, 0.75); }
.co-stack .lead { fill: none; stroke: rgba(111, 160, 255, 0.6); }
.co-stack text { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.14em; fill: var(--band-text); }
/* the labels are in SVG units, so they shrink with the drawing; each range
   sets the size that keeps them at about 11-13px on screen */
@media (max-width: 999px) {
  .co-stack { justify-self: start; max-width: 400px; }
  .co-stack text { font-size: 20px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .co-stack text { font-size: 18px; }
}
/* the plates settle into place when the band scrolls in, not on load */
@media (prefers-reduced-motion: no-preference) {
  .js .co-stack:not(.in) .pl { opacity: 0; transform: translateY(-30px); }
  .js .co-stack:not(.in) .lbl { opacity: 0; }
  .co-stack .pl { transition: opacity 1100ms var(--ease), transform 1100ms var(--ease); transition-delay: calc(var(--i) * 150ms + 150ms); }
  .co-stack .lbl { transition: opacity 700ms ease; transition-delay: calc(var(--i) * 150ms + 750ms); }
  .co-stack .hb-run { animation: co-beat 3.2s linear infinite; }
  @keyframes co-beat { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .co-stack .hb-run { display: none; }
  .co-stack .hb { stroke: var(--steam); }
}

/* ------------------------------------------------------------ Guardian
   The Hub in a Mist plate with a hairline edge - a specimen card - on the
   toned section. Heading, plate, body on a phone; plate beside heading and
   body from 900px. */
.gd {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "plate head" "plate body";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 96px);
}
.gd__head { grid-area: head; }
.gd__body { grid-area: body; }
.gd__plate { grid-area: plate; align-self: start; }
@media (max-width: 899px) {
  .gd { grid-template-columns: 1fr; grid-template-areas: "head" "plate" "body"; grid-template-rows: auto; }
}
.gd__plate {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: 16px;
}
/* the text column runs longer than the plate; the Hub stays in view beside it */
@media (min-width: 900px) { .gd__plate { position: sticky; top: calc(var(--nav-h) + 24px); } }
@media (max-width: 899px) { .gd__plate { margin-top: 28px; aspect-ratio: 5 / 4; max-width: 560px; } }
.gd__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.gd__plate figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 90%, var(--paper));
}
.gd__plate figcaption b { font-weight: 500; color: var(--ink); }
/* on a phone the caption leaves the picture and sits under it on a hairline,
   so it can wrap without running into the Hub */
@media (max-width: 559px) {
  .gd__plate { aspect-ratio: auto; }
  .gd__plate img { height: auto; aspect-ratio: 5 / 4; }
  .gd__plate figcaption { position: static; padding: 12px 14px; border-top: 1px solid var(--line); }
}

.gd__why {
  margin-top: 20px; max-width: 44ch;
  font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink);
}
@media (max-width: 899px) { .gd__why { margin-top: 28px; } }
.gd__body .lede { margin-top: 16px; max-width: 52ch; }

.gd__facts { margin-top: clamp(28px, 3vw, 44px); list-style: none; }
.gd__facts li {
  display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 6px 24px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.gd__facts li:last-child { border-bottom: 1px solid var(--line); }
/* side by side only where the column is wide enough for both halves */
@media (max-width: 699px), (min-width: 900px) and (max-width: 1199px) { .gd__facts li { grid-template-columns: 1fr; } }
.gd__facts .f-t { font-size: clamp(16px, 1.2vw, 19px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.gd__facts .f-l { font-size: clamp(14px, 0.95vw, 16px); line-height: 1.55; color: var(--muted); }

/* where it stands: one line, with the one moving thing in the section -
   the sonar the Guardian page's drawing uses for a live device */
.gd__stand {
  margin-top: clamp(22px, 2.2vw, 30px);
  display: flex; gap: 14px; align-items: baseline;
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--muted);
  max-width: 56ch;
}
.gd__stand b { color: var(--ink); font-weight: 600; }
.gd__dot { position: relative; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); top: -1px; }
.gd__dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(46, 107, 255, 0.45); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .gd__dot::after { animation: gd-sonar 3.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
  @keyframes gd-sonar {
    0% { transform: scale(0.5); opacity: 0.9; }
    70% { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
  }
}

/* the way across to the Guardian page: a hairline row, not a second
   pill - the header's pill already points there and stays in view */
.gd__go {
  margin-top: clamp(28px, 3vw, 44px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  padding-block: 18px 20px;
  border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  color: var(--ink);
}
.gd__go-k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.gd__go-u { font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--signal-text); }
.gd__go-u i { display: inline-block; font-style: normal; margin-inline-start: 6px; transition: transform 200ms var(--ease); }
.gd__go:hover { color: var(--ink); border-color: var(--ink); }
.gd__go:hover .gd__go-u { color: var(--navy); }
.gd__go:hover .gd__go-u i { transform: translateX(4px); }
.gd__also { margin-top: 18px; }

/* ------------------------------------------------------------ what comes next, and who to write to */
/* The Guardian block ends on a one-line link and this section opens on a
   headline. The house section padding on both sides of that seam, up to
   148px each, reads as a hole between them, so each side gives up about
   a third of it. */
.gd-sec { padding-bottom: clamp(48px, 6.5vh, 100px); }
.co-next { padding-top: clamp(48px, 6.5vh, 100px); }

.co-line { display: block; text-wrap: balance; }
.co-prose { margin-top: 18px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; color: var(--muted); }
.co-contact {
  margin-top: clamp(56px, 6vw, 104px); padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--line2);
}
.co-contact__say { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: var(--muted); }
/* The address and its copy pill are one unit, and the phone number is a line
   of its own under them, so the pill can only be read as copying the
   address. The address stays on one line with its pill down to 360px. */
.co-contact__mail {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.co-mail {
  font-size: clamp(25px, 4.4vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1;
  color: var(--ink); border-bottom: 2px solid var(--signal);
  overflow-wrap: anywhere;
}
.co-mail:hover { color: var(--signal-text); }
.co-contact__tel { margin-top: clamp(12px, 1.4vw, 20px); }
.co-tel { display: inline-block; font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.co-tel:hover { color: var(--signal-text); }
/* site.css draws the copy pill for the dark band; on paper it takes the ink.
   It is as wide as its "copied" state (data-done-short), so confirming a copy
   never pushes it under the address or the phone number down. */
.co-contact .copy-btn {
  margin-inline-start: 0; padding: 6px 12px; border-color: var(--line2); color: var(--muted);
  min-width: calc(6ch + 0.84em + 26px);
}
.co-contact .copy-btn:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 899px) {
  .co-tel, .co-contact .copy-btn { padding-block: 10px; }
  .co-contact__tel { margin-top: 2px; }
  .gd__also a.ghost { display: inline-block; padding-block: 12px; }
}