@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@300;500;700;800&display=swap');

@font-face {
  font-family: 'Wonderfall Script';
  src: url('../fonts/Wonderfall-Script.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal-dark: #099396;
  --teal-light: #6daeb1;
  --ink: #1a1a1a;
  --white: #ffffff;
  --font-body: 'Poppins', sans-serif;
  --font-script: 'Wonderfall Script', 'Caveat', cursive;
  --font-logo: 'Aleo', serif;
  --font-title: 'Montserrat', sans-serif;
  --font-cs-text: 'Lato', sans-serif;

  /* Case study page */
  --cs-blue: #0877cc;
  --cs-navy: #14173a;
  --cs-navy-deep: #10122c;
  --cs-muted: #6b7280;
  --cs-border: #e6e8ef;
  /* Matches the style-guide screenshot's own background exactly (sampled
     from images/brainsway/style-guide.jpg) so the frame doesn't show a
     seam against the image's baked-in bg. */
  --cs-gray-light: #fafafc;

  /* Truckiby brand blue - matches the live Wix site exactly */
  --truckiby-blue: #304ff0;

  /* Rendered height of the persistent .project-nav bar (css/style.css:375),
     plus a little breathing room - reserved so pinned sticky content never
     renders underneath it. */
  --project-nav-clear: 85px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body.home main > .hero,
body.home main > .project,
body.home main > .contact {
  position: sticky;
  top: 0;
}

body.home main > *:nth-child(1) { z-index: 1; }
body.home main > *:nth-child(2) { z-index: 2; }
body.home main > *:nth-child(3) { z-index: 3; }
body.home main > *:nth-child(4) { z-index: 4; }
body.home main > *:nth-child(5) { z-index: 5; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--white);
  background: var(--ink);
}

h1, h2, p { margin: 0; }

/* Nav */
.logo {
  position: fixed;
  top: 28px;
  left: 24px;
  z-index: 100;
  font-family: var(--font-logo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

body.case-study-page .logo.is-hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

/* Contact section override: bring the logo back (even if a case study page
   had scrolled it away) and send the CTA away, since "let's work together"
   doesn't make sense once you're already looking at the contact details. */
body.contact-active .logo.is-hidden {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav-cta {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--teal-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 4px 18px rgba(9, 147, 150, 0.4);
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

body.contact-active .nav-cta {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.nav-cta:hover {
  background: #0bb0b3;
  transform: translateY(-1px);
}

/* Hero */
.hero {
  height: 100vh;
  height: 100svh;
  background: var(--teal-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 60px;
}

.hero-inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.script {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--white);
}

.hero h1 {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.hero-copy {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  max-width: 560px;
  opacity: 0.95;
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.mouse {
  display: block;
  width: 26px;
  height: 42px;
  border: 2px solid var(--white);
  border-radius: 14px;
  position: relative;
}

.wheel {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: var(--white);
  border-radius: 2px;
  animation: scroll-wheel 1.6s ease-in-out infinite;
}

@keyframes scroll-wheel {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 8px; }
}

/* Project sections */
.project {
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  background-color: #000;
  overflow: hidden;
}

.project::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .project::before { animation: none; }
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}

.project-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.22) 60%,
    rgba(0, 0, 0, 0.02) 85%);
  pointer-events: none;
}

.project-inner {
  position: relative;
  z-index: 1;
  width: min(920px, 84vw);
  padding-left: 8vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.project-tag {
  font-family: var(--font-title);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}

.project-tag span {
  color: var(--white);
  margin-left: 6px;
}

.project h2 {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  margin-top: 16px;
  border: 1.5px solid var(--white);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn-outline:hover {
  background: var(--white);
  color: var(--ink);
}

/* Contact / footer */
.contact {
  height: 100vh;
  height: 100svh;
  background: var(--teal-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 26px;
  padding: 80px 24px;
}

.contact-email {
  color: var(--white);
  text-decoration: none;
  font-size: clamp(0.9rem, 5.3vw, 2.4rem);
  font-weight: 700;
  word-break: normal;
  overflow-wrap: normal;
}

.contact-phone {
  color: var(--white);
  text-decoration: none;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
}

.social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social a {
  color: var(--white);
  display: flex;
}

.divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.6);
}

/* Case study detail pages */
.detail-hero {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  background-color: #000;
  background-size: cover;
  background-position: center;
  padding: 100px 8vw 60px;
}

.detail-hero p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.detail-hero h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  max-width: 780px;
}

.detail-content {
  background: var(--ink);
  padding: 80px 8vw;
  text-align: center;
}

.detail-content p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  font-size: 1.05rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  border: 1.5px solid var(--white);
  border-radius: 999px;
  padding: 12px 26px;
  transition: background 0.25s ease, color 0.25s ease;
}

.back-link:hover {
  background: var(--white);
  color: var(--ink);
}

/* Project nav (prev/home/next) - shared strip across all project pages */
.project-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--white);
  border-top: 1px solid var(--cs-border);
  padding-top: 16px;
  padding-bottom: 16px;
}

.project-nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
}

.project-nav-link,
.project-nav-home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #262626;
  text-decoration: none;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 18px;
}

.project-nav-home {
  grid-column: 2;
  justify-self: center;
}

.project-nav-prev {
  grid-column: 1;
  justify-self: start;
}

.project-nav-next {
  grid-column: 3;
  justify-self: end;
}

.project-nav-arrow {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url('../images/icons/arrow-circle.svg') center / contain no-repeat;
  transition: opacity 0.25s ease;
}

.project-nav-arrow-next {
  transform: scaleX(-1);
}

.project-nav-link:hover .project-nav-arrow {
  opacity: 0.7;
}

@media (max-width: 640px) {
  .project-scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.72) 100%);
  }
  .project-inner { width: 100%; padding: 0 7vw; align-items: center; text-align: center; }
  .nav-cta { top: 14px; right: 14px; padding: 10px 16px; font-size: 0.8rem; }
  .logo { top: 18px; left: 16px; font-size: 1rem; }
  .project--truckiby::before { background-position: 65% center; }
}

/* ==========================================================================
   Case study page (light theme, distinct from the dark home-page sections)
   ========================================================================== */

body.case-study-page {
  background: var(--white);
  color: var(--ink);
}

body.case-study-page .logo { color: var(--ink); }
body.gemara-berura-page .logo,
body.truckiby-page .logo,
body.brainsway-page .logo { color: var(--white); }
body.case-study-page .nav-cta { box-shadow: 0 4px 18px rgba(9, 147, 150, 0.25); }

.case-study { padding-top: 0; }

.cs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.cs-hero-wrap {
  position: relative;
  height: 133.33vh;
}

.cs-hero-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.cs-hero-crop {
  position: relative;
  height: 33.34vh;
  overflow: hidden;
}

.cs-hero-crop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 84%, rgba(255, 255, 255, 0.95) 100%);
  pointer-events: none;
}

.cs-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  display: block;
  transform: scale(1.4);
  transform-origin: 58% 45%;
}

.cs-hero-panel {
  position: relative;
  z-index: 2;
  background: var(--white);
  margin-top: -100vh;
  box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.12);
}

.cs-intro {
  display: grid;
  grid-template-columns: minmax(0, 591fr) minmax(0, 400fr) minmax(0, 129fr);
  align-content: center;
  gap: 40px;
  min-height: 66.67vh;
  /* Extra bottom padding reserves space for the persistent .project-nav bar
     (--project-nav-clear, css/style.css:32) so the centered content isn't
     visually pulled down into the strip it's pinned behind. */
  padding: 56px 0 calc(40px + var(--project-nav-clear));
}

.cs-intro h1 {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
}

.cs-intro p {
  font-family: var(--font-title);
  font-weight: 300;
  color: var(--cs-muted);
  line-height: 1.7;
  font-size: 1.125rem; /* 18px */
  margin: 0;
}

.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}

.cs-meta dt {
  font-family: var(--font-cs-text);
  font-size: 0.8rem;
  color: var(--cs-muted);
  margin: 0 0 4px;
}

.cs-meta dd {
  font-family: var(--font-cs-text);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.cs-hero-panel > .cs-container {
  padding-bottom: 48px;
}

.cs-mock-frame {
  overflow: hidden;
}

.cs-mock {
  width: 100%;
  display: block;
}

.cs-section {
  padding: 64px 0;
  text-align: center;
}

.cs-section h2:not(:where(.cs-heading)) {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  font-weight: 500;
  color: var(--ink);
  opacity: 0.85;
  margin: 0 0 20px;
}

.cs-section > .cs-container > p:not(.cs-eyebrow) {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.125rem; /* 18px */
  max-width: 760px;
  margin: 0 auto;
  color: var(--cs-muted);
  line-height: 1.7;
}

.cs-research,
.cs-jtbd { text-align: left; }

.cs-research > .cs-container > p:not(.cs-eyebrow),
.cs-jtbd > .cs-container > p:not(.cs-eyebrow) {
  max-width: 700px;
  margin: 0 0 40px;
}

.cs-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px */
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 20px;
}

.cs-problem {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 980px;
  overflow: hidden;
  background: var(--cs-navy-deep);
}

.cs-problem-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 80%;
}

.cs-problem-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cs-navy-deep) 0%, rgba(16, 18, 44, 0.92) 35%, rgba(16, 18, 44, 0.5) 50%, rgba(16, 18, 44, 0.12) 68%, transparent 78%);
}

.cs-problem-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  text-align: left;
}

.cs-eyebrow {
  font-family: var(--font-title);
  color: var(--white);
  opacity: 0.5;
  font-size: 1.5rem; /* 24px */
  font-weight: 500;
  margin: 0 0 4px;
}

.cs-problem-content h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px */
  line-height: 1.15;
  color: var(--white);
  max-width: 620px;
  margin: 0 0 24px;
}

.cs-problem-content > p:not(.cs-eyebrow) {
  font-family: var(--font-title);
  font-weight: 300;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  font-size: 1.125rem; /* 18px */
  margin: 0 0 18px;
}

.cs-problem-panel {
  max-width: 460px;
  margin: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.cs-problem-panel img {
  width: 100%;
  display: block;
}

.cs-solution {
  background: var(--truckiby-blue);
}

.cs-solution h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px */
  line-height: 1.15;
  color: var(--white);
  opacity: 1;
  margin: 0 0 20px;
}

.cs-solution > .cs-container > p {
  color: rgba(255, 255, 255, 0.85);
}

.cs-solution-intro {
  font-weight: 400;
  margin-bottom: 32px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.cs-solution-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 0 0 32px;
}

.cs-solution-card {
  flex: 0 0 calc(25% - 12px);
  background: var(--white);
  border-radius: 10px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cs-solution-card img { width: 28px; height: 28px; }

.cs-solution-card p {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.125rem; /* 18px */
  color: var(--ink) !important;
  line-height: 1.5;
  margin: 0;
}

.cs-changed {
  padding: 64px 0 56px;
  background: var(--white);
}

.cs-changed-intro { text-align: left; }

.cs-eyebrow-dark { color: var(--ink); }

.cs-changed-intro h2 {
  text-align: left;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px */
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 24px;
}
.cs-changed-intro p:not(.cs-eyebrow) {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.125rem; /* 18px */
  max-width: 700px;
  color: var(--cs-muted);
  line-height: 1.7;
  margin: 0;
}

.cs-what-changed {
  background: var(--ink);
  padding-bottom: 64px;
}

.cs-what-changed-heading {
  padding: 64px 0 32px;
}

.cs-what-changed-heading h2 {
  text-align: left;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px */
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.cs-change {
  position: sticky;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  padding: 56px;
  margin-bottom: 20px;
  /* Safety-net fallback only - not expected to trigger at realistic viewport
     heights now that the heading above is no longer sticky/reserving space
     above the cards. Caps height and scrolls internally rather than letting
     the persistent .project-nav bar paint over (hide) the card's own
     content, in case of a genuinely short/squeezed viewport. */
  overflow-y: auto;
  /* Shared min-height keeps all three stacked cards close in height - a much
     shorter card (e.g. card 2's single toolbar image) would otherwise let
     the previous pinned card show through in the gap below it once this
     card is fully covered. Value matches card 1 (the tallest) at desktop
     width; content that's naturally taller still grows past it as normal. */
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

.cs-change:nth-of-type(1) { top: 24px; z-index: 1; max-height: calc(100vh - 24px - var(--project-nav-clear)); }
.cs-change:nth-of-type(2) { top: 48px; z-index: 2; max-height: calc(100vh - 48px - var(--project-nav-clear)); }
.cs-change:nth-of-type(3) { top: 72px; z-index: 3; max-height: calc(100vh - 72px - var(--project-nav-clear)); }

.cs-change:last-of-type { margin-bottom: 0; }

/* A sticky element with nothing after it in its containing block has zero
   sticky range and never pins - this sibling gives the last card room to stay put. */
.cs-changes-spacer { height: 100vh; }

.cs-change-heading-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 32px;
  /* Stays pinned to the card's top edge (never centered/pushed down by the
     min-height below) - the numbered label needs to stay right at the top
     so it reads correctly in the thin "peek" strip of the fanned card stack. */
  flex: none;
}

.cs-change-number {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.75rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.cs-change-label-white {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  margin: 0;
}

.cs-change-text {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.125rem; /* 18px */
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  text-align: left;
  margin: 0;
}

.cs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.cs-change-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}

.cs-change-split img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.cs-compare-item h4 {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 16px;
  text-align: left;
}

.cs-compare-item img,
.cs-compare-item video {
  width: 100%;
  border-radius: 10px;
  display: block;
}

.cs-compare-item p {
  font-family: var(--font-title);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  font-size: 1.125rem; /* 18px */
  text-align: left;
  margin: 12px 0 0;
}

.cs-toolbar-img {
  width: 100%;
  border-radius: 10px;
  display: block;
  margin: 24px 0 0;
}

/* When a card's own content is shorter than the shared min-height above,
   center the body (everything after the pinned heading row) in the
   leftover space instead of leaving it stranded at the top with a dead
   gap below - auto margins only absorb space when there's extra to give. */
.cs-change > .cs-compare,
.cs-change > .cs-change-split {
  margin-top: auto;
  margin-bottom: auto;
}

.cs-change > p.cs-change-text {
  margin-top: auto;
  margin-bottom: 0;
}

.cs-change > img.cs-toolbar-img {
  margin-bottom: auto;
}

.cs-result-wrap {
  position: relative;
  height: 130vh;
  /* Overlaps the card-3 spacer above (css/style.css:779) so .cs-result's sticky
     cover-up is already underway before card 3's own local sticky container runs
     out of room - otherwise card 3 unsticks and visibly slides before the result
     section catches up to cover it. Keep in sync with .cs-changes-spacer height. */
  margin-top: -100vh;
}

.cs-result {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--cs-blue);
  text-align: left;
}

.cs-result-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.cs-result-video-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 76vh;
}

.cs-result-media {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  display: block;
}

.cs-result-pause {
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 18, 44, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.cs-result-video-wrap:hover .cs-result-pause,
.cs-result-video-wrap:focus-within .cs-result-pause {
  opacity: 1;
}

.cs-result-pause:hover {
  background: rgba(16, 18, 44, 0.8);
}

.cs-result-pause .icon-play { display: none; }
.cs-result-pause.is-paused .icon-pause { display: none; }
.cs-result-pause.is-paused .icon-play { display: block; }

.cs-result-pause .icon-pause {
  width: 12px;
  height: 14px;
  background:
    linear-gradient(var(--white), var(--white)) 0 0 / 4px 14px no-repeat,
    linear-gradient(var(--white), var(--white)) 8px 0 / 4px 14px no-repeat;
}

.cs-result-pause .icon-play {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--white);
}

.cs-result-content h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px */
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 20px;
}

.cs-result-content p:not(.cs-eyebrow) {
  font-family: var(--font-title);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  font-size: 1.125rem; /* 18px */
  margin: 0;
}

/* ==========================================================================
   Truckiby case study - section patterns shared with any future case study
   ========================================================================== */

.cs-app-showcase {
  background: #d9d9d9;
  padding: 72px 0;
}

.cs-app-showcase-frame {
  position: relative;
  max-width: 620px;
  aspect-ratio: 1280 / 932;
  margin: 0 auto;
  /* Scroll-driven parallax (see js/main.js updateAppShowcase): the circle
     grows via --circle-scale and both phones drift upward via --phone-y,
     each at its own speed (see the per-image multipliers below) so they
     don't read as a single fused block. Defaults below keep the
     static/no-JS layout. */
  --circle-scale: 1;
  --phone-y: 0px;
}

.cs-app-showcase-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--truckiby-blue);
  transform: translate(-50%, -50%) scale(var(--circle-scale));
}

.cs-app-showcase-frame img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
}

.cs-app-showcase-frame img:nth-of-type(1) {
  width: 46%;
  aspect-ratio: 700 / 913;
  transform: translate(calc(-50% - 24%), calc(-50% - 2.5% + var(--phone-y) * 0.7));
}

.cs-app-showcase-frame img:nth-of-type(2) {
  width: 38%;
  aspect-ratio: 600 / 1050;
  transform: translate(calc(-50% + 28%), calc(-50% + 3.5% + var(--phone-y) * 1.2));
}

.cs-steps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin: 0;
  text-align: left;
}

.cs-step-card { flex: 0 0 calc(25% - 24px); }

.cs-step-photo {
  position: relative;
  width: 68%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: transparent;
}

.cs-step-photo img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}

.cs-step-footer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
}

.cs-step-number {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 2rem;
  color: var(--white);
  line-height: 1;
  flex: none;
}

.cs-step-caption {
  font-family: var(--font-title);
  font-weight: 300;
  color: var(--white);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  margin: 0;
}

.cs-carousel {
  position: relative;
}

.cs-charts-grid {
  display: flex;
  gap: 24px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cs-charts-grid::-webkit-scrollbar { display: none; }

.cs-charts-grid picture {
  flex: 0 0 calc(75% - 18px);
  min-width: 0;
  display: block;
  scroll-snap-align: start;
}

.cs-charts-grid img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.cs-carousel-arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9) url('../images/icons/arrow-circle.svg') center / contain no-repeat;
  box-shadow: 0 4px 12px rgba(16, 18, 44, 0.15);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.cs-carousel-arrow-prev { left: 16px; }

.cs-carousel-arrow-next {
  right: 16px;
  transform: translateY(-50%) scaleX(-1);
}

.cs-carousel-arrow:hover { opacity: 0.85; }

.cs-carousel-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.cs-quotes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 0 48px;
  text-align: left;
}

.cs-quote-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 620px;
}

.cs-quote-row--alt {
  flex-direction: row-reverse;
  align-self: flex-end;
  text-align: right;
}

.cs-quote-row--alt .cs-quote-name { text-align: right; }

.cs-quote-avatar {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.cs-quote-bubble {
  background: var(--cs-border);
  border-radius: 14px;
  padding: 24px;
}

.cs-quote-bubble p {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.125rem; /* 18px */
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 12px;
}

.cs-quote-name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
}

.cs-figure {
  margin: 0 0 40px;
}

.cs-figure:last-child { margin-bottom: 0; }

.cs-figure img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* Showcase stack: each screen pins full-screen (position: sticky, top: 0)
   while the next one - one step later in the DOM, one higher in z-index -
   scrolls up from below and covers it, card-stack style (same technique as
   the homepage's .project sections, css/style.css:41-52). Frames are NOT
   forced to a fixed height - each hugs its own image's natural size, so a
   normal landscape screenshot isn't stranded inside a taller empty box. */
.cs-showcase-stack {
  position: relative;
  background: var(--white);
}

.cs-showcase-stack > *:nth-child(1) { z-index: 1; }
.cs-showcase-stack > *:nth-child(2) { z-index: 2; }
.cs-showcase-stack > *:nth-child(3) { z-index: 3; }
.cs-showcase-stack > *:nth-child(4) { z-index: 4; }
.cs-showcase-stack > *:nth-child(5) { z-index: 5; }

.cs-stack-frame {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 72px 0 0;
}

.cs-stack-inner {
  width: 100%;
  margin: 0 auto;
}

.cs-stack-frame img {
  /* Plain, edge-to-edge image - no card frame (no shadow/radius) so
     screens simply stack one on top of the other as the page scrolls. */
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 72px);
  object-fit: contain;
}

/* Style guide sheet: far too tall to shrink to one screen without becoming
   illegible, and too tall to sit in a normal sticky frame without "freezing"
   (a sticky box much taller than the viewport just holds its top slice on
   screen for the whole scroll range, only revealing the rest right at the
   very end). Instead it gets its own tall wrapper for scroll runway, and
   pans vertically inside a pinned, clipped frame - driven by --pan-y (see
   js/main.js updateStackPan) - so scrolling reveals colors, then type, then
   icons, top to bottom - matching the live Wix site
   (images/brainsway/wix/brainsway-parallax.mp4).
   Deliberately plain block (not flex) and no will-change: transform - both
   were dropped because a transformed child inside a sticky + overflow:hidden
   ancestor is a known-fragile combination in Chromium (the transformed
   element can end up on its own compositor layer and ignore the ancestor's
   clip), and this is simpler to reason about / less likely to hit that. */
.cs-stack-pan {
  position: relative;
  height: 280vh;
}

.cs-stack-pan-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--cs-gray-light);
  padding: 72px 0 0;
  text-align: center;
}

.cs-stack-pan-img {
  display: inline-block;
  width: 100%;
  max-width: 1200px;
  transform: translateY(var(--pan-y, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .cs-stack-pan-img { transform: none; }
}

.cs-design {
  position: relative;
  overflow: hidden;
  text-align: left;
}

.cs-design-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.cs-design-fade {
  position: absolute;
  inset: 0;
  /* Solid color must be fully opaque well before the phone's top edge
     (see .cs-design-body padding-top below) - the video's own backing
     is baked in at this same grey, so it only reads as "invisible"
     when it lands on top of solid color, never on the wireframe strip. */
  background: linear-gradient(to bottom, rgba(141, 152, 175, 0) 4%, var(--cs-design-bg, #8d98af) 22%);
}

.cs-design-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 200px 40px 90px;
}

.cs-design-phone {
  flex: 1 1 0;
  max-width: 300px;
  min-width: 0;
  position: relative;
}

.cs-design-phone img,
.cs-design-video {
  width: 100%;
  display: block;
}

.cs-design-pause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 18, 44, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.cs-design-phone:hover .cs-design-pause,
.cs-design-phone:focus-within .cs-design-pause {
  opacity: 1;
}

.cs-design-pause:hover {
  background: rgba(16, 18, 44, 0.8);
}

.cs-design-pause .icon-play { display: none; }
.cs-design-pause.is-paused .icon-pause { display: none; }
.cs-design-pause.is-paused .icon-play { display: block; }

.cs-design-pause .icon-pause {
  width: 12px;
  height: 14px;
  background:
    linear-gradient(var(--white), var(--white)) 0 0 / 4px 14px no-repeat,
    linear-gradient(var(--white), var(--white)) 8px 0 / 4px 14px no-repeat;
}

.cs-design-pause .icon-play {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--white);
}

.cs-design-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 480px;
}

.cs-design-content h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3.5rem; /* 56px - matches every other case-study h2 title */
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 20px;
}

.cs-design-content p:not(.cs-eyebrow) {
  font-family: var(--font-title);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  font-size: 1.125rem; /* 18px */
  margin: 0;
}

@media (max-width: 1023px) {
  .cs-container { padding: 0 24px; max-width: 752px; }
  .cs-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 40px 0;
  }
  .cs-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px 48px;
  }
  .cs-solution-card { flex-basis: calc(50% - 8px); }
  .cs-problem { height: auto; min-height: 0; max-height: none; padding: 72px 0 88px; }
  .cs-problem-content { height: auto; padding-top: 0; }
  .cs-problem-overlay { background: linear-gradient(180deg, rgba(16, 18, 44, 0.55) 0%, var(--cs-navy-deep) 68%); }
  .cs-result-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-step-card { flex-basis: calc(50% - 16px); }
  .cs-quote-row { max-width: 100%; }
  .cs-design-body { flex-direction: column; padding: 320px 24px 48px; gap: 20px; text-align: center; }
  .cs-design-content { text-align: center; max-width: 480px; }
  .cs-design-phone { max-width: 220px; }
  .cs-stack-frame { padding: 84px 0 0; }
  .cs-stack-frame img { max-height: calc(100vh - 84px); }
  .cs-stack-pan-frame { padding: 84px 0 0; }
}

@media (max-width: 640px) {
  .project-nav-text { display: none; }
  .project-nav-link { gap: 0; }
  .cs-container { padding: 0 24px; max-width: 100%; }
  .cs-hero-panel > .cs-container { padding-bottom: 0; }
  .cs-intro { text-align: left; }
  .cs-mock-frame {
    width: calc(100% + 48px);
    margin: 0 -24px;
    aspect-ratio: 1400 / 1040;
  }
  .cs-mock {
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
  }
  .cs-eyebrow { font-size: 1.25rem; }
  .cs-problem-content h2,
  .cs-solution h2,
  .cs-changed-intro h2,
  .cs-what-changed-heading h2,
  .cs-result-content h2,
  .cs-design-content h2,
  .cs-heading { font-size: 2.5rem; }
  .cs-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .cs-solution-card { flex-basis: 100%; }
  .cs-section { padding: 48px 0; }
  .cs-changed { padding: 48px 0 40px; }
  .cs-what-changed { padding-bottom: 48px; }
  .cs-what-changed-heading { padding: 40px 0 24px; }
  /* Cards go edge-to-edge on mobile (no outer gutter) to reclaim width -
     wider single-column images/text need fewer wrapped lines, which combined
     with the trimmed spacing below keeps card 1 clear of .project-nav.
     Corners stay rounded (.cs-change's own border-radius is untouched). */
  .cs-container.cs-changes-list { padding: 0; }
  .cs-change { padding: 18px 24px; min-height: 524px; }
  .cs-change-heading-row { margin-bottom: 16px; }
  .cs-compare { gap: 12px; }
  /* Card 1's two stacked before/after screenshots are what made it the
     tallest card by far on mobile (single-column, no side-by-side room) -
     cropping them keeps card 1 close to the shared min-height above instead
     of forcing cards 2/3 to stretch a lot further to match it. */
  .cs-change:nth-of-type(1) .cs-compare-item img {
    max-height: 90px;
    object-fit: cover;
  }
  .cs-change:nth-of-type(1) { top: 0; max-height: calc(100vh - var(--project-nav-clear)); }
  .cs-change:nth-of-type(2) { top: 32px; max-height: calc(100vh - 32px - var(--project-nav-clear)); }
  .cs-change:nth-of-type(3) { top: 48px; max-height: calc(100vh - 48px - var(--project-nav-clear)); }
  .cs-compare,
  .cs-change-split { grid-template-columns: 1fr; }
  .cs-problem { padding: 56px 0 64px; }
  .cs-problem-content h2,
  .cs-problem-content > p,
  .cs-problem-panel { max-width: 100%; }

  .cs-app-showcase { padding: 48px 0; }
  .cs-app-showcase-frame { max-width: 320px; }
  .cs-step-card { flex-basis: 100%; }
  .cs-carousel-arrow { width: 32px; height: 32px; }
  .cs-carousel-arrow-prev { left: 8px; }
  .cs-carousel-arrow-next { right: 8px; }
  .cs-quote-row,
  .cs-quote-row--alt {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    align-self: flex-start;
  }
  .cs-quote-row--alt .cs-quote-name { text-align: left; }
  .cs-research > .cs-container > p:not(.cs-eyebrow),
  .cs-jtbd > .cs-container > p:not(.cs-eyebrow) { margin-bottom: 24px; }
  .cs-design-body { padding-top: 240px; }
  .cs-design-phone { max-width: 190px; }
  .cs-stack-frame { padding: 80px 0 0; }
  .cs-stack-frame img { max-height: calc(100vh - 80px); }
  .cs-stack-pan-frame { padding: 80px 0 0; }
}