/* Studio Rage — Vivid Motion-inspired refinement
   Primary type: Helvetica Neue. Editorial accent: PP Editorial New.
   Service labels: Oxygen Mono. No external font requests are made. */

@font-face { font-family: "Helvetica Neue"; src: local("Helvetica Neue"), local("HelveticaNeue"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: local("PP Editorial New"), local("PPEditorialNew-Regular"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Editorial New"; src: local("PP Editorial New Italic"), local("PPEditorialNew-Italic"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Oxygen Mono"; src: local("Oxygen Mono"), local("OxygenMono-Regular"); font-style: normal; font-weight: 400; font-display: swap; }

:root {
    --black: #050505;
    --black-soft: #0a0a0a;
    --white-soft: #f2f1ed;
    --blue: #0066ff;
    --blue-dark: #001d52;
    --blue-light: #78aaff;
    --red: var(--blue);
    --red-dark: var(--blue-dark);
    --red-light: var(--blue-light);
    --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-editorial: "PP Editorial New", "Times New Roman", serif;
    --font-mono: "Oxygen Mono", "SFMono-Regular", Consolas, monospace;
    --page-gutter: clamp(1.25rem, 4vw, 5rem);
    --header-height: 5rem;
    --radius: 1rem;
}

html { background: var(--black); }
body { position: relative; font-family: var(--font-body); font-weight: 400; line-height: 1.55; }
main, .site-footer { position: relative; z-index: 2; }
.site-header, .menu-panel { z-index: 900; }
.menu-panel { z-index: 1000; }
.pointer-fire { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 1; }
.pointer-fire--fallback { background: radial-gradient(circle 22rem at var(--pointer-x,65vw) var(--pointer-y,32vh), rgba(0,102,255,.24), rgba(0,29,82,.10) 42%, transparent 72%); filter: blur(24px); }

.eyebrow, .desktop-nav, .hero__services, .project-card__meta, .service-chapter ul, .workflow-tabs, .footer-grid h3, .footer-bottom, .hero-reel__label { font-family: var(--font-mono); }
.eyebrow { margin-bottom: 1.25rem; font-size: clamp(.66rem, .75vw, .78rem); line-height: 1.4; letter-spacing: .11em; }
.display { font-family: var(--font-display); font-size: clamp(3.25rem, 6.45vw, 7.4rem); font-weight: 400; line-height: 1.01; letter-spacing: -.055em; }
.section-title { max-width: 17ch; font-family: var(--font-display); font-size: clamp(2.55rem, 4.8vw, 5.8rem); font-weight: 400; line-height: 1.025; letter-spacing: -.045em; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.5; }
.section { padding-block: clamp(6.5rem, 10vw, 10rem); }
.section-head { gap: clamp(2rem, 5vw, 6rem); }

.button { min-height: 3rem; padding: .78rem 1.25rem; border-color: var(--red); border-radius: 999px; background: var(--red); color: var(--white); font-weight: 500; line-height: 1; }
.button:hover { border-color: var(--red); background: var(--red); color: var(--white); transform: translateY(-2px); }
.button--primary, .workflow-tab[aria-selected="true"] { border-color: var(--red); background: var(--red); color: var(--white); }
.button--primary:hover, .workflow-tab[aria-selected="true"]:hover { border-color: var(--red-light); background: var(--red-light); }
.text-link { font-weight: 500; }
.text-link::after { color: var(--red-light); }

/* Exact supplied loader, isolated from the website CSS inside its own iframe. */
body.is-loader-active { overflow: hidden; }
.intro-loader { position: fixed; z-index: 2200; inset: 0; overflow: hidden; background: #000; }
.intro-loader[hidden] { display: none; }
.intro-loader__frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }

/* Header */
.site-header { height: var(--header-height); padding-inline: var(--page-gutter); mix-blend-mode: normal; background: linear-gradient(to bottom, rgba(5,5,5,.74), transparent); }
.wordmark { font-size: clamp(1.15rem, 1.5vw, 1.55rem); font-weight: 500; letter-spacing: -.035em; }
.desktop-nav a { font-size: .73rem; letter-spacing: .045em; text-transform: uppercase; }
.site-header > .button { min-height: 2.55rem; background: var(--red); border-color: var(--red); }
.site-header > .button:hover { background: var(--red); border-color: var(--red); }
.menu-panel { background: var(--red); }
.menu-panel nav a { font-weight: 400; line-height: 1.03; }

/* Hero with client marquee and showreel */
.hero { min-height: 158svh; display: block; padding: calc(var(--header-height) + clamp(3rem,7vw,7rem)) var(--page-gutter) 0; overflow: clip; background: #050505; }
.hero::before { display: none; }
.hero__media { opacity: .22; }
.hero__media::after { background: linear-gradient(180deg, rgba(5,5,5,.22), rgba(5,5,5,.74) 62%, #050505 95%); }
.hero__media img { opacity: .38; filter: blur(8px) saturate(.6); transform: translate3d(0,var(--hero-media-y,0),0) scale(var(--hero-media-scale,1.12)); }
.hero__content { position: relative; z-index: 2; min-height: calc(100svh - var(--header-height) - 7rem); display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(4rem,7vw,7rem); }
.hero__eyebrow { margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.hero__title { max-width: 13.7ch; }
.hero__line-mask { display: block; overflow: clip; padding-block: .06em .12em; margin-block: -.06em -.12em; }
.hero__line { font-weight: 400; }
.hero__description { grid-template-columns: minmax(0,.8fr) minmax(18rem,.48fr); gap: clamp(2rem, 8vw, 10rem); margin-top: clamp(2rem,4vw,4rem); }
.hero__description .lead { max-width: 48ch; color: rgba(255,255,255,.76); }
.hero__services { align-self: end; max-width: 34rem; color: rgba(255,255,255,.62); font-size: .7rem; line-height: 1.7; }
.hero__actions { margin-top: 1.6rem; }
.client-marquee { position: relative; z-index: 3; margin-inline: calc(var(--page-gutter) * -1); overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(5,5,5,.88); }
.client-marquee__track { display: flex; width: max-content; animation: client-marquee 28s linear infinite; will-change: transform; }
.client-marquee__group { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(3.5rem,7vw,8.5rem); padding: 1.35rem clamp(1.75rem,4vw,5rem); }
.client-marquee__item { width: clamp(7rem,10vw,10.5rem); height: clamp(2rem,3vw,3.15rem); display: flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.client-marquee__item img { width: 100%; height: 100%; object-fit: contain; opacity: .78; filter: grayscale(1) brightness(0) invert(1); transition: opacity .25s ease; }
.client-marquee__item:hover img { opacity: 1; }
@keyframes client-marquee { to { transform: translate3d(-50%,0,0); } }

/* Featured work: larger padding, restrained titles, clean overlays. */
.featured__intro { padding-top: clamp(7rem,11vw,11rem); }
.featured-stage { min-height: 305vh; }
.featured-project { grid-template-columns: minmax(19rem,.43fr) minmax(0,1fr); gap: clamp(2rem,5vw,5.5rem); padding: calc(var(--header-height) + 2rem) var(--page-gutter) clamp(3rem,5vw,5rem); }
.featured-project__copy { padding-right: clamp(.5rem,2vw,2rem); }
.featured-project__copy h3 { max-width: 8ch; margin-bottom: 1.6rem; font-size: clamp(3rem, 5.55vw, 6.4rem); font-weight: 400; line-height: .96; letter-spacing: -.055em; }
.featured-project__copy > p:not(.eyebrow) { max-width: 30rem; line-height: 1.55; }
.project-card__meta { flex-wrap: wrap; margin: 1.4rem 0 1.8rem; font-size: .66rem; line-height: 1.4; }
.project-see-more { margin-top: .2rem; }
.featured-project__media { border-radius: clamp(.75rem,1.4vw,1.4rem); box-shadow: none; }
.featured-project__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.76)); pointer-events: none; }
.featured-project__media img { aspect-ratio: 16/10; }
.featured-project__overlay { position: absolute; z-index: 2; left: clamp(1.25rem,2.7vw,2.75rem); right: clamp(1.25rem,2.7vw,2.75rem); bottom: clamp(1.25rem,2.7vw,2.5rem); display: grid; gap: .25rem; text-align: left; }
.featured-project__overlay { transition: opacity .18s ease; }
.featured-project:not(.is-active) .featured-project__overlay { opacity: 0; }
.featured-project__overlay strong { font-size: clamp(1.6rem,2.8vw,3.35rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.featured-project__overlay small { font-family: var(--font-mono); color: rgba(255,255,255,.72); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.featured-progress i, .services-progress i { background: linear-gradient(90deg,var(--red) var(--progress,0%),var(--border) var(--progress,0%)); }

/* Website portfolio remains in its original position but uses the dark Vivid Motion layout. */
.websites { background: #090909; color: var(--white); border-top: 1px solid var(--border); }
.website-stage__sticky { padding-inline: var(--page-gutter); }
.website-project { grid-template-columns: minmax(18rem,.36fr) minmax(0,1fr); }
.website-project__copy h3 { font-size: clamp(2.8rem,4.7vw,5.5rem); font-weight: 400; line-height: .98; }
.website-project__copy > p { color: rgba(255,255,255,.7); }
.website-project__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.8rem; }
.browser-frame { border-color: rgba(255,255,255,.16); border-radius: 1.25rem; box-shadow: none; }
.browser-frame__bar { background: #191919; }
.browser-frame__bar i { background: #656565; }
.website-progress span { background: rgba(255,255,255,.18); }
.website-progress span.is-active { background: var(--red); }

/* Studio positioning and service chapters */
.positioning { border-top: 1px solid var(--border); }
.positioning__sequence { gap: .7rem; font-size: clamp(1.25rem,2.35vw,2.4rem); font-weight: 400; }
.services-sequence__intro { border-top: 1px solid var(--border); }
.services-sticky { border-top-color: var(--border); }
.services-visual { display: none; }
.service-chapter { grid-template-columns: minmax(4rem,.12fr) minmax(0,.8fr) minmax(19rem,.55fr); padding-inline: var(--page-gutter); }
.service__number { align-self: center; color: rgba(255,255,255,.18); font-family: var(--font-display); font-size: clamp(3rem,6vw,7rem); font-weight: 300; letter-spacing: -.05em; }
.service-chapter h3 { max-width: 13ch; font-size: clamp(3rem,5.35vw,6.35rem); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.service-chapter ul { columns: 1; padding-left: 0; font-size: .73rem; line-height: 1.85; letter-spacing: .035em; text-transform: uppercase; }
.service-chapter li { padding-block: .4rem; border-bottom: 1px solid rgba(255,255,255,.08); }

/* Process and content sections */
.process { background: #0a0a0a; color: var(--white); border-block: 1px solid var(--border); }
.process-list { border-top-color: var(--border); }
.process-step { border-bottom-color: var(--border); }
.process-step h3 { font-size: clamp(2rem,4vw,4.6rem); font-weight: 400; }
.process-step span:last-child { color: var(--red-light); }
.ai-shell { background: rgba(10,10,10,.92); }
.workflow-tab[aria-selected="true"] { background: var(--red); }
.services-visual__core, .footer-cta span { background: none; color: inherit; }
.cgi-media img, .about-grid img { border-radius: 1.2rem; }

/* Contact and ending wordmark */
.contact { background: #050505; color: var(--white); border-top: 1px solid var(--border); }
.contact-grid { grid-template-columns: minmax(0,.75fr) minmax(24rem,1fr); align-items: start; }
.contact .section-title { max-width: 11ch; }
.contact-grid > div > p:not(.eyebrow) { max-width: 34rem; color: rgba(255,255,255,.6); }
.field label { font-family: var(--font-mono); color: rgba(255,255,255,.7); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.field input, .field select, .field textarea { border-bottom-color: rgba(255,255,255,.3); color: var(--white); }
.field select option { color: #000; }
.consent { color: rgba(255,255,255,.7); }
.site-footer { padding-top: clamp(7rem,11vw,11rem); overflow: hidden; border-top: 1px solid var(--border); }
.footer-cta { max-width: 15ch; font-family: var(--font-display); font-size: clamp(3rem,6.4vw,7.2rem); font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.footer-cta__serif { font-family: var(--font-editorial); font-style: italic; font-weight: 400; }
.footer-grid { margin-top: clamp(5rem,8vw,8rem); }
.footer-wordmark { margin-top: clamp(5rem,9vw,9rem); margin-bottom: clamp(-1.2rem,-2vw,-.4rem); font-size: clamp(4.2rem,14.7vw,13rem); font-weight: 400; line-height: .72; letter-spacing: -.075em; white-space: nowrap; }

/* Project page */
.project-page { background: #050505; }
.project-page .site-header { position: fixed; }
.project-hero { min-height: 92svh; display: grid; align-content: end; padding: calc(var(--header-height) + 4rem) var(--page-gutter) clamp(4rem,7vw,7rem); }
.project-hero h1 { max-width: 11ch; margin: 0; font-size: clamp(3.5rem,8vw,8.8rem); font-weight: 400; line-height: .96; letter-spacing: -.06em; }
.project-hero__intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.42fr); gap: clamp(2rem,7vw,8rem); align-items: end; margin-top: clamp(2.5rem,5vw,5rem); }
.project-hero__meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; margin: 0; }
.project-hero__meta div { padding-top: .8rem; border-top: 1px solid var(--border); }
.project-hero__meta dt { font-family: var(--font-mono); color: var(--text-muted); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.project-hero__meta dd { margin: .35rem 0 0; }
.project-cover { overflow: hidden; margin-inline: var(--page-gutter); border-radius: 1.35rem; }
.project-cover img, .project-cover video { width: 100%; height: min(70vw,82svh); object-fit: cover; }
.project-statement { display: grid; grid-template-columns: .35fr 1fr; gap: clamp(2rem,7vw,8rem); padding: clamp(7rem,11vw,12rem) var(--page-gutter); }
.project-statement h2 { max-width: 15ch; margin: 0; font-size: clamp(2.6rem,5.2vw,6rem); font-weight: 400; line-height: 1; letter-spacing: -.05em; }
.project-gallery { display: grid; gap: var(--page-gutter); padding-inline: var(--page-gutter); }
.project-gallery__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--page-gutter); }
.project-gallery figure { overflow: hidden; border-radius: 1.2rem; background: #111; }
.project-gallery img, .project-gallery video { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; }
.project-gallery figcaption { padding: .8rem 0 0; color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; }
.project-next { margin-top: clamp(8rem,12vw,13rem); padding: clamp(5rem,8vw,8rem) var(--page-gutter); border-top: 1px solid var(--border); }
.project-next a { display: block; }
.project-next span { font-family: var(--font-mono); color: var(--text-muted); font-size: .68rem; text-transform: uppercase; }
.project-next strong { display: block; margin-top: 1rem; font-size: clamp(3rem,7vw,8rem); font-weight: 400; line-height: .95; letter-spacing: -.06em; }

@media (max-width: 900px) {
    :root { --header-height: 4.5rem; }
    .site-header { background: rgba(5,5,5,.82); backdrop-filter: blur(12px); }
    .hero { min-height: auto; padding-top: calc(var(--header-height) + 3rem); }
    .hero__content { min-height: 82svh; justify-content: flex-end; }
    .display { font-size: clamp(3rem, 10.5vw, 5.5rem); line-height: 1.015; }
    .hero__title { max-width: 13ch; }
    .hero__description { grid-template-columns: 1fr; }
    .hero__services { align-self: auto; max-width: 42rem; }
    .hero-reel video { height: 66svh; }
    .featured-project, .featured-project.is-active, .featured-project.is-next, .featured-project.is-previous { gap: 2rem; padding-top: 3rem; }
    .featured-project__copy { order: 1; padding: 0; }
    .featured-project__media { order: 2; }
    .featured-project__copy h3 { max-width: 12ch; font-size: clamp(2.8rem,10vw,5.3rem); line-height: .99; }
    .website-stage { min-height: auto; }
    .website-stage__sticky { position: relative; min-height: auto; padding-inline: 0; }
    .website-project, .website-project.is-active, .website-project.is-next, .website-project.is-previous { grid-area: auto; grid-template-columns: 1fr; padding: 4rem 0; opacity: 1 !important; transform: none !important; pointer-events: auto; }
    .website-progress { display: none; }
    .service-chapter, .service-chapter.is-active, .service-chapter.is-next, .service-chapter.is-previous { grid-template-columns: 4.25rem 1fr; }
    .service__number { font-size: 3.2rem; }
    .service-chapter ul { grid-column: 2; columns: 2; }
    .contact-grid, .project-hero__intro, .project-statement { grid-template-columns: 1fr; }
    .project-statement { gap: 3rem; }
    .footer-wordmark { font-size: clamp(4rem,17vw,8rem); }
}

@media (max-width: 600px) {
    .section-title { font-size: clamp(2.35rem, 11vw, 3.8rem); line-height: 1.04; }
    .display { font-size: clamp(2.85rem, 14vw, 4.6rem); line-height: 1.035; letter-spacing: -.05em; }
    .hero__line-mask { padding-block: .08em .18em; margin-block: -.08em -.18em; }
    .hero__description { margin-top: 2.2rem; }
    .hero-reel { margin-top: 2rem; }
    .hero-reel video { height: 58svh; }
    .featured-project, .featured-project.is-active, .featured-project.is-next, .featured-project.is-previous { padding-bottom: 6rem; }
    .featured-project__overlay strong { font-size: 1.7rem; }
    .service-chapter ul { columns: 1; }
    .project-hero { min-height: 82svh; }
    .project-hero h1 { font-size: clamp(3rem,14vw,5rem); line-height: 1; }
    .project-hero__meta, .project-gallery__row { grid-template-columns: 1fr; }
    .project-cover { margin-inline: 0; border-radius: 0; }
    .project-cover img, .project-cover video { height: 68svh; }
    .project-gallery { padding-inline: 0; gap: 1rem; }
    .project-gallery__row { gap: 1rem; }
    .project-gallery figure { border-radius: 0; }
    .project-gallery img, .project-gallery video { min-height: 21rem; }
    .client-marquee__track { animation-duration: 20s; }
}

@media (prefers-reduced-motion: reduce) {
    .client-marquee__track { animation: none; }
    .pointer-fire { display: none; }
}


/* V4 typography: all primary titles use PP Editorial New. */
.display,
.section-title,
.featured-project__copy h3,
.featured-project__overlay strong,
.website-project__copy h3,
.positioning__sequence,
.service-chapter h3,
.process-step h3,
.project-hero h1,
.project-statement h2,
.project-next strong,
.footer-cta,
.footer-wordmark {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
}

.display { line-height: .96; letter-spacing: -.045em; }
.section-title { line-height: .98; letter-spacing: -.04em; }
.featured-project__copy h3,
.website-project__copy h3,
.service-chapter h3,
.project-hero h1 { line-height: .94; letter-spacing: -.045em; }
.hero__line-mask,
.featured-project__title-mask,
.service-chapter__title-mask { padding-block: .10em .18em; margin-block: -.10em -.18em; }

@media (max-width: 600px) {
    .display { line-height: .99; }
    .section-title { line-height: 1; }
}


/* V7 — minimal black / white palette with a restrained #0066ff accent. */
body {
    background:
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.035), transparent 34rem),
        var(--black);
}

main,
.site-footer {
    position: relative;
    z-index: 2;
}

.pointer-fire {
    z-index: 0;
    opacity: .9;
    mix-blend-mode: screen;
    transform: translateZ(0);
    will-change: contents;
}

.pointer-fire--fallback {
    background:
        radial-gradient(circle 22rem at var(--pointer-x,65vw) var(--pointer-y,32vh), rgba(0,102,255,.20), rgba(0,29,82,.08) 42%, transparent 72%),
        radial-gradient(circle 8rem at var(--pointer-x,65vw) var(--pointer-y,32vh), rgba(255,255,255,.08), rgba(255,228,218,.035) 48%, transparent 76%);
    filter: blur(24px);
}
.pointer-fire--css-fallback {
    background:
        radial-gradient(ellipse 22rem 11rem at var(--pointer-x,65vw) var(--pointer-y,32vh), rgba(0,102,255,.20), rgba(0,42,112,.08) 46%, transparent 76%),
        radial-gradient(ellipse 10rem 4.8rem at var(--pointer-x,65vw) var(--pointer-y,32vh), rgba(255,255,255,.10), rgba(255,230,220,.05) 48%, transparent 78%),
        radial-gradient(ellipse 15rem 7rem at var(--pointer-x,65vw) var(--pointer-y,32vh), rgba(120,170,255,.12), transparent 74%);
    filter: blur(24px) saturate(1.05);
}

/* The color flow remains behind the content and only shows through dark,
   slightly translucent section surfaces. */
.hero { background: rgba(5,5,5,.34); }
.websites { background: rgba(9,9,9,.82); }
.process { background: rgba(10,10,10,.84); }
.contact { background: rgba(5,5,5,.76); }
.ai-shell { background: radial-gradient(circle at 50% 48%, rgba(0,102,255,.10), transparent 34%), rgba(10,10,10,.88); }
.site-footer { background: rgba(5,5,5,.62); }

::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline-color: var(--blue-light); }

/* Most interface actions stay monochrome. Blue appears on interaction,
   progress and system feedback instead of filling every component. */
.button {
    border-color: rgba(255,255,255,.62);
    background: transparent;
    color: var(--white);
}
.button:hover {
    border-color: var(--blue);
    background: rgba(0,102,255,.10);
    color: var(--white);
}
.button--primary,
.site-header > .button {
    border-color: var(--white);
    background: var(--white);
    color: var(--black);
}
.button--primary:hover,
.site-header > .button:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
}
.text-link::after { color: var(--blue-light); }

.site-header {
    background: linear-gradient(to bottom, rgba(5,5,5,.88), rgba(5,5,5,.22) 72%, transparent);
}
.menu-panel {
    overflow: hidden;
    background: #050505;
}
.menu-panel::before {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: radial-gradient(circle at 72% 18%, rgba(0,102,255,.20), transparent 34%);
}
.menu-panel > * { position: relative; z-index: 1; }

.featured-progress i,
.services-progress i {
    background: linear-gradient(90deg, var(--blue) var(--progress,0%), var(--border) var(--progress,0%));
}
.website-progress span.is-active,
.positioning__sequence span:not(:last-child)::after,
.process-step span:last-child,
.cgi-flow span:not(:last-child)::after {
    color: var(--blue-light);
}
.website-progress span.is-active { background: var(--blue); }
.service__number { color: rgba(255,255,255,.18); }

.workflow-tab[aria-selected="true"] {
    border-color: var(--white);
    background: var(--white);
    color: var(--black);
}
.workflow-tab[aria-selected="true"]:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
}

.ai-node.is-active {
    border-color: var(--blue-light);
    box-shadow: 0 0 2.25rem rgba(0,102,255,.22);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--blue-light); }
.form-status { color: var(--blue-light); }
.project-modal__progress { background: var(--blue); }

@media (max-width: 900px) {
    .site-header { background: rgba(5,5,5,.9); }
}