/* ===== Testimonials Antoine / Hero (live "Hero", framer-nv3tqx). Values are live computed styles. ===== */
.nf-an-hero {
  /* springs fitted to live rAF samples (framer-motion; same curve in and out):
     name omega 12.25 zeta 0.91, pill omega 11.25 zeta 0.80 (y overshoots 1.5%), label omega 14.25 zeta 0.90 */
  --nf-an-hero-name-ease: linear(0, 0.0076, 0.0281, 0.0586, 0.0965, 0.1397, 0.1865, 0.2355, 0.2854, 0.3355, 0.3848, 0.4328, 0.4792, 0.5235, 0.5656, 0.6053, 0.6425, 0.6772, 0.7094, 0.7391, 0.7665, 0.7916, 0.8145, 0.8354, 0.8543, 0.8714, 0.8869, 0.9008, 0.9132, 0.9243, 0.9343, 0.9431, 0.9509, 0.9578, 0.9639, 0.9692, 0.9739, 0.978, 0.9816, 0.9847, 0.9874, 0.9897, 0.9916, 0.9933, 0.9947, 0.996, 0.997, 0.9978, 1);
  --nf-an-hero-name-dur: 502ms;
  --nf-an-hero-pill-ease: linear(0, 0.0134, 0.049, 0.1004, 0.1626, 0.2313, 0.3033, 0.3759, 0.4471, 0.5154, 0.5797, 0.6394, 0.6941, 0.7434, 0.7875, 0.8265, 0.8606, 0.89, 0.9153, 0.9366, 0.9545, 0.9692, 0.9812, 0.9908, 0.9983, 1.0041, 1.0083, 1.0114, 1.0134, 1.0146, 1.0151, 1.0151, 1.0147, 1.0141, 1.0132, 1.0122, 1.0111, 1.01, 1.0089, 1.0079, 1.0069, 1.0059, 1.0051, 1.0043, 1.0036, 1.0029, 1.0024, 1.0019, 1);
  --nf-an-hero-pill-dur: 732ms;
  --nf-an-hero-label-ease: linear(0, 0.0108, 0.0395, 0.0811, 0.1316, 0.1879, 0.2473, 0.308, 0.3682, 0.4269, 0.4833, 0.5367, 0.5868, 0.6333, 0.6761, 0.7152, 0.7508, 0.7829, 0.8117, 0.8374, 0.8603, 0.8805, 0.8983, 0.9139, 0.9275, 0.9393, 0.9495, 0.9583, 0.9658, 0.9722, 0.9776, 0.9822, 0.986, 0.9892, 0.9919, 0.994, 0.9958, 0.9972, 0.9984, 0.9993, 1, 1.0005, 1.0009, 1.0012, 1.0013, 1.0015, 1.0015, 1.0015, 1);
  --nf-an-hero-label-dur: 519ms;
  --nf-an-hero-sfns-medium: SFProText-Medium, "SF Pro Text", "Nafas Inter", sans-serif;
  position: relative;
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0;
  width: 100%; height: 700px; padding: 0;
  overflow: clip;
}

/* Text column: absolute, anchored bottom-left, above the shade (z 1) */
.nf-an-hero__content {
  position: absolute; left: 60px; bottom: 84px; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 30px;
  width: 826px; height: min-content; padding: 0;
  overflow: hidden;
}
.nf-an-hero__title-wrap {
  position: relative; flex: 0 0 auto; width: 552px; height: auto;
  will-change: transform;
  /* load appear (live WAAPI): opacity 0.001 -> 1, translateY(50px) -> none, 600ms, delay 100ms, ease 0.44,0,0.56,1 */
  animation: nf-an-hero-appear 600ms cubic-bezier(0.44, 0, 0.56, 1) 100ms both;
}
@keyframes nf-an-hero-appear {
  from { opacity: 0.001; transform: translateY(50px); }
  to { opacity: 1; transform: none; }
}
.nf-an-hero__title {
  margin: 0;
  font-family: var(--nf-an-hero-sfns-medium); font-weight: 500;
  font-size: 52px; line-height: 1.15; letter-spacing: -0.03em;
  color: var(--nf-white); text-align: start;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

.nf-an-hero__meta {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 48px;
  width: 100%; height: min-content; padding: 0;
  overflow: clip;
}
.nf-an-hero__name-wrap { position: relative; flex: 0 0 auto; width: 100%; order: 0; }
.nf-an-hero__name {
  margin: 0;
  font-family: var(--nf-an-hero-sfns-medium); font-weight: 500;
  font-size: 30px; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--nf-white); text-align: left;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}

/* "Watch Video" pill: no hover or press state on live (cursor only) */
.nf-an-hero__btn {
  position: relative; flex: 0 0 auto; order: 1;
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px;
  width: min-content; height: min-content; padding: 8px 16px;
  background-color: var(--nf-white); border-radius: 99px;
  overflow: clip; cursor: pointer;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.nf-an-hero__btn:focus { outline: none; }
.nf-an-hero__btn:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 2px; }
.nf-an-hero__icon { position: relative; flex: 0 0 auto; display: block; width: 20px; aspect-ratio: 1 / 1; }
.nf-an-hero__icon svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.nf-an-hero__btn-label { position: relative; flex: 0 0 auto; width: auto; height: auto; }
.nf-an-hero__btn-text {
  margin: 0;
  font-family: var(--nf-an-hero-sfns-medium); font-weight: 500;
  font-size: 20px; line-height: 1.2; letter-spacing: -0.03em;
  color: var(--nf-black); text-align: left; white-space: pre;
}

/* In-view reveals (live framer-motion, replay at 50% visible): hidden state until js adds .is-in */
.nf-an-hero__name-wrap { opacity: 0; transition: opacity var(--nf-an-hero-name-dur) var(--nf-an-hero-name-ease); }
.nf-an-hero__name-wrap.is-in { opacity: 1; }
.nf-an-hero__btn {
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--nf-an-hero-pill-dur) var(--nf-an-hero-pill-ease), transform var(--nf-an-hero-pill-dur) var(--nf-an-hero-pill-ease);
}
.nf-an-hero__btn.is-in { opacity: 1; transform: none; }
.nf-an-hero__btn-label { opacity: 0; transition: opacity var(--nf-an-hero-label-dur) var(--nf-an-hero-label-ease); }
.nf-an-hero__btn.is-in .nf-an-hero__btn-label { opacity: 1; }

/* Background film + 20% shade */
.nf-an-hero__media {
  position: relative; flex: 1 0 0px;
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0;
  width: 1px; height: 100%; padding: 0;
  overflow: clip;
}
.nf-an-hero__video {
  display: block; flex: 0 0 auto;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  background-color: rgba(0, 0, 0, 0);
}
.nf-an-hero__shade {
  position: absolute; inset: -941px -2749px -941px -2748px; z-index: 0;
  background-color: rgba(0, 0, 0, 0.2);
  overflow: clip;
  pointer-events: none;
}

/* Film overlay (portalled to <body> by js). z 4 like live: above the desktop nav bar (z 3 here, 2 on live),
   below the tablet/phone nav (z 10 on both). */
.nf-an-hero__overlay[hidden] { display: none; }
.nf-an-hero__backdrop {
  position: fixed; inset: 0; z-index: 4;
  background-color: rgba(0, 0, 0, 0.8);
  user-select: none; -webkit-user-select: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.12, 0.23, 0.5, 1);
}
.nf-an-hero__overlay.is-open .nf-an-hero__backdrop {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.5, 0, 0.88, 0.77);
}
.nf-an-hero__player {
  position: fixed; top: 50%; left: 50%; z-index: 4;
  width: 1200px; height: auto; aspect-ratio: 1.78547 / 1;
  transform: translate(-50%, -50%);
}
.nf-an-hero__film {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  border-radius: 32px; overflow: clip;
  background-color: rgba(0, 0, 0, 0);
}

/* ---------- Tablet (810 to 1439.98) ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-an-hero__content { width: 690px; }
  .nf-an-hero__title { font-size: 48px; }
  .nf-an-hero__meta { gap: 16px; }
  .nf-an-hero__player { width: 700px; }
}

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-an-hero__content { left: 16px; bottom: 32px; width: 300px; gap: 5px; }
  .nf-an-hero__title-wrap { width: 100%; }
  .nf-an-hero__title { font-size: 38px; line-height: 1.1; }
  .nf-an-hero__meta { gap: 16px; }
  .nf-an-hero__name { font-size: 24px; line-height: 1.25; }
  .nf-an-hero__icon { width: 16px; }
  .nf-an-hero__btn-text { font-size: 16px; line-height: 1.25; }
  .nf-an-hero__media { align-items: flex-end; }
  .nf-an-hero__player { width: 325px; aspect-ratio: 1.78571 / 1; }
  .nf-an-hero__film { border-radius: 24px; }
}

/* ---------- 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-an-hero__player { 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-an-hero__player { 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-an-hero__player { 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; } }

/* Phone Watch Video pill: same size as Elodie, Ayoub and Rene (14px text) (QC 2026-10-28). */
@media (max-width: 809.98px) { .nf-an-hero__btn-text { font-size: 14px; line-height: 1.2; } }