/* Hero: large stencil arrow (logo shape, same orientation as logo) */
.hero-stencil-arrow {
  transform: translateY(-50%);
}

/* Plus Jakarta Sans (body), Fraunces (headings) */
body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  overflow-x: hidden;
}
.font-serif {
  font-family: Fraunces, Georgia, serif;
}
/* Smoother transitions site-wide */
a, button, [class*="transition"] {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trusted by: force transparent so no dark boxes from assets or browser */
.trusted-by.trusted-by {
  isolation: isolate;
}
.trusted-by-logos a,
.trusted-by-logos img {
  background: transparent !important;
}

/* Trusted by: single-row infinite scrolling ticker */
.ticker-wrap {
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.ticker-track {
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
}
.ticker-track:hover {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Remove dark background from logo PNGs that have baked-in black/dark */
.logo-no-bg {
  mix-blend-mode: screen;
  background: transparent !important;
}
/* Invert light/cream logos so they read as dark on light ticker background */
.logo-ticker-invert {
  filter: invert(1);
}

/* Playbook accordion: stable height so section doesn’t jump */
.playbook-accordion-list {
  min-height: 720px;
}

/* Playbook accordion: smooth open/close */
#playbook-accordion .playbook-accordion-content {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s ease-in-out;
  overflow: hidden;
}
#playbook-accordion .playbook-accordion-content.is-closing,
#playbook-accordion .playbook-accordion-content.is-opening {
  grid-template-rows: 0fr;
}
#playbook-accordion .playbook-accordion-inner {
  min-height: 0;
  overflow: hidden;
}

/* Timer bar: shows countdown until next accordion (only when open) */
#playbook-accordion .accordion-timer {
  height: 3px;
  background: #15CC97;
  width: 100%;
  transform-origin: right;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#playbook-accordion details[open] .accordion-timer {
  opacity: 1;
  animation: playbook-timer 6s linear forwards;
}
#playbook-accordion.playbook-user-controlled details[open] .accordion-timer,
#playbook-accordion.playbook-user-controlled .accordion-timer {
  opacity: 0;
  animation: none;
  pointer-events: none;
}
@keyframes playbook-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Playbook court image: drop black so only lines show on white */
.playbook-bg-blend {
  mix-blend-mode: screen;
}

/* Playbook illustration: negative positioning so it butts up against the navy section above */
.playbook-illustration-wrap {
  margin-top: -50px;
  top: -140px;
}
@media (min-width: 1024px) {
  .playbook-illustration-wrap {
    top: -180px;
  }
}

/* Work showcase: accordion on the right, one open at a time */
#work-showcase-accordion .work-showcase-accordion-content {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s ease-in-out;
  overflow: hidden;
}
#work-showcase-accordion .work-showcase-accordion-content.is-closing,
#work-showcase-accordion .work-showcase-accordion-content.is-opening {
  grid-template-rows: 0fr;
}
#work-showcase-accordion .work-showcase-accordion-inner {
  min-height: 0;
  overflow: hidden;
}

/* Highlight active brand: number badge and project name (only the showcased item) */
#work-showcase-accordion details[open] summary span:first-child {
  background: #15CC97;
  color: white;
}
#work-showcase-accordion details[open] summary span:last-child {
  color: inherit;
}
/* Project name: no background on title text or its wrapper (open or closed) */
#work-showcase-accordion summary span.min-w-0,
#work-showcase-accordion summary span.min-w-0 > span:first-of-type {
  background: transparent !important;
}
#work-showcase-accordion details[open] summary span.min-w-0 > span:first-of-type {
  color: #15CC97;
}
#work-showcase-accordion details:not([open]) summary span:first-child {
  background: rgba(255, 255, 255, 0.2);
}

/* Work showcase: progress bar (same as Playbook, 6s cycle) */
#work-showcase-accordion .work-showcase-accordion-timer {
  height: 3px;
  background: #15CC97;
  width: 100%;
  transform-origin: right;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#work-showcase-accordion details[open] .work-showcase-accordion-timer {
  opacity: 1;
  animation: work-showcase-timer 6s linear forwards;
}
#work-showcase-accordion.work-showcase-user-controlled details[open] .work-showcase-accordion-timer,
#work-showcase-accordion.work-showcase-user-controlled .work-showcase-accordion-timer {
  opacity: 0;
  animation: none;
  pointer-events: none;
}
@keyframes work-showcase-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Work showcase: tilted stack of visuals (no rounded corners, no dead white box) */
.work-showcase-stack {
  aspect-ratio: 16 / 10;
  min-height: 280px;
}
.work-showcase-stack-back,
.work-showcase-stack-mid,
.work-showcase-stack-front {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}
.work-showcase-stack-front {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 200px;
}
.work-showcase-stack-front img {
  aspect-ratio: 16 / 10;
  min-height: 200px;
  object-fit: cover;
  object-position: top center;
}

/* Work showcase: rolodex — prev/next layered under center; center at 140%, no gap */
.work-showcase-rolodex {
  box-sizing: border-box;
  overflow: visible;
}
.work-showcase-rolodex-track {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: center;
  justify-items: center;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}
.work-showcase-rolodex-slot {
  width: 100%;
  max-width: 100%;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-showcase-rolodex-prev,
.work-showcase-rolodex-next {
  opacity: 0.48;
  z-index: 0;
}
.work-showcase-rolodex-current {
  opacity: 1;
  z-index: 2;
  position: relative;
}
.work-showcase-rolodex-current .work-showcase-stack {
  transform: scale(1.4);
  transform-origin: center center;
}
.work-showcase-stack--slot {
  min-height: 200px;
  aspect-ratio: 16 / 10;
}
.work-showcase-stack--slot .work-showcase-stack-back,
.work-showcase-stack--slot .work-showcase-stack-mid,
.work-showcase-stack--slot .work-showcase-stack-front {
  min-height: 180px;
}
/* Left/right slot images: darker overlay + varied rotation (“thrown on table”) */
.work-showcase-stack-front--overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 36, 0.5);
  pointer-events: none;
}
@media (max-width: 768px) {
  /* Mobile: single stacked visual only (no left/right); rotation unchanged via dots/auto-advance */
  .work-showcase-rolodex-prev,
  .work-showcase-rolodex-next {
    display: none;
  }
  .work-showcase-rolodex-track {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .work-showcase-rolodex-current .work-showcase-stack {
    transform: scale(1);
  }
  .work-showcase-stack--slot {
    min-height: 160px;
  }
  .work-showcase-stack--slot .work-showcase-stack-back,
  .work-showcase-stack--slot .work-showcase-stack-mid,
  .work-showcase-stack--slot .work-showcase-stack-front {
    min-height: 140px;
  }
}

@media (min-width: 769px) {
  .work-showcase-rolodex {
    margin-bottom: 100px !important;
    margin-top: 120px !important;
  }
}

/* Work showcase: exactly 3 cards in view, wider and cleaner */
.work-showcase-carousel-wrap {
  overflow: hidden;
  width: 100%;
}
.work-showcase-carousel {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-left: calc((100% - (100% - 3rem) / 3) / 2);
  padding-right: calc((100% - (100% - 3rem) / 3) / 2);
}
.work-showcase-carousel::-webkit-scrollbar {
  display: none;
}
.work-showcase-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-shrink: 0;
}
.work-showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.work-showcase-dot:hover {
  background: rgba(255, 255, 255, 0.45);
}
.work-showcase-dot.is-active {
  background: #15CC97;
  transform: scale(1.2);
}
/* Exactly 3 cards in view; wider cards, non-active dimmed */
.work-showcase-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: calc((100% - 3rem) / 3);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem 1.25rem;
  border-radius: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.35s ease, color 0.2s ease;
  color: inherit;
  opacity: 0.48;
}
.work-showcase-card:hover {
  opacity: 0.7;
}
.work-showcase-card.is-active {
  opacity: 1;
  cursor: default;
}
.work-showcase-card.is-active .work-showcase-card-desc {
  color: rgba(255, 255, 255, 0.9);
}
.work-showcase-card:not(.is-active) .work-showcase-card-desc {
  color: rgba(255, 255, 255, 0.75);
}
.work-showcase-card .work-showcase-card-title {
  margin-top: 0;
  font-weight: 500;
}
@media (max-width: 767px) {
  .work-showcase-card {
    flex: 0 0 min(320px, 85vw);
    min-width: min(320px, 85vw);
  }
  .work-showcase-carousel {
    padding-left: calc((100% - min(320px, 85vw)) / 2);
    padding-right: calc((100% - min(320px, 85vw)) / 2);
  }
}

/* ——— Angular section edges ——— */
/* Slight diagonal cut at bottom of section (next section’s top will show under) */
.section-angle-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%);
  margin-bottom: -1px;
}
.section-angle-bottom-lg {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
  margin-bottom: -1px;
}
/* Angled top so section "slices" up into the previous one; z-index so the angle isn't clipped on mobile */
.section-angle-top,
.section-angle-top-steep,
.section-angle-top-inverse {
  position: relative;
  z-index: 1;
}
.section-angle-top {
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  margin-top: -2.5vw;
  padding-top: calc(2.5vw + 5rem);
}
@media (min-width: 1024px) {
  .section-angle-top {
    margin-top: -3vw;
    padding-top: calc(3vw + 6rem);
  }
}
/* Angled top for dark sections (steeper) — reduced overlap so logo bar isn’t cut */
.section-angle-top-steep {
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  margin-top: -1.5vw;
  padding-top: calc(1.5vw + 5rem);
}
@media (min-width: 1024px) {
  .section-angle-top-steep {
    margin-top: -2vw;
    padding-top: calc(2vw + 6rem);
  }
}
/* Angled bottom on dark section before newsletter */
.section-angle-bottom-dark {
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  margin-bottom: -1px;
}
/* Newsletter: angled top to meet the CTA (angle opposite direction) */
.section-angle-top-inverse {
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%);
  margin-top: -3vw;
  padding-top: calc(3vw + 5rem);
}
@media (min-width: 1024px) {
  .section-angle-top-inverse {
    margin-top: -4vw;
    padding-top: calc(4vw + 6rem);
  }
}

/* ——— How we work: subtle entrance + hover pop ——— */
.how-we-work-card {
  animation: how-we-work-enter 0.6s ease-out backwards;
}
.how-we-work-card:nth-child(1) { animation-delay: 0.05s; }
.how-we-work-card:nth-child(2) { animation-delay: 0.15s; }
.how-we-work-card:nth-child(3) { animation-delay: 0.25s; }
@keyframes how-we-work-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ——— Parallax (hero) ——— */
.parallax-slow {
  will-change: transform;
}