/* Generated by tools/build-tokens.sh from design-system/tokens/. Do not edit; re-import and rebuild. */

/* ---- design-system/tokens/fonts.css ---- */
/* Anton and Chivo, both open (SIL OFL) via Google Fonts. Paid stand-in for Anton if licensed later: Founders Grotesk Condensed. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Chivo:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap");

/* ---- design-system/tokens/colors.css ---- */
/* The palette is the eight fills the wordmark ships in. Nothing else. */
:root{
--vch-ivory:#EFECE6;--vch-soft-white:#F6F5F2;--vch-near-black:#202020;--vch-warm-grey:#6C6964;--vch-stone:#DBD8CF;
--vch-pale-blue:#B8D2D8;--vch-muted-teal:#80A7AF;--vch-burnt-orange:#C35421;
/* semantic */
--ground:var(--vch-ivory);--ground-shift:var(--vch-stone);--surface:var(--vch-soft-white);
--ink:var(--vch-near-black);--muted:var(--vch-warm-grey);--rule:var(--vch-stone);
--house:var(--vch-pale-blue);/* the house colour: nav button, still tint, link hover */
--section:var(--ink);/* the square. Reassigned per page below */
--scrim:rgba(32,32,32,.4);/* over hero film, bottom 40% */
--error:#A83A1E;
--link:var(--ink);--link-hover:var(--vch-muted-teal);
--film-ink:var(--vch-ivory);/* chrome over footage */
}
/* --section-ink is the text colour on a section-coloured ground. Orange and ink take ivory; blue and teal take ink. */
:root{--section-ink:var(--vch-ivory)}
[data-section="founders"]{--section:var(--ink);--section-ink:var(--vch-ivory)}
[data-section="studios"]{--section:var(--vch-pale-blue);--section-ink:var(--ink)}
[data-section="creative"]{--section:var(--vch-burnt-orange);--section-ink:var(--vch-ivory)}
[data-section="solutions"]{--section:var(--vch-muted-teal);--section-ink:var(--ink)}

/* ---- design-system/tokens/typography.css ---- */
:root{
--font-display:"Anton",Impact,"Arial Narrow",sans-serif;
--font-body:"Chivo",Helvetica,Arial,sans-serif;
/* display: uppercase always */
--text-wall:clamp(72px,14vw,220px);--lh-wall:.9;/* @kind other */--ls-wall:-.02em;/* @kind other */
--text-display-1:clamp(40px,7vw,96px);--lh-display:.96;/* @kind other */--ls-display:-.01em;/* @kind other */
--text-display-2:clamp(28px,4vw,48px);
--text-answer:clamp(24px,7.5vw,32px);--ls-answer:-.03em;/* @kind other *//* the five answers on a phone; desktop uses display-2 */
/* body */
--text-body:17px;--lh-body:1.62;/* @kind other */--weight-body:300;/* @kind other */--weight-bold:700;/* @kind other */--measure:68ch;/* @kind other */
--text-small:14px;--text-question:18px;
/* label: eyebrows, buttons, captions, nav, steps, timecodes, tokens. There is no mono face. */
--text-label:11px;--lh-label:1.4;/* @kind other */--ls-label:.08em;/* @kind other */--weight-label:400;/* @kind other */
}

/* ---- design-system/tokens/spacing.css ---- */
:root{
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
--content:720px;--wide:1200px;--margin:4vw;--gutter:24px;
--section-gap:128px;--section-gap-mobile:80px;
--nav-h:64px;--field-h:44px;--portrait:120px;--play:44px;--avatar:32px;
--radius:0;/* @kind radius */--shadow:none;/* @kind shadow */
--line:1px;--underline-toggle:2px;--focus:2px;--focus-offset:3px;
}

/* ---- design-system/tokens/motion.css ---- */
/* Two speeds. Film cuts at 0. Type dissolves at 800 or slower. The only thing between is the 400ms nav return and underline slide. Nothing loops but the hero film. */
:root{
--t-cut:0ms;/* @kind other */--t-ui:400ms;/* @kind other */--t-reveal:600ms;/* @kind other */--t-dissolve:800ms;/* @kind other */--t-ground:800ms;/* @kind other */--t-hold:400ms;/* @kind other */
--ease-out:cubic-bezier(.2,.7,.2,1);/* @kind other */--ease-in-out:cubic-bezier(.6,0,.2,1);/* @kind other */
--reveal-rise:16px;/* @kind other */--answer-rise:14px;/* @kind other */--hero-scale-from:1.6;/* @kind other */
--track-answers:400vh;/* @kind other */--track-scale:260vh;/* @kind other */--reveal-at:25%;/* @kind other */
--grain-opacity:.03;/* @kind other */--generated-grain:.45;/* @kind other */--generated-filter:saturate(.6) brightness(.85);/* @kind other */
--hover-brighten:1.1;/* @kind other */--hover-ink:.85;/* @kind other */--nav-over-film:.2;/* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--t-ui:0ms;/* @kind other */--t-reveal:0ms;/* @kind other */--t-dissolve:0ms;/* @kind other */--t-ground:0ms;/* @kind other */--reveal-rise:0px;/* @kind other */--answer-rise:0px;/* @kind other */--hero-scale-from:1;/* @kind other */}}

/* ---- design-system/tokens/base.css ---- */
/* Minimal base. Consumers may drop this file. */
:root{color-scheme:light}
.vch-body,body.vch{background:var(--ground);color:var(--ink);font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
.vch-grain{position:relative}
.vch-grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
.vch-display{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:var(--ls-display);text-wrap:balance}
.vch-wall{font-size:var(--text-wall);line-height:var(--lh-wall);letter-spacing:var(--ls-wall)}
.vch-d1{font-size:var(--text-display-1)}.vch-d2{font-size:var(--text-display-2)}
.vch-label{font-family:var(--font-body);font-weight:var(--weight-label);font-size:var(--text-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.vch-square{display:inline-block;width:.16em;height:.16em;background:var(--section);vertical-align:baseline;margin-left:.06em}
a.vch-link{color:var(--link);text-decoration:underline;text-decoration-color:var(--muted);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--t-ui),text-decoration-color var(--t-ui)}
a.vch-link:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}
:where(.vch) :focus-visible{outline:var(--focus) solid var(--section,var(--ink));outline-offset:var(--focus-offset)}