/* ===== 10-hero: Elodie testimonial hero + "Watch Video" overlay =====
   Live: framer-1oqzdlx (desktop), framer-19cyena (tablet), framer-178f87r (phone). 700px tall at every width.
   Breakpoints: desktop >= 1440, tablet 810 to 1439.98, phone <= 809.98. */

.nf-el-hero {
  position: relative;
  display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 0;
  flex: 0 0 auto; width: 100%; height: 700px; padding: 0;
  overflow: clip;
}
.nf-el-hero__row {
  position: relative;
  display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 10px;
  flex: 1 0 0px; width: 1px; height: 100%; padding: 0;
  overflow: clip;
}
.nf-el-hero__media { position: relative; flex: 1 0 0px; width: 1px; height: 100%; }
.nf-el-hero__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  border-radius: 0; background-color: rgba(0, 0, 0, 0); cursor: auto;
  overflow: clip;
}

/* 20% black shade: the same oversized box as live (2582px tall, 5497px wider than the hero), clipped by the row */
.nf-el-hero__shade {
  position: absolute; inset: -941px -2749px -941px -2748px; z-index: 0;
  flex: 0 0 auto;
  background-color: rgba(0, 0, 0, 0.2);
  overflow: clip;
}

/* text block, positioned inside the shade box */
.nf-el-hero__content {
  position: absolute; z-index: 1;
  display: flex; flex-flow: column; justify-content: center; align-content: flex-start; align-items: flex-start; gap: 30px;
  flex: 0 0 auto; height: min-content; padding: 0;
  overflow: hidden;
}
.nf-el-hero__title-wrap {
  position: relative; flex: 0 0 auto; height: auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  will-change: transform;
  opacity: 0.001; transform: translateY(50px);
  animation: nf-el-hero-appear 600ms cubic-bezier(0.44, 0, 0.56, 1) 100ms both;
}
@keyframes nf-el-hero-appear {
  from { opacity: 0.001; transform: translateY(50px); }
  to { opacity: 1; transform: none; }
}
.nf-el-hero__title {
  margin: 0;
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif;
  font-weight: 500; font-style: normal; line-height: 1.15;
  color: rgb(255, 255, 255); text-align: start;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

.nf-el-hero__meta {
  position: relative;
  display: flex; justify-content: center; align-content: flex-start; align-items: flex-start;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0;
  overflow: clip;
}
.nf-el-hero__name-wrap {
  position: relative; flex: 0 0 auto; width: 100%; height: auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  will-change: transform;
}
.nf-el-hero__name {
  margin: 0;
  font-family: "SFProText-Medium", "SF Pro Text", "Nafas Inter", sans-serif;
  font-weight: 500; letter-spacing: -0.02em;
  color: rgb(255, 255, 255); text-align: left;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

/* white pill: no hover or press state on live */
.nf-el-hero__pill {
  position: relative;
  display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 8px;
  flex: 0 0 auto; width: min-content; height: min-content; padding: 8px 16px;
  background-color: #fff; border-radius: 99px;
  overflow: clip; will-change: transform; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.nf-el-hero__pill:focus-visible { outline: 2px solid #91c851; outline-offset: 2px; }
.nf-el-hero__icon {
  position: relative; flex: 0 0 auto; aspect-ratio: 1 / 1; width: 20px; height: auto;
  image-rendering: pixelated; fill: rgba(0, 0, 0, 1); color: rgba(0, 0, 0, 1);
}
.nf-el-hero__icon svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.nf-el-hero__wv-wrap {
  position: relative; flex: 0 0 auto; width: auto; height: auto;
  display: flex; flex-direction: column; justify-content: flex-start;
  white-space: pre; will-change: transform;
}
.nf-el-hero__wv {
  display: block;
  font-family: "SFProText-Medium", "SF Pro Text", "Nafas Inter", sans-serif;
  font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.03em;
  color: rgb(0, 0, 0); text-align: left; white-space: pre;
}

/* in-view reveals (live: replay both ways at 50% visible; springs fitted to live samples, see tools/generators/el-hero/springs.py) */
.nf-el-hero__name-wrap[data-el-hero-inview] {
  opacity: 0;
  transition: opacity 808ms linear(0, 0.0245, 0.0854, 0.1674, 0.2595, 0.3541, 0.4461, 0.532, 0.61, 0.6793, 0.7396, 0.7912, 0.8348, 0.8711, 0.9009, 0.9251, 0.9444, 0.9597, 0.9716, 0.9808, 0.9877, 0.9928, 0.9965, 0.9991, 1.0008, 1.0019, 1.0026, 1.0029, 1.003, 1.0029, 1.0027, 1.0024, 1.0022, 1.0019, 1.0016, 1.0014, 1.0011, 1.0009, 1.0008, 1.0006, 1);
}
.nf-el-hero__wv-wrap[data-el-hero-inview] {
  opacity: 0;
  transition: opacity 670ms linear(0, 0.0239, 0.0832, 0.1629, 0.2526, 0.3448, 0.4345, 0.5186, 0.5952, 0.6635, 0.7233, 0.7749, 0.8188, 0.8556, 0.8862, 0.9114, 0.9318, 0.9483, 0.9614, 0.9717, 0.9797, 0.9859, 0.9906, 0.994, 0.9966, 0.9984, 0.9997, 1.0005, 1.0011, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0012, 1.0011, 1.001, 1.0008, 1.0007, 1.0006, 1);
}
.nf-el-hero__pill[data-el-hero-inview] {
  opacity: 0; transform: translateY(-8px);
  transition-property: opacity, transform;
  transition-duration: 1037ms;
  transition-timing-function: linear(0, 0.035, 0.12, 0.2314, 0.3524, 0.4716, 0.5819, 0.6794, 0.7624, 0.8307, 0.8853, 0.9275, 0.9591, 0.9819, 0.9976, 1.0078, 1.0138, 1.0167, 1.0175, 1.0168, 1.0153, 1.0134, 1.0112, 1.0092, 1.0072, 1.0055, 1.0041, 1.0029, 1.002, 1.0012, 1.0007, 1.0003, 1, 0.9999, 0.9998, 0.9997, 0.9997, 0.9997, 0.9997, 0.9998, 1);
}
.nf-el-hero [data-el-hero-inview].is-inview { opacity: 1; }
.nf-el-hero__pill[data-el-hero-inview].is-inview { transform: none; }

/* ---------- "Watch Video" overlay (created by js/10-hero.js on open, appended to body like Framer's #overlay portal) ---------- */
.nf-el-hero-overlay__backdrop {
  position: fixed; inset: 0; z-index: 4;
  background-color: rgba(0, 0, 0, 0.8);
  user-select: none; -webkit-user-select: none;
  will-change: transform; outline: none;
}
.nf-el-hero-overlay__frame {
  position: fixed; top: 50%; left: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  flex: 0 0 auto; aspect-ratio: 1.78547 / 1; width: 1200px; height: auto;
}
.nf-el-hero-overlay__video {
  display: block; width: 100%; height: 100%;
  border-radius: 32px; object-fit: cover; object-position: 50% 50%;
  background-color: rgba(0, 0, 0, 0); cursor: auto;
}

/* ---------- desktop >= 1440 ---------- */
@media (min-width: 1440px) {
  .nf-el-hero__content { left: 46%; bottom: 988px; width: 826px; transform: translate(-50%); }
  .nf-el-hero__title-wrap { width: 685px; }
  .nf-el-hero__title { font-size: 52px; letter-spacing: normal; }
  .nf-el-hero__sep--rest { display: none; }
  .nf-el-hero__meta { flex-flow: column; gap: 48px; }
  .nf-el-hero__name { font-size: 30px; line-height: 1.25; }
}

/* ---------- tablet 810 to 1439.98 ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-el-hero__content { left: 50%; bottom: 996px; width: 690px; transform: translate(-50%); }
  .nf-el-hero__title-wrap { width: 552px; }
  .nf-el-hero__title { font-size: 48px; letter-spacing: -0.03em; }
  .nf-el-hero__sep--desk { display: none; }
  .nf-el-hero__meta { flex-flow: column; gap: 48px; }
  .nf-el-hero__name { font-size: 30px; line-height: 1.2; }
  .nf-el-hero-overlay__backdrop { z-index: 10; }
  .nf-el-hero-overlay__frame { z-index: 10; width: 700px; }
}

/* ---------- phone <= 809.98 ---------- */
@media (max-width: 809.98px) {
  /* live: Content sits at left 16px, bottom 62px, width 83% of the hero; here converted to the shade box */
  .nf-el-hero__content { left: 2764px; bottom: 1003px; width: calc((100% - 5497px) * 0.83); gap: 5px; }
  .nf-el-hero__title-wrap { width: 100%; }
  .nf-el-hero__title { font-size: 38px; letter-spacing: normal; }
  .nf-el-hero__sep--desk { display: none; }
  .nf-el-hero__meta { flex-flow: column; gap: 16px; }
  .nf-el-hero__name { font-size: 20px; line-height: 1.2; }
  .nf-el-hero__icon { width: 16px; }
  .nf-el-hero__wv { font-size: 14px; }
  .nf-el-hero-overlay__backdrop { z-index: 10; }
  .nf-el-hero-overlay__frame { z-index: 10; width: 325px; }
}

/* ---------- Fit the film player to the screen (Danny, 2026-10-19) ----------
   Phone: the full screen width minus a 16px margin each side. Every size: never taller than the visible screen (a
   short window or a phone held sideways still shows the whole film). Desktop / tablet keep their size when it fits.
   The vh line is the fallback for browsers without dvh. */
.nf-el-hero-overlay__frame { width: min(1200px, calc(100vw - 32px), calc((100vh - 32px) * 1.78547)); width: min(1200px, calc(100vw - 32px), calc((100dvh - 32px) * 1.78547)); height: auto; aspect-ratio: 1.78547 / 1; }
@media (min-width: 810px) and (max-width: 1439.98px) { .nf-el-hero-overlay__frame { width: min(700px, calc(100vw - 32px), calc((100vh - 32px) * 1.78547)); width: min(700px, calc(100vw - 32px), calc((100dvh - 32px) * 1.78547)); } }
@media (max-width: 809.98px) { .nf-el-hero-overlay__frame { width: min(calc(100vw - 32px), calc((100vh - 32px) * 1.78547)); width: min(calc(100vw - 32px), calc((100dvh - 32px) * 1.78547)); aspect-ratio: 1.78547 / 1; } }

/* Hero text 60px from the left at every width from 810, in line with the page content and with Antoine's page (live:
   30px at 1440, centred at 1000-1280). The positioning layer starts at -2748px, as the phone rule's 2764px shows. QC 2026-10-28. */
@media (min-width: 810px) { .nf-el-hero__content { left: 2808px; transform: none; } }