/* ========== Rethink Sans – self-hosted variable font ========== */
@font-face {
  font-family: "Rethink Sans";
  src: url("./fonts/RethinkSans-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ========== Global tracking tighten for Rethink Sans ========== */
body {
  letter-spacing: -0.02em;
}

/* ========== Prevent horizontal scroll without breaking fixed/sticky positioning ========== */
html {
  overflow-x: clip;
}

/* ========== Hero: first grid video repurposed as fullscreen background (MP4) ========== */
@keyframes hero-bg-focus-in {
  from {
    filter: blur(22px);
    opacity: 0;
  }
  to {
    filter: blur(0);
    opacity: 0.75;
  }
}

#hero.hero_hero__pS4lA {
  position: relative;
  z-index: 1;
  overflow: visible;
  /* Portrait overrides --hero-bg-nudge to pull MP4 + blur up without losing bottom overlap */
  --hero-bg-nudge: 0px;
}

/* Gradient layer under header area: black to transparent for readability; fixed so it doesn’t scroll */
#hero::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(180px, 38vh, 380px);
  background: linear-gradient(
    to bottom,
    #000 0%,
    rgba(0, 0, 0, 0.9) 15%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.05) 90%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.35s ease;
}
/* Hide gradient once hero has left the viewport */
html.past-hero #hero::before {
  opacity: 0;
  pointer-events: none;
}

#hero.hero_hero__pS4lA .hero-bg-video {
  position: absolute;
  top: calc(-1 * var(--hero-bg-nudge));
  left: 0;
  width: 100%;
  height: calc(100% + 28vh + var(--hero-bg-nudge));
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  animation: hero-bg-focus-in 1.8s ease-out 1.2s both;
}

@media (prefers-reduced-motion: reduce) {
  #hero.hero_hero__pS4lA .hero-bg-video {
    animation: none;
    filter: none;
    opacity: 0.75;
  }
}

/* Frosted blur over background video + bottom fade to black at the video’s lower edge */
#hero.hero_hero__pS4lA::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--hero-bg-nudge));
  left: 0;
  right: 0;
  height: calc(100% + 28vh + var(--hero-bg-nudge));
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 52%,
      rgba(0, 0, 0, 0.35) 78%,
      rgba(0, 0, 0, 0.92) 94%,
      #000 100%
    ),
    rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

/*
 * Portrait: extend hero MP4 behind #spacer-text (“Why us”); stronger upward nudge than landscape.
 * Use top + extra height (not translateY) so layout matches paint and main can allow overflow.
 */
@media (max-aspect-ratio: 4/3) {
  #hero.hero_hero__pS4lA {
    --hero-bg-nudge: min(22vh, 200px);
  }
  #hero.hero_hero__pS4lA .hero-bg-video,
  #hero.hero_hero__pS4lA::after {
    height: calc(100% + 15svh + var(--hero-bg-nudge));
  }
  #hero.hero_hero__pS4lA .hero-bg-video {
    object-fit: cover;
    object-position: center top;
  }
  body > main {
    overflow: visible;
  }
}

/* Hide the grid tiles so only the background video shows */
#hero.hero_hero__pS4lA .grid_gridContainer__myDYr {
  display: none;
}

/* Scramble headline above fixed hero gradient (#hero::before uses z-index: 10) */
#hero.hero_hero__pS4lA .hero_scrambleEffect__3gXp3 {
  z-index: 12;
}

/*
 * index-static.html (data-page="static"): hero row is min-content; only sr-only + abs iframe
 * can collapse layout when :has() is unsupported. Lock explicit box so the iframe has a real height.
 */
html[data-page="static"] #hero.hero_hero__pS4lA .hero_scrambleEffect__3gXp3 {
  width: 80%;
  max-width: none;
  margin: 0 10%;
  min-height: 55vh;
  aspect-ratio: auto;
  flex: 0 0 auto;
}
@media (max-aspect-ratio: 4/3) {
  html[data-page="static"] #hero.hero_hero__pS4lA .hero_scrambleEffect__3gXp3 {
    width: 96%;
    margin: 0 2%;
    min-height: 36vh;
  }
}
html[data-page="static"] #hero.hero_hero__pS4lA .hero_scrambleContainer__8dyrk.hero_scrambleContainer {
  min-height: 55vh;
  height: 55vh;
  width: 100%;
  box-sizing: border-box;
}
@media (max-aspect-ratio: 4/3) {
  html[data-page="static"] #hero.hero_hero__pS4lA .hero_scrambleContainer__8dyrk.hero_scrambleContainer {
    min-height: 36vh;
    height: 36vh;
  }
}
html[data-page="static"] #hero.hero_hero__pS4lA .hero-scramble-iframe {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  min-height: 100%;
  height: 100%;
}

/* Scramble embed iframe – container keeps layout, iframe fills it */
/* Enlarge scramble area; on narrow/short viewport (≤4:3) use smaller min-height so it doesn't get clipped by main */
#hero.hero_hero__pS4lA .hero_scrambleEffect__3gXp3:has(.hero_scrambleContainer) {
  width: 80%;
  max-width: none;
  margin: 0 10%;
  min-height: 55vh;
  aspect-ratio: auto;
}
@media (max-aspect-ratio: 4/3) {
  #hero.hero_hero__pS4lA .hero_scrambleEffect__3gXp3:has(.hero_scrambleContainer) {
    width: 96%;
    margin: 0 2%;
    min-height: 36vh;
  }
}
#hero.hero_hero__pS4lA .hero_scrambleContainer__8dyrk.hero_scrambleContainer {
  position: relative;
  min-height: 55vh;
  width: 100%;
  aspect-ratio: auto;
}
@media (max-aspect-ratio: 4/3) {
  #hero.hero_hero__pS4lA .hero_scrambleContainer__8dyrk.hero_scrambleContainer {
    min-height: 36vh;
  }
}
#hero.hero_hero__pS4lA .hero_scrambleContainer__8dyrk.hero_scrambleContainer .hero_scrambleEffectImgAnimation__kYbzf,
#hero.hero_hero__pS4lA .hero_scrambleContainer__8dyrk.hero_scrambleContainer .hero_scrambleEffectImg__Sbpyo {
  display: none;
}
#hero.hero_hero__pS4lA .hero-scramble-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 55vh;
  border: 0;
  background: transparent;
}
@media (max-aspect-ratio: 4/3) {
  #hero.hero_hero__pS4lA .hero-scramble-iframe {
    min-height: 36vh;
  }
}

/* Hide hero CTA button and disclaimer text */
#hero.hero_hero__pS4lA .hero_cta__McBgs {
  display: none;
}
#hero.hero_hero__pS4lA .hero_disclaimer__CAy2I {
  display: none;
}
/* Hide "Where the next wave of storytelling happens" – subline sits directly under Artificial Intelligence */
#hero.hero_hero__pS4lA .hero_descriptionAndCta__NUu3B {
  display: none;
}

/* Show "Scroll to Explore" without waiting for React to add .hero_show__wOojD – same fade-in as hero subline */
#hero.hero_hero__pS4lA .hero_scrollIndicator__ajV43 {
  opacity: 0;
  filter: blur(12px);
  animation: hero-subline-fade-in 0.8s ease-out 3s forwards;
}
#hero.hero_hero__pS4lA .hero_scrollIndicator__ajV43.hero-scroll-indicator--hidden,
.hero_scrollIndicator__ajV43.hero-scroll-indicator--hidden {
  animation: hero-scroll-indicator-fade-out 1s ease-in-out forwards;
  pointer-events: none;
}
@media (max-aspect-ratio: 4/3) {
  #hero.hero_hero__pS4lA .hero_scrollIndicator__ajV43 {
    font-size: 1.1rem;
  }
  #hero.hero_hero__pS4lA .hero_scrollIndicator__ajV43::after {
    height: 4rem;
  }
}
@keyframes hero-scroll-indicator-fade-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(0);
  }
}

/* ========== Hero subline: tagline bar directly under "Artificial Intelligence" (inside hero) ========== */
/* Wide (aspect ratio > 4:3): horizontal bar [Box][Text1][Box][Text2][Box]; narrow (≤4:3): stacked, centered */
#hero-subline.hero-subline {
  grid-area: 3 / 1 / 4 / 2;
  place-self: start center;
  background: transparent;
  padding: 0 5% clamp(1rem, 3vh, 2.5rem);
  margin-top: -5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  filter: blur(12px);
  animation: hero-subline-fade-in 0.8s ease-out 1.1s forwards;
}
@keyframes hero-subline-fade-in {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.hero-subline__bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  gap: 8.9rem;
  transition: flex-direction 0.35s ease, gap 0.35s ease;
}
.hero-subline__box {
  display: none;
  flex: 0 0 auto;
  width: 10px;
  min-width: 6px;
  max-width: 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.hero-subline__box--center {
  display: none;
  flex: 0 0 auto;
  width: 10px;
  min-width: 10px;
  max-width: 10px;
}
.hero-subline__text {
  flex: 0 1 auto;
  margin: 0;
  font-family: "Rethink Sans", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  white-space: normal;
  max-width: 52%;
  min-width: 8ch;
}
.hero-subline__text--1 { margin-right: 0.2rem; }
.hero-subline__text--2 { margin-left: 0.2rem; }

@media (max-aspect-ratio: 4/3) {
  #hero-subline.hero-subline {
    padding: clamp(1rem, 2.5vh, 2rem) 8%;
  }
  .hero-subline__bar {
    flex-direction: column;
    gap: clamp(1rem, 2.5vh, 2rem);
    width: 100%;
  }
  .hero-subline__box {
    flex: 0 0 auto;
    width: 24px;
    height: 1px;
    max-width: none;
  }
  .hero-subline__box--right {
    display: none;
  }
  .hero-subline__text {
    font-size: clamp(1.35rem, 3.5vw, 1.9rem);
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ========== Spacer-text and Capabilities: black background ========== */
/* Spacer title: fluid size + wrap (nowrap + overflow:hidden clipped “consultancy” in portrait) */
#spacer-text .spacer-text_title__NBdOb h2 {
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: clamp(2.2rem, 4.8vw + 1.5rem, 5.4rem);
  line-height: 1.16;
}

@media (min-width: 768px) {
  #spacer-text .spacer-text_title__NBdOb h2 {
    line-height: 1.12;
  }
}

/* Spacer copy text: light grey like "we need to talk" */
#spacer-text .spacer-text_copy__wHAmo {
  color: rgba(255, 255, 255, 0.7);
}

/* Two <p>s: tight stack by default; portrait adds a blank line; landscape forces no extra gap */
#spacer-text .spacer-text_copy__wHAmo p {
  margin: 0;
}
#spacer-text .spacer-text_copy__wHAmo p + p {
  margin-top: 0;
}
@media (orientation: portrait) {
  #spacer-text .spacer-text_copy__wHAmo p + p {
    margin-top: 1.15em;
  }
}

/* ========== Viewport fade-in: blur to sharp ========== */
@keyframes ohyes-blur-fade-in {
  0%   { filter: blur(12px); opacity: 0; }
  40%  { filter: blur(6px);  opacity: 0.6; }
  100% { filter: blur(0px);  opacity: 1; }
}
.ohyes-blur-fade-in {
  animation: ohyes-blur-fade-in 1s ease-out forwards;
}

/* Initially hidden until JS triggers the animation */
.ohyes-fade-target {
  opacity: 0;
  filter: blur(12px);
}

/* Spacer on top of overview so text is always in front; transparent BG lets hero video overflow through */
#spacer-text.spacer-text_spacerText__74WUl {
  position: relative;
  z-index: 3;
  background: transparent;
}
#spacer-text.spacer-text_spacerText__74WUl .spacer-text_title__NBdOb,
#spacer-text.spacer-text_spacerText__74WUl .spacer-text_copy__wHAmo {
  position: relative;
  z-index: 5;
}

/* Portrait only: kill the blurred black blob that the base CSS paints behind spacer-text */
@media (max-aspect-ratio: 4/3) {
  #spacer-text.spacer-text_spacerText__74WUl::before {
    background-color: transparent !important;
    filter: none !important;
  }

  /* Extra line of vertical space between headline and first body paragraph */
  #spacer-text.spacer-text_spacerText__74WUl .spacer-text_copy__wHAmo {
    margin-top: clamp(2.4rem, 5.5vh + 1rem, 4.5rem);
  }
}

/* Landscape: each copy <p> is its own row (old inline rule merged both sentences into one wrap) */
@media (orientation: landscape) {
  #spacer-text .spacer-text_copy__wHAmo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #spacer-text .spacer-text_copy__wHAmo p {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
  }
  /* Exception: never extra blank line between sentences in landscape (overrides portrait rule) */
  #spacer-text .spacer-text_copy__wHAmo p + p {
    margin-top: 0 !important;
  }
}

/* Capabilities: highest layer, pulled up over the gradient backdrop */
.capabilities_capabilities__jfl1q {
  position: relative;
  z-index: 4;
  margin-top: -55vh;
  background: transparent;
  overflow: visible;
}

/* Fade to black behind capabilities content */
.capabilities_capabilities__jfl1q::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35vh;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 50%, #000 100%);
}
.capabilities_capabilities__jfl1q::after {
  content: "";
  position: absolute;
  top: 35vh;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: #000;
  z-index: -1;
}

/* ========== Gradient image hue-rotate per active capability tab ========== */
/* JS sets data-active-tab="1|2|3" on #overview */
#overview .video-section_backgroundImageContainer__Pjktb {
  transition: filter 0.8s ease;
}

/* Reality Check (tab 1, default): original warm amber */
#overview[data-active-tab="1"] .video-section_backgroundImageContainer__Pjktb {
  filter: none;
}

/* Create (tab 2): blue/purple */
#overview[data-active-tab="2"] .video-section_backgroundImageContainer__Pjktb {
  filter: hue-rotate(200deg) saturate(1.3);
}

/* Refine (tab 3): teal/green */
#overview[data-active-tab="3"] .video-section_backgroundImageContainer__Pjktb {
  filter: hue-rotate(120deg) saturate(1.2);
}

/* Smooth indent transition when switching tabs */
.capabilities_copyContainer__fe7Fj {
  transition: margin-left 0.4s ease;
}

/* Viewport blur overlay: hidden on desktop (only created on mobile, but safety fallback) */
.ohyes-caps-blur-overlay {
  display: none;
}

/* Capability tab buttons: lock width so scramble doesn't jump layout */
.capabilities_groupTitle__j7WYt button {
  display: inline-block;
  min-width: max-content;
}

/* Oh Yes capabilities: feature-list style (checkmarks + separators, same as contact) */
.capabilities_copyContainer__fe7Fj .features-list_featuresList__rxj2G {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
}
.capabilities_copyContainer__fe7Fj .features-list_featuresList__rxj2G li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.65em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.capabilities_copyContainer__fe7Fj .features-list_featuresList__rxj2G li:last-child {
  border-bottom: none;
}
.capabilities_copyContainer__fe7Fj .features-list_featuresList__rxj2G li .icon_icon__Kpq4l {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  opacity: 0.7;
}

/* ========== oh yes logo in header: always left-aligned ========== */
.ohyes-header-logo {
  display: block;
  height: 36px;
  width: auto;
}

/* Hide three-dots "more" button in header nav */
.header_nav__VpTa8 .button-more-dropdown_container__W0Bd2 {
  display: none;
}

/* ========== Static page only: header bar on hero = logo + icons only; after scroll = + gradient + jump links + contact headline ========== */
/* Header container (logo + nav) always visible; on hero only backdrop and jump links are hidden */
[data-page="static"] .header_container__b8mMC {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1000;
}
/* On hero (top of page): hide backdrop gradient/blur and jump links only */
[data-page="static"] .backdrop_backdrop__Mi23c .backdrop_blur__0A9Ad,
[data-page="static"] .backdrop_backdrop__Mi23c:after {
  opacity: 0;
  transition: opacity 0.35s ease;
}
[data-page="static"] .header_jumpLinks__BpTWA {
  display: flex;
  opacity: 0;
  gap: 2.4rem;
  transition: opacity 0.35s ease;
}
[data-page="static"] .header_jumpLinks__BpTWA a {
  pointer-events: none;
}

/* After scroll past hero: show backdrop gradient/blur and jump links */
[data-page="static"].scrolled-past-hero .backdrop_backdrop__Mi23c .backdrop_blur__0A9Ad,
[data-page="static"].scrolled-past-hero .backdrop_backdrop__Mi23c:after {
  opacity: 1;
}
[data-page="static"].scrolled-past-hero .header_jumpLinks__BpTWA {
  opacity: 1;
}
[data-page="static"].scrolled-past-hero .header_jumpLinks__BpTWA a {
  pointer-events: auto;
}
@media (min-width: 1024px) {
  [data-page="static"] .header_jumpLinks__BpTWA,
  [data-page="static"].scrolled-past-hero .header_jumpLinks__BpTWA {
    gap: 6.4rem;
  }
}

/* Under 4:3 aspect ratio: do not render jump links (Overview, Capabilities, etc.) in header */
@media (max-aspect-ratio: 4/3) {
  [data-page="static"] .header_jumpLinks__BpTWA {
    display: none !important;
  }
}

[data-page="static"] .contact_headline__bLAoy {
  opacity: 0;
  transition: opacity 0.6s ease;
}
[data-page="static"] .contact_headline__bLAoy.contact_headline_visible {
  opacity: 1;
}

/* ========== Contact -> "Say Hello" section ========== */
#contact.contact_contact__wSxaH {
  text-align: center;
  padding: 12rem 2rem 10rem;
}
#contact .contact_headline__bLAoy {
  opacity: 1 !important;
  margin-bottom: 2rem;
}
#contact .contact_subtext {
  margin-bottom: 5rem;
  opacity: 0.7;
}
#contact .contact_sayHelloButton__cf7lW {
  font-size: 1.8rem;
  padding: 1.2rem 4rem;
  margin-bottom: 6rem;
}

/* Footer links: more breathing room above */
.footer_footer__C00R8 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* ========== Legal / Privacy overlay modals ========== */
.ohyes-legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem;
}
.ohyes-legal-overlay[hidden] {
  display: none;
}
.ohyes-legal-content {
  position: relative;
  max-width: 72rem;
  width: 100%;
  background: #111;
  color: #e0e0e0;
  border-radius: 1.2rem;
  padding: 4rem 3.5rem 3rem;
  font-family: "Rethink Sans", sans-serif;
  font-size: 1.5rem;
  line-height: 2.2rem;
  max-height: 85vh;
  overflow-y: auto;
}
.ohyes-legal-content h2 {
  font-size: 2.8rem;
  font-weight: 400;
  margin: 0 0 2rem;
  color: #fff;
}
.ohyes-legal-content h3 {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 2rem 0 1rem;
  color: #fff;
}
.ohyes-legal-content p {
  margin: 0.6rem 0;
}
.ohyes-legal-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 2rem 0;
}
.ohyes-legal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.ohyes-legal-close:hover {
  opacity: 1;
}
@media (max-width: 768px) {
  .ohyes-legal-content {
    padding: 3rem 2rem 2rem;
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

/* ========== Hide only the video in overview section; keep gradient/backdrop visible ========== */
#overview.video-section_videoSection__YSbK5 .video-section_videoContainer__S2zrH {
  display: none;
}

/* ========== Video section: behind spacer; overlap upward so gradient reaches into spacer fade ========== */

.video-section_videoSection__YSbK5 .video-section_backgroundImageContainer__Pjktb {
  background: #000;
}

/* Portrait: hide the gradient backdrop so hero video overflow isn't blocked */
@media (max-aspect-ratio: 4/3) {
  #overview.video-section_videoSection__YSbK5 .video-section_backgroundImageContainer__Pjktb {
    display: none;
  }
}

/* Overview behind spacer (z-index 2); negative margin so gradient fills into spacer’s masked fade */
#overview.video-section_videoSection__YSbK5 {
  position: relative;
  z-index: 2;
  margin-top: -55vh;
  max-height: 70vh;
  overflow: hidden;
}

/* ==========================================================================
   MOBILE / SMALL SCREEN LAYOUT (max-width: 768px)
   Reset all overlap/z-index tricks; stack everything vertically.
   Capabilities shown as three separate blocks instead of tabs.
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Spacer text: transparent so gradient image shows through behind it --- */
  #spacer-text.spacer-text_spacerText__74WUl {
    position: relative;
    z-index: 3;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 6rem 2rem 3rem;
  }
  #spacer-text.spacer-text_spacerText__74WUl .spacer-text_title__NBdOb,
  #spacer-text.spacer-text_spacerText__74WUl .spacer-text_copy__wHAmo {
    position: relative;
    z-index: 5;
  }

  /* --- Overview gradient: pull up behind spacer, spans behind both spacer and capabilities --- */
  #overview.video-section_videoSection__YSbK5 {
    margin-top: -100%;
    max-height: none;
    overflow: visible;
    z-index: 1;
    /* Shorter than 80vh: video is hidden on mobile; less empty space before capabilities */
    min-height: clamp(19rem, 58vh, 70vh);
  }

  /* --- Capabilities: above gradient, with breathing room and smooth fade to black --- */
  .capabilities_capabilities__jfl1q {
    margin-top: 0 !important;
    z-index: 4;
    background: transparent;
    overflow: visible;
    position: relative;
    padding-top: 2.75rem;
    padding-bottom: 3rem;
  }

  /*
   * No scroll-bound black layer here: ::after used to fill from 25vh below the section
   * top with solid #000, so scrolling to Create/Refine hid the fixed story video entirely.
   * Readability: .ohyes-caps-blur-overlay (viewport-fixed) + text-shadow below.
   */
  .capabilities_capabilities__jfl1q::before,
  .capabilities_capabilities__jfl1q::after {
    display: none !important;
  }

  /* Reset JS-driven copy indent */
  .capabilities_copyContainer__fe7Fj {
    margin-left: 0 !important;
    transition: none;
  }

  /* --- Layout: interleave titles and copy blocks vertically --- */
  .capabilities_capabilities__jfl1q .capabilities_contentContainer___nusA {
    display: flex;
    flex-direction: column;
    padding: 0 2rem 3rem !important;
    position: relative;
    isolation: isolate;
  }

  /* Use display:contents so children participate in parent flex */
  .capabilities_capabilities__jfl1q .capabilities_titlesContainer__eiwu4 {
    display: contents !important;
  }

  .capabilities_capabilities__jfl1q .capabilities_copyContainer__fe7Fj {
    display: contents !important;
  }

  /* Entry: capability subsections start hidden on mobile, animate in when they enter viewport (like overview/contact) */
  .capabilities_capabilities__jfl1q .capabilities_groupTitle__j7WYt:not(.ohyes-blur-fade-in),
  .capabilities_capabilities__jfl1q .capabilities_groupCopy__ziSPY:not(.ohyes-blur-fade-in) {
    opacity: 0;
    filter: blur(12px);
  }

  /* Order: Title1 → Copy1 → Title2 → Copy2 → Title3 → Copy3; more spacing between sections */
  .capabilities_capabilities__jfl1q .capabilities_titlesContainer__eiwu4 .capabilities_groupTitle__j7WYt:nth-child(1) { order: 1; margin-top: 0; }
  .capabilities_capabilities__jfl1q .capabilities_copyContainer__fe7Fj .capabilities_groupCopy__ziSPY:nth-child(1) { order: 2; padding-bottom: 5rem; margin-bottom: 2rem; }
  .capabilities_capabilities__jfl1q .capabilities_titlesContainer__eiwu4 .capabilities_groupTitle__j7WYt:nth-child(2) { order: 3; margin-top: 3rem; }
  .capabilities_capabilities__jfl1q .capabilities_copyContainer__fe7Fj .capabilities_groupCopy__ziSPY:nth-child(2) { order: 4; padding-bottom: 5rem; margin-bottom: 2rem; }
  .capabilities_capabilities__jfl1q .capabilities_titlesContainer__eiwu4 .capabilities_groupTitle__j7WYt:nth-child(3) { order: 5; margin-top: 3rem; }
  .capabilities_capabilities__jfl1q .capabilities_copyContainer__fe7Fj .capabilities_groupCopy__ziSPY:nth-child(3) { order: 6; }

  /* All titles: vertical stack styling */
  .capabilities_capabilities__jfl1q .capabilities_groupTitle__j7WYt {
    font-size: 2.8rem !important;
    line-height: 1.3 !important;
    padding: 1.5rem 0 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
  }
  .capabilities_capabilities__jfl1q .capabilities_groupCopy__ziSPY {
    position: relative;
  }

  /* Hide the top decorative border */
  .capabilities_capabilities__jfl1q .capabilities_topBorder__R0G95 {
    display: none;
  }

  /* All copy blocks visible (stacked) */
  .capabilities_capabilities__jfl1q .capabilities_groupCopy__ziSPY {
    pointer-events: auto !important;
    position: static !important;
  }

  /* Legibility over the fixed blurred video (no opaque section ::after) */
  .capabilities_capabilities__jfl1q .capabilities_groupTitle__j7WYt button {
    text-shadow:
      0 0.06em 0.45em rgba(0, 0, 0, 0.92),
      0 0.02em 0.12em rgba(0, 0, 0, 0.9);
  }
  .capabilities_capabilities__jfl1q .capabilities_groupCopy__ziSPY,
  .capabilities_capabilities__jfl1q .capabilities_groupCopy__ziSPY p {
    text-shadow: 0 0.05em 0.35em rgba(0, 0, 0, 0.88);
  }
  .capabilities_capabilities__jfl1q .capabilities_copyContainer__fe7Fj .features-list_featuresList__rxj2G li span {
    text-shadow: 0 0.05em 0.3em rgba(0, 0, 0, 0.88);
  }

  /* ---- Viewport blur+gradient overlay ---- */
  .ohyes-caps-blur-overlay {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* Dark gradient at top/bottom edges */
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.3) 10%,
      transparent 15%,
      transparent 85%,
      rgba(0,0,0,0.3) 90%,
      rgba(0,0,0,0.85) 100%
    );
    /* Blur only at top/bottom edges via masked backdrop-filter */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 15%, transparent 85%, black 100%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 15%, transparent 85%, black 100%);
  }
  body.ohyes-caps-in-view .ohyes-caps-blur-overlay {
    opacity: 1;
  }

  /* Hide the swiper/carousel on mobile */
  .capabilities_capabilities__jfl1q .capabilities_swiper__6fggs {
    display: none;
  }

  /* Feature list items: smaller on mobile */
  .capabilities_copyContainer__fe7Fj .features-list_featuresList__rxj2G li {
    font-size: 1.5rem;
    padding: 0.5em 0;
  }

  /* More space between capabilities and contact */
  #contact.contact_contact__wSxaH {
    padding-top: 16rem;
    padding-bottom: 8rem;
  }
}

/* ========== Contact: desktop-only mail fallback (copy email) ========== */
.ohyes-contact-mail-fallback {
  margin-top: 2rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ohyes-contact-mail-fallback__text {
  margin: 0 0 0.75rem;
  opacity: 0.85;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.4;
}

.ohyes-contact-mail-fallback__fieldwrap {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  isolation: isolate;
  overflow: visible;
}

/* Blurred white hotspot behind the email field (triggered on copy) */
.ohyes-contact-mail-fallback__fieldwrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -35%;
  right: -35%;
  top: -100%;
  bottom: -100%;
  transform: scale(0.5);
  transform-origin: center center;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 38% 32% at 50% 50%,
    #ffffff 0%,
    rgba(255, 255, 255, 0.78) 14%,
    rgba(255, 255, 255, 0.3) 38%,
    rgba(255, 255, 255, 0.07) 58%,
    transparent 75%
  );
  filter: blur(24px);
  -webkit-filter: blur(24px);
}

@keyframes ohyes-email-copy-glow {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  18% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    opacity: 0.72;
    transform: scale(1.12);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.ohyes-contact-mail-fallback__fieldwrap--flash::before {
  animation: ohyes-email-copy-glow 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ohyes-contact-mail-fallback__fieldwrap--flash::before {
    animation: none;
    opacity: 0;
  }
}

.ohyes-contact-mail-fallback__field {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 2.75rem 0.65rem 0.9rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.35rem;
  cursor: text;
  user-select: all;
}

.ohyes-contact-mail-fallback__field:focus {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 2px;
}

.ohyes-contact-mail-fallback__copy {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0.3rem;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 0.2s ease, background 0.2s ease;
}

.ohyes-contact-mail-fallback__copy img {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  pointer-events: none;
}

.ohyes-contact-mail-fallback__copy:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ohyes-contact-mail-fallback__copy:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.12);
}

.ohyes-contact-mail-fallback__copied {
  margin: 0.6rem 0 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

@media (max-width: 767.98px) {
  .ohyes-contact-mail-fallback {
    display: none !important;
  }
}

/* ========== Mobile: fixed story video (Capabilities only), blur + vignette + tab tints ========== */
.ohyes-mobile-story-bg {
  display: none;
}

@media (max-width: 768px) {
  /* Keep page content above the fixed story video */
  main {
    position: relative;
    z-index: 1;
  }

  .ohyes-mobile-story-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.55s ease;
  }

  .ohyes-mobile-story-bg__inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .ohyes-mobile-story-bg__video-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Lets page black show through — softer than full-strength video */
    opacity: 0.58;
    transition: filter 0.9s ease, opacity 0.55s ease;
  }

  /* Softer than desktop overview: same hue idea, lower saturation */
  .ohyes-mobile-story-bg[data-active-tint="1"] .ohyes-mobile-story-bg__video-layer {
    filter: saturate(0.72) brightness(0.96);
  }

  .ohyes-mobile-story-bg[data-active-tint="2"] .ohyes-mobile-story-bg__video-layer {
    filter: hue-rotate(200deg) saturate(0.88) brightness(0.96);
  }

  .ohyes-mobile-story-bg[data-active-tint="3"] .ohyes-mobile-story-bg__video-layer {
    filter: hue-rotate(120deg) saturate(0.85) brightness(0.96);
  }

  .ohyes-mobile-story-bg__video {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 130%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.06);
    object-fit: cover;
    object-position: center center;
    filter: blur(16px) saturate(0.78);
    -webkit-filter: blur(16px) saturate(0.78);
  }

  /* Black at top & bottom, transparent in the middle */
  .ohyes-mobile-story-bg__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      #000 0%,
      rgba(0, 0, 0, 0.88) 12%,
      rgba(0, 0, 0, 0.2) 28%,
      transparent 42%,
      transparent 58%,
      rgba(0, 0, 0, 0.2) 72%,
      rgba(0, 0, 0, 0.88) 88%,
      #000 100%
    );
  }
}

@media (min-width: 769px) {
  .ohyes-mobile-story-bg {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (max-width: 768px) {
    .ohyes-mobile-story-bg {
      opacity: 0 !important;
    }
    .ohyes-mobile-story-bg__video-layer {
      transition: none;
    }
  }
}