/* Project-specific overrides layered on top of the original stylesheet.
   The original.css + Webflow stylesheet handle all theming/layout, so keep this
   minimal to avoid fighting them. */
.no-theme-transitions, .no-theme-transitions * { transition: none !important; }

/* Fullscreen menu: show only the label by default; slide the hover GIF in to
   the left of the item on hover. The original Webflow IX2 interaction that
   collapsed these doesn't run in the static export, so enforce it here. */
.nav-menu_link_wrapper { display: flex; align-items: center; }
.nav-menu_visual {
  width: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
  flex: 0 0 auto;
  transition: width .5s cubic-bezier(.62,.04,.3,1), margin-right .5s cubic-bezier(.62,.04,.3,1);
}
.nav-menu_link_wrapper:hover .nav-menu_visual.mw-has-gif {
  width: 6.5rem !important;
  margin-right: .6rem !important;
}
@media (max-width: 991px) {
  .nav-menu_link_wrapper:hover .nav-menu_visual.mw-has-gif { width: 5rem !important; }
}
@media (max-width: 767px) {
  .nav-menu_link_wrapper:hover .nav-menu_visual.mw-has-gif { width: 4rem !important; }
}

/* Home "Services" list: floating visual on hover. The original Webflow IX2
   interaction (sizing + opacity reveal + dimming the other lines) doesn't run
   in the static export, and Webflow's bg-video init leaves the wrapper at
   height:0 — so restore it here. Desktop only (mobile uses the scroll effect). */
@media (min-width: 768px) {
  .home_services_visual_wrapper {
    height: auto !important;
    transition: opacity .4s ease;
  }
  .home_services_visual_wrapper > .w-background-video,
  .home_services_visual_wrapper video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .home_services_list-item_wrapper { transition: opacity .3s ease; }
  /* dim every line while hovering the list, keep the hovered one lit */
  .home_services_list:hover .home_services_list-item_wrapper { opacity: .2 !important; }
  .home_services_list .home_services_list-item_wrapper:hover { opacity: 1 !important; }
  /* reveal the hovered line's visual */
  .home_services_list-item_wrapper:hover .home_services_visual_wrapper { opacity: 1 !important; }
}

/* Hero cursor-follow visual: the Webflow export ships .moving-visual_wrapper
   as display:none (its IX2 interaction used to reveal it). Re-enable it on
   hover-capable devices; clone-inline.js fades it in and makes it follow the
   cursor. Which of the two visuals shows (is-light / is-dark) is handled by
   the theme rules in original.css. */
@media (hover: hover) {
  .hero_component .moving-visual_wrapper { display: block; }
}

/* Testimonial "Happy client" label: the export positions it absolutely
   (top-left of the quote), which overlaps the quote text at some viewport
   widths. Keep it in normal flow so it always sits above the quote. */
.section_quote .text-mono_absolute {
  position: static !important;
  margin-bottom: 1.25rem;
}

/* Testimonial layout on narrower screens (tablet portrait, mobile, narrow
   windows): stack it — "Happy client" centered above, quote full width.
   The export only stacks at the 767px mobile breakpoint, leaving an awkward
   squeezed row on tablet-portrait / narrow-desktop widths. */
@media (max-width: 1100px) {
  .section_quote .quote_component {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
  }
  .section_quote .text-mono_absolute {
    position: static !important;
    width: 100%;
    margin-bottom: 0;
    text-align: center;
  }
  .section_quote .text-mono_absolute .text-mono_wrapper {
    justify-content: center;
  }
  /* the label is hidden on mobile-landscape by the export; show it centered */
  .section_quote .text-mono_absolute .text-mono.hide-mobile-landscape {
    display: block !important;
  }
  .section_quote .quote_content {
    width: 100%;
    align-items: center;
  }
  .section_quote .quote_text {
    max-width: 100%;
  }
}

/* Case-study videos: a 2-column, click-to-play grid (not full-width). Native
   controls give the click-to-play behavior; stacks to 1 column on mobile. */
.case_video_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.5rem;
}
.case_video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.3rem;
  background: #000;
  cursor: pointer;
}
/* YouTube / Vimeo embeds: keep a 16:9 frame inside the grid cell. */
.case_video.is-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: 0.3rem;
  background: #000;
}
/* Odd count: the last, unpaired video spans the full 2-column width instead of
   sitting alone in one column with an empty gap beside it. */
.case_video_grid .case_video:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .case_video_grid { grid-template-columns: 1fr; }
}

/* Case-study images: full-width stacked gallery, rendered consistently on every
   template body (some baked bodies hid/collapsed their own image slots). */
.case_image_gallery {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
/* When videos sit above the photo gallery, space the two apart. */
.case_video_grid + .case_image_gallery {
  margin-top: 1.5rem;
}
.case_image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.3rem;
}

/* ---- Contact overlay ("Let's work together") ---- */
/* Let the overlay scroll so the SEND button is never cut off on shorter
   viewports, and give the form room to breathe top and bottom. */
.section_contact {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* The inner .contact_component is forced to min-height:100vh with a
   space-between layout; any vertical padding on .padding-global pushes it past
   the viewport and cuts off SEND. Zero the vertical padding (the component's own
   inset handles spacing) so the full-height form fits exactly. */
.section_contact .padding-global {
  padding-top: 0;
  padding-bottom: 0;
}
/* Scale the oversized heading + fields fluidly to the viewport height so the
   content never exceeds 100vh (which would reintroduce a cut-off/scroll). */
.section_contact .heading-style-h2 {
  font-size: clamp(2.25rem, 7vh, 7rem);
  line-height: 1.02;
}
.section_contact .contact_field {
  font-size: clamp(1.35rem, 4.6vh, 4rem);
  line-height: 1.15;
  height: auto;
}
.section_contact .contact_row {
  margin-bottom: clamp(0.25rem, 1.3vh, 1rem);
}
/* The Webflow default success box only exists to trigger the custom animation;
   keep it invisible so its stock green message never flashes. */
.section_contact .w-form-done {
  background: transparent;
  opacity: 0;
  padding: 0;
}
/* Fun confirmation line under the animated "Thank you!" success state. */
.contact_success_text {
  max-width: 44ch;
  margin-top: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.55;
  opacity: 0.8;
  text-align: center;
}

/* Intro layout component (.intro_component in .section_intro): the mono label
   sits in an oversized grid column, leaving a large gap before the body copy.
   Make the label hug its text and roughly halve the gap before the copy — one
   universal rule for every page using this intro (standard pages + case
   studies), so it isn't hard-coded per page. */
@media (min-width: 768px) {
  .section_intro .intro_component {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 17% !important;
  }
}

/* Home hero: always fill the viewport on every screen size. The Webflow CSS
   pins the section (and its inner padding/container) to a fixed height, letting
   the next section bleed into the first screen on mobile. Override the whole
   home-hero chain to fill the viewport; the flex column already centers the
   heading. dvh matches the ACTUAL visible area on mobile (svh resolves smaller
   than the current view when the browser toolbar is showing, which left a ~150px
   gap and let the next section peek in). Scoped to #hero-section so only the
   home hero is affected. */
#hero-section,
#hero-section > .padding-global,
#hero-section > .padding-global > .container-large,
.hero_component.is-home {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
/* The cursor-follow hero visual is meaningless without a pointer and overlaps
   the heading on touch / narrow screens — hide it there. */
@media (max-width: 767px) {
  .hero_component .moving-visual_wrapper { display: none !important; }
}

/* Home intro ("It's never just content"): make it a full-screen section on
   mobile too, with its content centered/spaced rather than bunched at the top —
   matching the full-height hero above it. Mobile only; desktop layout unchanged. */
@media (max-width: 767px) {
  .section_home-intro,
  .section_home-intro > .padding-global,
  .section_home-intro > .padding-global > .container-large,
  .section_home-intro .home_intro_component {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .section_home-intro .home_intro_component {
    justify-content: center;
  }
}

/* Home intro copy on mobile: shrink the type so each line-broken phrase fits on
   one line (e.g. "just content" and "Our obsession." no longer wrap). ~8vw fits
   the widest phrase across phone widths; keep the tight condensed line-height. */
@media (max-width: 767px) {
  .section_home-intro .home_intro_content {
    font-size: 8vw !important;
    line-height: 1.05 !important;
  }
}