/* 03 — FACE + DIAGRAM (V3). Section Y 1547.84..2342.84 (h 795).
   Positions below are minus 1547.84. */
.s-face { height: 795px; }

.s-face__media {
  position: absolute;
  left: 3px; top: 0;
  width: 1912px; height: 791px;  /* design card 1548..2338; 4px olive gap follows */
  border-radius: 40px;
  overflow: hidden;
  background: #4a3c28;
}
.s-face__media-inner {
  position: absolute;
  inset: -40px;
  will-change: transform;
}
/* fallback poster (blurred still) — replaced by the video when it plays */
.s-face__poster {
  position: absolute;
  inset: 0;
  background-image: url("../assets/face-poster-v3.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(14px);
}
/* the designed section video: face + rings + labels + quote, all baked in */
.s-face__video {
  position: absolute;
  inset: 40px;   /* undo the parallax overscan: exact 1912×795 box */
  display: none;
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  object-fit: cover;
}
.s-face.has-video .s-face__video { display: block; }
.s-face.has-video .s-face__poster,
.s-face.has-video .s-face__quote,
.s-face.has-video .s-face__diagram { display: none; }

.s-face__quote {
  position: absolute;
  left: 114px; top: 44px;   /* design (114,1592) */
  width: 567px;
  margin: 0;
  font-family: "Marund3222";
  font-size: 32px;
  line-height: 1.116;
  text-transform: uppercase;
  color: #e2e5ee;
}

.s-face__diagram {
  position: absolute;
  left: 0; top: 0;
  width: 1920px; height: 795px;
  pointer-events: none;
}

.s-face__ring { position: absolute; }
.s-face__ring--outer   { left: 565px;   top: 78.2px;   width: 838px;    height: 642.6px; }   /* y1626 */
.s-face__ring--mid     { left: 605.65px; top: 163.4px; width: 613.75px; height: 472.11px; }  /* y1711.24 */
.s-face__ring--bubbles { left: 646.32px; top: 288.2px; width: 486.69px; height: 222.36px; }  /* y1836 */

.s-face__label {
  position: absolute;
  margin: 0;
  font-family: "Marund3222";
  font-size: 25px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #dbe0ec;
  white-space: nowrap;
  transform-origin: 50% 50%;
  pointer-events: auto;
}
.s-face__label--looking   { left: 702.7px;  top: 376.2px; }  /* y1924 */
.s-face__label--satisfied { left: 938px;    top: 376.2px; }
.s-face__label--healthy   { left: 1253.5px; top: 377.2px; }