/* Slush styling overlay. Supplied DOM, media, layout and animation engine are retained. */
@font-face {
  font-family: 'Slush Display';
  src: url('./assets/slush/BowlbyOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Slush UI';
  src: url('./assets/slush/Inter-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --color-carbon: #000000;
  --color-paper-white: #ffffff;
  --color-sky-wash: #dceeff;
  --color-concrete-gray: #cccccc;
  --color-soft-mist: #e9e9e9;
  --color-electric-blue: #4da2ff;
  --color-mint-pop: #55db9c;
  --color-lavender: #e9ccff;
  --color-ember: #fb4903;
  --color-sunburst: #ffd731;
  --color-voltage-violet: #5c4ade;
  color-scheme: light;
  scrollbar-color: var(--color-carbon) var(--color-sky-wash);
}
html body {
  background: var(--color-paper-white);
  color: var(--color-carbon);
  font-family: 'Slush UI', 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.5;
  font-feature-settings: 'ss01' on, 'tnum' on;
  caret-color: var(--color-carbon);
}
::selection { color: var(--color-carbon); background: var(--color-mint-pop); }
:is(a, button, input):focus-visible {
  outline: 3px solid var(--color-carbon);
  outline-offset: 5px;
}
.page__content .font-tan {
  font-family: 'Slush Display', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
}
.page__content :is(.h1, .h2, .h1-alt).font-tan {
  line-height: .8;
  text-transform: uppercase;
}
.page__content .h1.font-tan { font-size: clamp(42px, 5.5vw, 96px); }
.page__content .h2.font-tan { font-size: clamp(36px, 4vw, 72px); }
.page__content .h3.font-tan { font-size: clamp(32px, 3.2vw, 52px); line-height: 1.1; }
.page__content .h4.font-tan { font-size: clamp(28px, 3vw, 48px); line-height: 1.12; }
.page__content .h1-alt.font-tan { font-size: clamp(48px, 7vw, 126px); }
html body .h5 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; }
html body :is(.h6, .text-18) { font-size: 18px; line-height: 1.4; }
html body .h7 { font-size: 16px; line-height: 1.45; }
html body .text-26 { font-size: clamp(18px, 2vw, 26px); }
html body .text-white,
html body .text-red { color: var(--color-carbon); }
html body .bg-white { background-color: var(--color-paper-white); }
html body .bg-red { background-color: var(--color-carbon); }
html body .bg-black { background-color: var(--color-carbon); }
html body article.bg-black:has(> .page__content) { background-color: var(--color-paper-white); }
html body .js-m-mask { background-color: var(--color-sky-wash); }
html body .js-m-mask :is(.mm-link, .mm-services__label .font-tan) { font-family: 'Slush UI', sans-serif; font-weight: 700; }
html body [class*='border-white/10'] { border-color: var(--color-carbon); }
html body .mix-blend-difference { mix-blend-mode: normal; }
/* Navigation keeps its original positions and expandable menus. */
html body .sh__nav {
  background: var(--color-paper-white);
  border: 1px solid var(--color-carbon);
  border-top: 0;
  border-left: 0;
  border-bottom-right-radius: 24px;
}
.sh__nav :is(a, .sh__services-label) {
  background: var(--color-paper-white);
  color: var(--color-carbon) !important;
  border: 1px solid var(--color-carbon);
  border-radius: 9999px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  line-height: 1.25;
}
.sh__nav :is(a, .sh__services-label):hover { background: var(--color-lavender); }
.sh__sub { margin-top: 4px; }
html body .sh__services .sh__services-label { color: var(--color-carbon); }
html body .sh__box,
html body .burg { background: var(--color-paper-white); border-radius: 9999px; }
.sh__box { border: 1px solid var(--color-carbon); }
.sh__box canvas { filter: brightness(0); }
.js-i-logo-post-fade canvas { filter: brightness(0); }
html body .js-i-mask { background: var(--color-sky-wash); }
/* Primary black pills, secondary white pills; keep the original sliding masks. */
html body .btn { border: 1px solid var(--color-carbon); border-radius: 9999px; }
html body .btn-state,
html body .btn-state::before { border-radius: 9999px; }
html body .btn .btn-state > span {
  font-family: 'Slush UI', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .03em;
}
html body .btn-state.--1.bg-red,
html body .btn-state.--1.bg-red > span { color: var(--color-paper-white); }
html body .btn-state.--1.bg-transparent { background: var(--color-paper-white); }
html body .btn-state.--2 { background: var(--color-paper-white); color: var(--color-carbon); }
html body .btn-state.--2 > span { color: var(--color-carbon); }
.btn__icon canvas { filter: brightness(0); }
.btn-mask__mask { border-radius: 9999px; }
/* The inherited pinned hero gains a flat paper surface and a CSS-only ribbon. */
.page__content article.bg-black,
.home-hero { background-color: var(--color-sky-wash); }
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('./assets/slush/ribbon.svg') center / cover no-repeat;
  pointer-events: none;
}
.home-hero h1.font-tan {
  font-size: clamp(48px, 5.2vw, 92px);
  line-height: .8;
  text-transform: uppercase;
  color: var(--color-carbon);
}
.home-hero__spot { background-color: var(--color-sky-wash) !important; }
.home-hero h1 .js-i-flip,
.page__content .font-tan i { font-style: normal; }
.home-hero h2.h3 { font-family: 'Slush UI', sans-serif; font-weight: 700; font-size: clamp(26px, 2.5vw, 40px); line-height: 1.18; }
.home-hero video { border-radius: 30px; }
.home-hero .js-controls {
  background: var(--color-carbon);
  color: var(--color-paper-white);
  border: 1px solid var(--color-carbon);
  border-radius: 9999px;
  font-family: 'Slush UI', sans-serif;
  font-size: 16px;
}
/* Existing horizontal results strip and project grid become outlined stickers. */
.page__content > section:first-of-type .site-max > .border { border-radius: 24px; overflow: hidden; }
.page__content > section:first-of-type article { color: var(--color-carbon); background: var(--color-lavender); }
.page__content > section:first-of-type article:nth-child(3n + 2) { background: var(--color-mint-pop); }
.page__content > section:first-of-type article:nth-child(3n) { background: var(--color-electric-blue); }
.page__content > section:first-of-type article .h6 { max-width: 100%; }
html body .client-logo { background-color: var(--color-carbon); }
.page__content > div:has(> .site-max > h2.font-tan) { background-color: var(--color-paper-white); }
.page__content > div.site-max > div:has(> a.group) { padding: 1px; }
.page__content a.group .case-item__thumbnail > div { border: 1px solid var(--color-carbon); border-radius: 30px; }
.page__content a.group .case-item__thumbnail > div > div { border-radius: 30px; }
.page__content a.group > div:has(> h3) { color: var(--color-carbon); }
.page__content a.group:hover > div:has(> h3) { color: var(--color-carbon); }
/* Preserve service hover, orbit and draggable testimonial choreography. */
.page__content > span:has(> section) { background: var(--color-concrete-gray); }
.page__content > span > section { background: var(--color-concrete-gray); }
html body .circ { background: var(--color-sky-wash); }
html body .article__content { border-color: var(--color-carbon); border-radius: 40px; background: var(--color-lavender); color: var(--color-carbon); }
.article:nth-child(3n + 2) .article__content { background: var(--color-mint-pop); }
.article:nth-child(3n) .article__content { background: var(--color-paper-white); }
.article__content h3 { font-family: 'Slush UI', sans-serif; }
.article__content > img { filter: brightness(0); }
.page__content > section:has(.test-slide) { background: var(--color-electric-blue); }
html body .test-slide { border: 1px solid var(--color-carbon); border-radius: 30px; background: var(--color-lavender); color: var(--color-carbon); }
html body .test-slide:nth-child(3n + 2) { background: var(--color-mint-pop); }
html body .test-slide:nth-child(3n) { background: var(--color-paper-white); }
html body .sf { background: var(--color-concrete-gray); color: var(--color-carbon); }
.sf h2 { font-family: 'Slush UI', sans-serif !important; font-weight: 700; line-height: 1.2; }
.sf > div:has(> canvas) > canvas,
.sf > div > div:has(> canvas) > canvas { filter: invert(1); }
/* Original mobile menu remains touch/keyboard operated. */
html body [class*='mm-'] { color: var(--color-carbon); }
html body .mm-services__label { color: var(--color-carbon); }
html body .mm-link { font-family: 'Slush UI', sans-serif; font-weight: 700; }
html body div.bg-black:has(> nav) { background: var(--color-sky-wash); }
@media (max-width: 649px) {
  .home-hero h1.font-tan { font-size: clamp(33px, 9.1vw, 58px); line-height: .85; }
  .home-hero::before { background-size: auto 100%; background-position: 52% top; opacity: .7; }
  .home-hero h2.h3 { font-size: 28px; }
  .page__content .h1.font-tan { font-size: clamp(30px, 8vw, 48px); line-height: .85; }
  .page__content .h2.font-tan { font-size: 36px; }
  .page__content .h1-alt.font-tan { font-size: clamp(38px, 10vw, 62px); }
  .page__content > section:first-of-type article .h2 { font-size: 30px; }
  .page__content > section:first-of-type article .h6 { font-size: 16px; }
  html body .test-slide { border-radius: 24px; }
}