/* offgrid — capability-page blocks.
   Written by tools/capability-donors.mjs out of offgrid: only the
   rules the transplanted blocks use, class names prefixed with `og-`, every
   selector scoped under the block's own root class. Do not edit by hand. */
@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6893_Satoshi-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6885_Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi Variable;
  src: url("../assets/offgrid/682b365fe602ffe9aded6890_Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6886_Satoshi-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded688b_Satoshi-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6883_Satoshi-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6881_Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded688c_Satoshi-Italic.woff2") format("woff2"), url("../assets/offgrid/682b365fe602ffe9aded6889_Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6884_Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded688a_Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../assets/offgrid/682b365fe602ffe9aded6882_Satoshi-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
.og-intro {
  --_color-palette---background-color--primary: #0f0f0f;
  --_fonts---satoshi: Satoshi, Arial, sans-serif;
  --_color-palette---font-color--primary: #efeeec;
  --_text-weights---regular: 400;
  --_text-classes---regular: 1rem;
  --_headings---h3: 5em;
  --_text-weights---thin: 100;
  --_text-classes---medium: 1rem;
  --_text-classes---large: 1.125rem;
  --_color-palette---white: #fbfbfb;
  --_color-palette---black-tertiary: #0e0e10;
  --_headings---h1: 6.25em;
  --_text-weights---medium: 500;
  --_text-classes---tiny: .75rem;
  --_color-palette---black-secondary: #090909;
  --_text-weights---extra-bold: 800;
  --_color-palette---black-primary: black;
  --_color-palette---button-color: #2d2d2e;
  --_headings---h6: 2em;
  --_headings---h2: 6.25em;
  --_text-weights---light: 300;
  --_color-palette---font-color--secondary: #121212;
  --_text-weights---semibold: 600;
  --_headings---h5: 2.5em;
  --_color-palette---main-color: #fc5b30;
  --_text-weights---bold: 700;
  --_text-weights---extra-light: 0;
  --_text-classes---huge: 1.5em;
  --_text-classes---small: 1rem;
  --_headings---h4: 3.875em;
  --_text-weights---black: 900;
  --gap: 1rem;
  --border-1: .5rem;
  --border-2: 50rem;
  --circle: 50rem;
  --margin-gsap: 0svh;
  --padding-mobile: 0svh;
  --_fonts---satoshi-variable: "Satoshi Variable", Arial, sans-serif;
  --_color-palette---secondary-color: #d71c21;
  --_fonts---bounded: Bounded;
  --_fonts---bounded-variable: "Bounded Variable";
  --_color-palette---background-color--secondary: #d9d9d9;
}
.og-intro article, .og-intro aside, .og-intro details, .og-intro figcaption, .og-intro figure, .og-intro footer, .og-intro header, .og-intro hgroup, .og-intro main, .og-intro menu, .og-intro nav, .og-intro section, .og-intro summary { display: block; }
.og-intro a { background-color: #0000; }
.og-intro h1 { margin: .67em 0;
  font-size: 2em; }
.og-intro img { border: 0; }
.og-intro img { vertical-align: middle;
  max-width: 100%;
  display: inline-block; }
.og-intro .w-inline-block { max-width: 100%;
  display: inline-block; }
.og-intro h1, .og-intro h2, .og-intro h3, .og-intro h4, .og-intro h5, .og-intro h6 { margin-bottom: 10px;
  font-weight: bold; }
.og-intro h1 { margin-top: 20px;
  font-size: 38px;
  line-height: 44px; }
.og-intro p { margin-top: 0;
  margin-bottom: 10px; }
.og-intro .w-container { max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
.og-intro .w-container:before, .og-intro .w-container:after { content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table; }
.og-intro .w-container:after { clear: both; }
.og-intro .w-container .w-row { margin-left: -10px;
  margin-right: -10px; }
@media screen and (max-width: 991px) {
  .og-intro .w-container { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .og-intro .w-row, .og-intro .w-container .w-row { margin-left: 0;
    margin-right: 0; }
}
@media screen and (max-width: 479px) {
  .og-intro .w-container { max-width: none; }
}
.og-intro .w-layout-blockcontainer { max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block; }
@media screen and (max-width: 991px) {
  .og-intro .w-layout-blockcontainer { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .og-intro .w-layout-blockcontainer { max-width: none; }
}
.og-intro h1 { margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: bold;
  line-height: 44px; }
.og-intro p { font-size: var(--_text-classes---regular);
  margin-bottom: 10px; }
.og-intro a { color: var(--_color-palette---font-color--primary);
  text-decoration: none; }
.og-intro img { max-width: 100%;
  display: inline-block; }
.og-intro .og-heading-style-h1 { font-size: var(--_headings---h1);
  line-height: 1;
  font-weight: var(--_text-weights---medium);
  margin-top: 0;
  margin-bottom: 0; }
.og-intro .og-heading-style-h1.og-text-weight-light.og-is-hero { z-index: 2;
  background-color: var(--_color-palette---black-tertiary);
  text-align: center;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  font-size: 13vw;
  font-weight: 300;
  display: inline-flex;
  position: relative;
  left: 0;
  overflow: hidden; }
.og-intro .og-heading-style-h1.og-text-weight-light.og-is-hero_from-left { text-align: center;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 13vw;
  font-weight: 300;
  display: inline-flex;
  position: relative;
  left: 0;
  overflow: hidden; }
.og-intro .og-heading-style-h1.text-weight-normal { font-weight: var(--_text-weights---regular); }
.og-intro .og-container-large { width: 100%;
  max-width: 93em;
  margin-left: auto;
  margin-right: auto; }
.og-intro .og-text-weight-medium { font-weight: var(--_text-weights---medium); }
.og-intro .og-text-size-medium { font-size: var(--_text-classes---medium); }
.og-intro .og-text-size-medium.og-text-style-allcaps.og-is-glow { font-size: 1.2rem; }
.og-intro .og-text-weight-light { font-weight: var(--_text-weights---light); }
.og-intro .og-padding-global { padding-left: 3em;
  padding-right: 3em; }
.og-intro .og-text-style-allcaps { text-transform: uppercase; }
.og-intro .og-page-wrapper { overflow: clip; }
.og-intro .og-text-size-small { font-size: var(--_text-classes---small); }
.og-intro .og-container-medium { width: 100%;
  max-width: 64em;
  margin-left: auto;
  margin-right: auto; }
.og-intro .og-credits-wrapper { grid-column-gap: .5em;
  grid-row-gap: .5em;
  opacity: .5;
  justify-content: center;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 1.5em;
  display: flex; }
.og-intro .og-crediits { grid-column-gap: .5em;
  grid-row-gap: .5em;
  font-size: clamp(1rem, .8em, 1.125rem);
  text-decoration: none;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease;
  display: flex; }
.og-intro .og-crediits:hover { opacity: .8; }
.og-intro .og-paragraph { font-size: var(--_text-classes---medium);
  margin-bottom: 0; }
.og-intro .og-paragraph.og-is-light { color: #efeeec80; }
.og-intro .og-gap_1em { grid-column-gap: 1em;
  grid-row-gap: 1em;
  display: flex; }
.og-intro .og-home-hero { grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex; }
.og-intro .og-max-width_hero { text-align: center;
  justify-content: center;
  align-items: center;
  max-width: 51em;
  display: flex; }
.og-intro .og-hero-section { z-index: 10;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative; }
.og-intro .og-copyright { position: absolute;
  bottom: 0; }
.og-intro .og-grid { grid-column-gap: .25em;
  grid-row-gap: .25em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  min-height: 99vh;
  display: grid; }
.og-intro .og-grid__img { opacity: 1;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative; }
.og-intro .og-works-section { z-index: 2; }
.og-intro .og-pin-spacer { place-self: auto;
  position: relative; }
.og-intro .og-cms-link { z-index: 2;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%; }
.og-intro .og-cms-button { -webkit-backdrop-filter: blur(5.8px);
  backdrop-filter: blur(5.8px);
  text-transform: uppercase;
  background-color: #00000075;
  border-radius: .25em;
  padding: .48em .64em; }
.og-intro .og-image { object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%; }
.og-intro .og-paragraph-instructions { margin-top: .5rem;
  font-size: 1rem; }
.og-intro .og-paragraph-instructions.is-bigger { font-size: var(--_text-classes---huge); }
.og-intro .og-text-spam { width: 100%;
  display: block;
  overflow: hidden; }
@media screen and (max-width: 991px) {
  .og-intro { --_headings---h3: 5em; --_headings---h1: 8em; --_headings---h6: 2em; --_headings---h2: 6.25em; --_headings---h5: 2.5em; --_headings---h4: 3.875em; --_text-classes---regular: .875rem; --_text-classes---medium: 1rem; --_text-classes---large: 1.125rem; --_text-classes---tiny: .75rem; --_text-classes---huge: 1.5em; --_text-classes---small: .75rem; }
  .og-intro .og-container-large { max-width: none; }
  .og-intro .og-text-size-small { font-size: .875rem; }
  .og-intro .og-grid { grid-template-columns: 1fr 1fr;
    min-height: 0; }
  .og-intro .og-grid__img { min-height: 27rem;
    padding-top: 0%; }
  .og-intro .og-works-section { min-height: 100vh; }
}
@media screen and (max-width: 767px) {
  .og-intro { --_headings---h3: 5em; --_headings---h1: 8em; --_headings---h6: 2em; --_headings---h2: 6.25em; --_headings---h5: 2.5em; --_headings---h4: 3.875em; }
  .og-intro .og-padding-global { padding-left: 1.25rem;
    padding-right: 1.25rem; }
  .og-intro .og-credits-wrapper { flex-flow: wrap; }
  .og-intro .og-gap_1em { flex-flow: wrap;
    justify-content: flex-start;
    align-items: center; }
  .og-intro .og-grid__img { padding-top: 100%; }
}
@media screen and (max-width: 479px) {
  .og-intro { --_headings---h3: 5em; --_headings---h1: 8em; --_headings---h6: 2em; --_headings---h2: 6.25em; --_headings---h5: 2.5em; --_headings---h4: 3.875em; }
  .og-intro .og-page-wrapper { overflow: hidden; }
  .og-intro .og-credits-wrapper { grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
    order: 1;
    justify-content: center;
    align-items: center; }
  .og-intro .og-gap_1em { justify-content: center;
    align-items: center; }
  .og-intro .og-grid__img { min-height: 25svh; }
}
/* og-intro: the donor painted this ground on <body>; the block needs it itself. */
.og-intro { background-color: #0f0f0f; }
/* ---- og-intro: hand-written, from tools/blocks/og-intro.css ---- */
/* og-intro — what the cut cannot carry, and the two layers it has to be staged in.

   Nothing here re-times, re-eases or re-shapes a donor animation. Every number
   below is either offgrid's or rototo's own, copied from the rule it came from
   and named, or it is staging: where the overlay sits, what it sits on top of,
   and when it is allowed to appear at all.

   ------------------------------------------------------ 1. offgrid's <body>

   A cut section never brings <body> rules with it, and offgrid put a good deal
   on its own. Verbatim from
   tools/templates/offgrid/css/offgridtemplate.app.shared.75636b1ed.css:

     body { background-color: var(--_color-palette---background-color--primary);
            font-family: var(--_fonts---satoshi);
            color: var(--_color-palette---font-color--primary);
            font-size: .9vw;
            line-height: 1.5;
            font-weight: var(--_text-weights---regular); }

   (the background is what `donor.ground` already paints on `.og-intro`.) The
   `font-size` matters more than it looks: offgrid sizes in `vw` on <body> and
   then in `em` everywhere else — `.max-width_hero` is `max-width: 51em`,
   `.padding-global` is `3em`, `.home-hero` gaps at `2.5em` — so without it the
   whole hero would be laid out against this site's own 14px root instead of
   offgrid's 0.9vw. offgrid re-declares that one number at each of its three
   breakpoints; tools/donor-lib.mjs carries the custom properties out of those
   `body` blocks onto the scope root but not the `font-size`, so the three
   values are restated here as well. */
.og-intro {
  font-family: var(--_fonts---satoshi);
  color: var(--_color-palette---font-color--primary);
  font-size: .9vw;
  line-height: 1.5;
  font-weight: var(--_text-weights---regular);
}
@media screen and (max-width: 991px) { .og-intro { font-size: 1.8svw; } }
@media screen and (max-width: 767px) { .og-intro { font-size: 2svw; } }
@media screen and (max-width: 479px) { .og-intro { font-size: 2svw; } }

/* ------------------------------------- 2. offgrid's own <style> in its <head>

   tools/donor-lib.mjs reads a donor's css/ directory, so the `<style>` block
   offgrid writes into its own `<head>` is invisible to it. One rule in there is
   load-bearing for the mosaic: without `transform-style: preserve-3d` the
   tiles' `rotateY(45deg)` flattens to a horizontal squash instead of turning.
   Verbatim from offgrid/index.html:

     @media (min-width: 992px) {
       [data-works-grid] .grid__img { will-change: transform, opacity;
                                      transform-style: preserve-3d; }
     }

   The rest of that block is not restated, and here is why for each part. Its
   `@media (max-width: 991px)` half is written for offgrid's own *scrolling*
   page — `body { -webkit-overflow-scrolling: touch }`, a `translateZ(0)` on
   `<body>`, and a `transition: opacity .3s, transform .3s` on the tiles for the
   per-image scroll reveal offgrid runs below 992px. This overlay does not
   scroll and does not run that reveal (see the header of og-intro.mjs), and
   that transition would smear the tween that does run. Its `.pin-spacer` and
   `.hero-section` `pointer-events: auto !important` rules exist for the
   ScrollTrigger pin, which is likewise not here; the overlay deliberately takes
   no pointer events inside itself at all. */
@media (min-width: 992px) {
  .og-intro [data-works-grid] .og-grid__img {
    will-change: transform, opacity;
    transform-style: preserve-3d;
  }
}

/* ------------------------------------- 3. one word became two, and it wrapped

   `.text-spam` is the box whose width the bracket animation grows, and it is
   `display: block; overflow: hidden` so the word inside is revealed a letter at
   a time. offgrid's word is `OFF`: three letters with nowhere to break, so at
   6px wide it is simply clipped. `STARGO OS` has a space in it, and measured at
   1440 the span spent the first second of its growth two lines tall — `STARGO`
   over `OS`, both of them out the bottom of the h1 — because a narrow block
   wraps at the first break opportunity it has.

   This is the one thing in the file the README's "type drawn for one English
   word that now has to hold a longer name" clause covers: `nowrap` changes
   nothing about how offgrid's own headline draws (a single word never wrapped)
   and nothing about the animation — the same width, over the same 1200ms, on
   the same curve. It only stops our two words from breaking apart inside a box
   that is meant to be clipping them. */
.og-intro .og-text-spam { white-space: nowrap; }

/* ---------------------------------------------------------- 3. the overlay

   The intro is drawn over the finished homepage and then removed. It has to be
   opaque from the very first paint — otherwise the page it is introducing
   flashes past underneath — so it is painted by this stylesheet, in the
   document's <head>, and not by script.

   Two gates decide whether it is ever shown, and both of them are settled
   before the first frame:

     - `html.w-mod-js`. The class Webflow's own head snippet writes on every
       page of this site, synchronously, before anything renders. With no
       JavaScript there is nothing to play the intro and nothing to take it
       away, so the overlay must not appear at all. rototo guards its own
       loader with the same class (`html.w-mod-js:not(.w-mod-ix3) :is(…,
       .page-loader-column, …) { visibility: hidden !important }` in its head).
     - `prefers-reduced-motion`. A reader who has asked their system for less
       motion goes straight to the homepage: the overlay is never displayed, and
       tools/blocks/og-intro.js takes the node out of the document as well. The
       same line js/stargo-pricing.js, js/stargo-media.js and
       tools/blocks/cn-produce.js already take. */
.og-intro { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .og-intro { display: block; }
}

.og-intro {
  position: fixed;
  inset: 0;
  /* rototo's own number for a full-screen loader (`.page-loader`), and above
     every z-index this site's pages use: the tallest in Mono's stylesheet is
     9999 (2147483647 belongs to the Webflow badge, which is display:none). */
  z-index: 99999;
  overflow: hidden;
  /* The overlay itself takes the pointer, so nothing underneath can be clicked
     blind while it plays; nothing inside it does (see .og-page-wrapper below),
     so the donor's tile-hover interaction never fires and the reader never
     hovers a photograph they cannot click. */
}

/* A ceiling, in CSS so that it holds however the JavaScript goes: fifteen
   seconds after the page starts painting, the overlay stops covering it and
   stops taking the pointer, whatever else has happened. That is more than twice
   the 6.9s the sequence takes, and tools/blocks/og-intro.js will not start a
   sequence that could not finish under it.

   `opacity`, not `visibility`. Measured with the script blocked: a keyframe of
   `to { visibility: hidden }` did release the pointer at fifteen seconds but
   the overlay was still on screen — `visibility` only takes its end value at a
   progress of exactly 1, and Chrome kept reporting `visible` on the filled
   animation. `opacity: 0` leaves nothing to argue about. */
@keyframes og-intro-ceiling { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.og-intro { animation: og-intro-ceiling .001s linear 15s forwards; }

/* The two donor sections are stacked, not scrolled.

   In offgrid they are consecutive full-height blocks of one long page: you read
   the headline, you scroll, the mosaic pins. An intro has no scroll, so they
   occupy the same box and the sequence moves between them — which is the one
   compositional decision in this block. Both keep their own geometry: the hero
   is still `min-height: 100svh` centred both ways, the grid is still nine
   columns at `min-height: 99vh` (two columns below 992px, as offgrid draws it).

   `.og-works-section` is given a z-index above `.og-hero-section`'s 10, which is
   the only donor value in this file that is not reproduced as written. In
   offgrid the two never overlap, so 10 and 2 only order them against that
   page's own chrome; here they share a box and the mosaic is what the sequence
   brings forward — it covers the headline as it settles, so no fade or exit has
   to be invented for the headline to leave. */
.og-intro .og-page-wrapper { position: absolute; inset: 0; pointer-events: none; }
.og-intro .og-hero-section { position: absolute; inset: 0; }
.og-intro .og-works-section { position: absolute; inset: 0; z-index: 20; }

/* --------------------------------------------------- 4. rototo's page loader

   Forty-eight full-height columns that lift off the top of the screen one after
   another, which is the third thing the owner asked for. rototo is a second
   donor and a block module cuts from one, so the markup is rebuilt in
   og-intro.mjs and its two rules are copied here. Verbatim from
   tools/templates/rototo/css/rototo.app.shared.47861eb30.min.css, with rototo's
   own tokens resolved from its `:root` (`--sizes--zero: 0em`,
   `--_theme---black: black`) and its forty-eight literal `1fr` columns written
   as `repeat(48, 1fr)`, which computes to the same track list:

     .page-loader { z-index: 99999; grid-column-gap: var(--sizes--zero);
                    grid-row-gap: var(--sizes--zero); pointer-events: none;
                    grid-template-rows: auto;
                    grid-template-columns: 1fr … (48 of them);
                    grid-auto-columns: 1fr; width: 100%; height: 100vh;
                    display: grid; position: fixed; inset: 0% }
     .page-loader-column { background-color: var(--_theme---black);
                           width: 100%; height: 100% }

   The columns rest at `translateY(-100%)` — clear of the top of the screen,
   which is where rototo's own loader ends up and where the owner's screenshot
   catches them on their way. Resting there is also what keeps them from
   covering the headline before their turn. */
.og-intro .og-intro-wipe {
  z-index: 99999;
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  pointer-events: none;
  grid-template-rows: auto;
  grid-template-columns: repeat(48, 1fr);
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100vh;
  display: grid;
  position: fixed;
  inset: 0%;
}
.og-intro .og-intro-column {
  background-color: black;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
}