@font-face {
  font-family: 'Satoshi';
  src: url('../Assets/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

:root {
  --heading-pop: #3A39FF;     /* the eyebrow text (problem, research…): float's blue */
  --heading-quiet: #c4986b;   /* the big story headings: float's tan */

  --float-bg: #F9EAD6; /* alt: #FCE6CE */
}

body {
  background: var(--float-bg);
}

header {
  background: var(--float-bg);
}

.app-screens-row {
  display: flex;
  gap: var(--space-xl);
  padding-inline: 6%;
  padding-block: calc(var(--space-xl) * 3);
  justify-content: space-between;
}

.app-screens-row .screen-wrap {
  inline-size: auto;
  flex: 1;
  max-inline-size: 18%;
}

.screen-wrap {
  position: relative;
  inline-size: 20%;
  flex-shrink: 0;
}

.screen-wrap video {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.screen-mask {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 35%;
  block-size: 5%;
  background: #FEE7D0;
  border-radius: var(--radius) 0 0 0;
}

.case-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 75rem) 1fr;
  align-items: start;
}

.case-sidebar {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-xs));
  inset-inline-start: var(--space-lg);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.025rem;
}

.sidebar-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-lg);
  padding-inline-end: var(--space-md);
  background: var(--float-bg);
  max-inline-size: 12rem;
  position: relative;
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  opacity: 0;
  transition: max-block-size 0.35s ease, opacity 0.3s ease, padding-block 0.3s ease;
}

.sidebar-box::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: var(--space-sm);
  inset-block-end: var(--space-sm);
  inline-size: 2px;
  background: #3A39FF;
  pointer-events: none;
}

.case-sidebar.open .sidebar-box {
  max-block-size: 20rem;
  padding-block: var(--space-sm);
  opacity: 1;
}


.sidebar-tab {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  inline-size: 2rem;
  block-size: 8rem;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.sidebar-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.05em;
}

.sidebar-close {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-main);
  line-height: 1;
}

.sidebar-divider {
  block-size: 1px;
  background: var(--border);
}

.sidebar-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-xs);
}

.sidebar-label {
  font-size: var(--text-sm);
  color: #3A39FF;
  line-height: 1.2;
}


.sidebar-value {
  font-size: var(--text-sm);
  color: var(--text-main);
  line-height: 1.2;
}

.sidebar-close {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-main);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.case-study {
  grid-column: 2;
  padding-inline: var(--space-xl);
}

.cs-section {
  padding-block: var(--space-xl);
  padding-inline: 8%;
}

#visualizing {
  padding-block-end: 0;
}


.video-lighten-wrap {
  position: relative;
}

.video-lighten-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  pointer-events: none;
}

.solution-bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
  margin-block: calc(var(--space-xl) * 2);
}

.solution-bento__video-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.solution-bento__video-wrap video {
  inline-size: 100%;
  display: block;
}


.solution-bento__priority {
  grid-column: 2;
  grid-row: 1 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.solution-bento__priority video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.1) translateY(5%);
}

.solution-bento__bottom {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.filler-1 { object-position: center 48%; }
.filler-3 { object-position: center 4%; }

.bento-filler-video {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.solution-bento__bottom img,
.solution-bento__bottom video {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.solution-grid__top-left { grid-column: 1; grid-row: 1; }
.solution-grid__bottom-left { grid-column: 1; grid-row: 2; }
.solution-grid__right {
  grid-column: 2;
  grid-row: 1 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.solution-grid__right-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.08);
  display: block;
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.two-col-grid img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.cs-video-wide {
  aspect-ratio: unset;
  block-size: 18rem;
  object-position: center bottom;
  margin-block-start: calc(var(--space-xl) * 2);
  margin-block-end: calc(var(--space-xl) * 2);
}

#calendar {
  padding-block: 0;
}

#branding {
  padding-block-start: 0;
}

.cs-subheading {
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  font-weight: 500;
  /* font-family: var(--font); */
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: -0.05em;
  color: var(--heading-quiet);   /* the quiet colour: long story headings don't need the pop colour */
  margin-block-end: var(--space-lg);
}

.cs-subsubheading {
  font-size: 1.03rem;
  font-weight: 500;
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--heading-pop);   /* the pop colour sits on the short eyebrow text */
  margin-block-end: var(--space-xl);
}
/* the section name (problem, research, design, solution) as an eyebrow above the story heading – sits close to it */
.cs-eyebrow {
  margin-block-end: var(--space-xs);
}
/* a big heading that starts a new part in the middle of a section (functionality, branding, download now, worth noting)
   gets the page's usual big break above it – the same double block gap used between rows – so it never looks squished.
   Right under an eyebrow it needs no extra space (the eyebrow is its label). */
.cs-subheading {
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-eyebrow + .cs-subheading {
  margin-block-start: 0;
}
/* an eyebrow that starts a new part in the middle of a section gets the same big break above it (its heading under it needs none) */
.cs-eyebrow:not(:first-child) {
  margin-block-start: calc(var(--space-xl) * 2);
}

/* the eyebrow that opens this part of the design story sits a big break below the content above (the heading under it needs none) */
#branding .cs-eyebrow {
  margin-block-start: calc(var(--space-xl) * 2);
}




.cs-body {
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-block-end: var(--space-xl);
}

.cs-media-text-row .cs-body:last-child { margin-block-end: 0; }

.cs-body strong {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #3A39FF;
  text-underline-offset: 0.3em;
}

.cs-media-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-md);
  align-items: start;
}

.cs-video {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.cs-media-center {
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-block-size: 50vh;
  margin-block-start: var(--space-xl);
  margin-block-end: 4rem;
}

.cs-media-center + .cs-media-text-row {
  margin-block-start: 0;
}

.cs-media-center .cs-video {
  inline-size: 100%;
  object-fit: cover;
}

.cs-media-text-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--space-xl) * 2);
  align-items: start;
  margin-block-start: calc(var(--space-xl) * 2);
  margin-block-end: calc(var(--space-xl) * 2);
}

.cs-media-text-row--wide-media {
  grid-template-columns: 2fr 1fr;
}

#solution .cs-media-text-row--wide-media {
  margin-inline: -8%;
  padding-inline: 8%;
}

.cs-video-cropped {
  object-fit: cover;
  object-position: center 60%;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
}

.cs-list {
  font-size: 1rem;
  line-height: 1.4;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.highlight-blue {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #3A39FF;
  text-underline-offset: 0.2em;
}

.highlight-red {
  font-weight: 600;
}

.proto-wrap {
  margin-block: calc(var(--space-xl) * 2);
}

.proto-wrap .design-proto-row {
  margin-block: 0 var(--space-sm);
}

.design-proto-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-block: calc(var(--space-xl) * 2);
}

.design-proto-row img {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.design-col-media {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.design-video-text-row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-xl) * 2);
  margin-block-start: calc(var(--space-xl) * 2);
}

.design-screen {
  inline-size: 25%;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);
}

.branding-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-block: calc(var(--space-xl) * 2);
}

.branding-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tooltip-wrap {
  position: relative;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--text-dim);
  text-underline-offset: 0.2em;
  cursor: help;
}

.tooltip {
  display: none;
  position: absolute;
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 0;
  background: #3A39FF;
  color: #fff;
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-radius: var(--radius);
  inline-size: 18rem;
  z-index: 10;
}

.tooltip-wrap:hover .tooltip {
  display: block;
}

.floating-bubble {
  display: block;
  inline-size: 20rem;
  margin-block: calc(var(--space-xl) * 1.5);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-0.5rem); }
}


.screen-fill-row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-xl) * 2);
}

.screen-fill-row p {
  flex: 1;
  margin-block-end: 0;
}

.typography-video {
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-body--after-media {
  margin-block-start: calc(var(--space-xl) * 2);
}


.cs-caption {
  font-size: var(--text-sm);
  color: #c4986b;
  line-height: 1.4;
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  max-inline-size: 85%;
}

.cs-video--landscape-wrap {
  inline-size: 20%;
  overflow: hidden;
  border-radius: var(--radius);
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-video--landscape {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  inline-size: 100%;
  transform: scale(1.8);
  transform-origin: center;
}

.float-download {
  margin-top: calc(var(--space-xl) * 2);
}

.float-download-steps {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  overflow-x: auto;
}

.float-download-qr {
  display: flex;
  gap: calc(var(--space-xl) * 2);
  align-items: flex-start;
  margin-top: var(--space-lg);
}

.float-qr-code {
  width: 180px;
  height: 180px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);
}

.float-qr-text {
  flex: 1;
}

.float-qr-step {
  color: #3A39FF;
  margin-block-end: var(--space-sm);
}


.float-showcase {
  margin-top: calc(var(--space-xl) * 2);
}

.float-aiga-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.float-aiga-full {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
}

.float-aiga-full.float-aiga-img {
  aspect-ratio: 16/9;
  object-position: center 85%;
}


.float-aiga-img {
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
}

.float-aiga-row {
  display: grid;
  gap: var(--space-md);
}

/* Row 1: #32 left (2/3) + #31 right (1/3) */
.float-aiga-row--32-31 {
  display: flex;
  gap: var(--space-md);
  block-size: 28vw;
}

/* Row 2: #33 left (smaller) + #34 right (more space) */
.float-aiga-row--33-34 {
  display: flex;
  gap: var(--space-md);
  block-size: 28vw;
}

.float-aiga-32 {
  flex: 2;
  min-inline-size: 0;
  block-size: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.float-aiga-31-wrap {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}

.float-aiga-31 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.7);
  transform-origin: center 75%;
  display: block;
  border-radius: 0;
}

.float-aiga-33 {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}

.float-aiga-34 {
  flex: 1.6;
  min-inline-size: 0;
  block-size: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.cs-footnote {
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-footnote__list {
  list-style: disc;
  padding-inline-start: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.cs-footnote__list li {
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.screen-fill-box {
  position: relative;
  flex: 0 0 62%;
  aspect-ratio: 16 / 9;
  background: var(--float-bg);
  border-radius: 1.5rem;
  overflow: hidden;
}

.screen-fill-item {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: 22%;
  opacity: 0;
  animation: appear 0.001s step-start forwards;
  animation-delay: var(--delay);
}

.screen-fill-item img {
  inline-size: 100%;
  display: block;
  border-radius: 0.5rem;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top;
}

.screen-fill-center {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.screen-fill-center .floating-bubble {
  inline-size: 20rem;
  margin-block: 0;
}

@keyframes appear {
  to { opacity: 1; }
}

.cs-media-placeholder {
  background: var(--surface);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

.tldr {
  padding-block: var(--space-xl);
  padding-inline: 8%;
  text-align: center;
}

.tldr-label {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-main);
  background: #F4F318;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  margin-block-end: var(--space-sm);
}

.tldr p + .tldr-label {
  margin-block-start: var(--space-xl);
}

.tldr p {
  /* filter: url(#roughen); */
  font-size: 1.03rem;
  color: #3A39FF;
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--font);
}

.reel-wrap {
  position: relative;
  margin-block-start: var(--space-xl);
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reel-secondary {
  inline-size: 95vw;
  margin-inline-start: calc(50% - 47.5vw);
  margin-block-start: var(--space-md);
  display: flex;
  justify-content: flex-start;
}

.reel-img {
  display: block;
  inline-size: 15%;
}

.reel-wrap video {
  inline-size: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--float-bg);
}

#soundToggle,
#fullscreenToggle {
  position: absolute;
  inset-block-start: var(--space-md);
  background: var(--float-bg);
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-main);
  cursor: pointer;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  border-radius: 0;
}

#soundToggle {
  inset-inline-end: var(--space-md);
}

#fullscreenToggle {
  inset-inline-end: calc(var(--space-md) + 6rem);
}

.float-nav {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-xs);
  background: var(--float-bg);
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  z-index: 20;
}

.float-nav-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-main);
  cursor: pointer;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
}

.sidebar-toggle {
  color: var(--text-main);
  padding-inline-start: 0;
}

.case-sidebar.open .sidebar-toggle {
  color: #3A39FF;
}

.float-nav-next {
  color: #fff;
  background: #3A39FF;
  border: 1px solid #3A39FF;
  white-space: nowrap;
  outline: none;
}

.float-nav-btn.active {
  color: #3A39FF;
}

.roughen {
  filter: url(#roughen);
}

.jitter-word {
  filter: url(#roughen-always);
}

.tools-panel {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-xs));
  inset-inline-end: var(--space-lg);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.025rem;
}

.tools-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-md);
  padding-inline-end: var(--space-lg);
  background: var(--float-bg);
  inline-size: 12rem;
  position: relative;
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  opacity: 0;
  transition: max-block-size 0.35s ease, opacity 0.3s ease, padding-block 0.3s ease;
}

.tools-box::before {
  content: '';
  position: absolute;
  inset-inline-end: var(--space-sm);
  inset-block-start: var(--space-sm);
  inset-block-end: var(--space-sm);
  inline-size: 2px;
  background: #3A39FF;
  pointer-events: none;
}

.tools-box .sidebar-close {
  inset-inline-end: auto;
  inset-inline-start: var(--space-xs);
  font-size: var(--text-sm);
}

.tools-box .sidebar-item {
  display: block;
  text-align: right;
}

.tools-panel.open .tools-box {
  max-block-size: 20rem;
  padding-block: var(--space-sm);
  opacity: 1;
}

.tools-btn {
  padding-inline-end: 0;
}

.tools-panel.open .tools-btn {
  color: #3A39FF;
}



/* big headings stay on one line on desktop; js/heading-fit.js sets --fit (1 = full size) when one would be too wide */
@media (min-width: 701px) {
  .cs-subheading {
    white-space: nowrap;
    font-size: calc(clamp(1.75rem, 3.5vw, 3.5rem) * var(--fit, 1));
  }
}