/* v15 — Falú's pause control: a near-invisible sheet over the film. Hover, and
   two big parallel bars appear. Tap or click anywhere on the film to pause. */
.hero-pause{position:absolute;inset:0;z-index:3;margin:0;padding:0;border:0;background:transparent;cursor:pointer;opacity:.04;transition:opacity .45s ease;-webkit-tap-highlight-color:transparent}
.hero-pause:hover,.hero-pause:focus-visible{opacity:.92;outline:none}
.hero-pause .hp-bars{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:28px}
.hero-pause .hp-bars i{display:block;width:22px;height:132px;background:#fff;box-shadow:0 0 40px #00000066}
.hero-pause .hp-play{position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);width:0;height:0;border-left:118px solid #fff;border-top:72px solid transparent;border-bottom:72px solid transparent;filter:drop-shadow(0 0 40px #00000066);display:none}
.hero-pause:not(.is-playing) .hp-bars{display:none}
.hero-pause:not(.is-playing) .hp-play{display:block}
.hero-pause:not(.is-playing){opacity:.55}
@media (max-width:700px){.hero-pause .hp-bars i{width:14px;height:84px}.hero-pause .hp-bars{gap:18px}.hero-pause .hp-play{border-left-width:76px;border-top-width:46px;border-bottom-width:46px}}
@media (hover:none){.hero-pause{opacity:.0}.hero-pause:not(.is-playing){opacity:.55}}

/* v15 gallery covers — Falú 9/6: "a picture of a picture", heads cut off, too dark.
   The template scales every cover 1.24x, tilts it and anchors it to the bottom edge.
   Gallery pages get the photo as shot: no upscale, no tilt, faces kept, lighter veil. */
.j-photo-hero.v15-cover .j-cover{transform:none;object-position:50% 28%;transform-origin:50% 50%}
.j-photo-hero.v15-cover:after{background:linear-gradient(0deg,#0e0b09cc 0%,#0e0b0955 40%,#0e0b0900 75%)}
.j-photo-hero.v15-cover{background:#0e0b09}
.j-photo-hero.v15-cover[data-cover-pos="top"] .j-cover{object-position:50% 12%}
.j-photo-hero.v15-cover[data-cover-pos="mid"] .j-cover{object-position:50% 50%}

/* v15 testimonials — inline, three questions, no dialog */
.testimonial-card.is-open{outline:1px solid var(--accent,#c4653a);outline-offset:6px}
.testimonial-card.is-open .testimonial-play{opacity:1}
.t-panel{margin:34px 0 0;padding:30px 0 6px;border-top:1px solid var(--line,#3a322c)}
.t-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.t-head h3{font:600 clamp(28px,4vw,44px)/1.05 var(--display,inherit);margin:6px 0 6px}
.t-head p{margin:0;color:var(--muted,#9a8f84)}
.t-close{background:transparent;border:1px solid var(--line,#3a322c);color:var(--text,#f3ede4);padding:8px 12px;cursor:pointer;font-size:13px}
.t-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.t-clips figure{margin:0}
.t-clips video{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--panel,#1a1512);display:block}
.t-clips figcaption{padding:12px 2px 0;display:flex;flex-direction:column;gap:2px}
.t-clips figcaption b{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--accent,#c4653a)}
.t-clips figcaption span{color:var(--muted,#9a8f84);font-size:14px}
@media (max-width:820px){.t-clips{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.t-clips{grid-template-columns:1fr}.t-clips video{aspect-ratio:4/5}}

/* ---- phone hero, Falú 9/7: "too low... in the ground", "pause button is just white",
   "Apps, Automation, Photography, Film... move it down right outside the video" ---- */
@media (max-width:700px){
  .hero{min-height:100svh;height:auto}
  .hero-media{bottom:156px}                                   /* the film stops here; the strip lives below it */
  .hero:after{background:linear-gradient(0deg,#0e0b09 0,#0e0b09 150px,#0e0b0900 300px)}
  .hero-media:after{background:linear-gradient(90deg,#0e0b0999,#0e0b0920)}
  .hero-home-brand{top:52px;gap:10px}
  .hero-home-brand img{width:64px;height:68px}
  .hero-home-brand b{font-size:42px}
  .hero-home-brand span{font-size:10px}
  .hero-inner{padding-top:150px;padding-bottom:0}
  .hero-kicker{margin-bottom:18px}
  h1{font-size:22.5vw}
  .hero-aside{margin-top:18px;padding-bottom:180px}           /* room for the strip under the film */
  .hero-bottom{bottom:0;left:0;right:0;padding:16px 24px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg,#0e0b09);border-top:1px solid var(--line,#3a322c);z-index:2}
  .hero-bottom p{margin-bottom:12px}
  /* the control: small, see-through, out of the way */
  .hero-pause{inset:auto;top:auto;left:auto;right:16px;bottom:172px;width:44px;height:44px;opacity:.75;border:1px solid #ffffff66;border-radius:50%;background:#0e0b0966;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .hero-pause:not(.is-playing){opacity:.75}
  .hero-pause .hp-bars{gap:5px}
  .hero-pause .hp-bars i{width:3px;height:14px;box-shadow:none}
  .hero-pause .hp-play{display:block;transform:translate(-35%,-50%);border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:none}
  .hero-pause.is-playing .hp-play{display:none}
  .hero-pause:not(.is-playing) .hp-bars{display:none}
  .ambient-controls{top:auto;bottom:172px;right:68px}
}
@media (max-width:700px){
  /* strip in the flow, hero grows to fit, film stops exactly above it */
  .hero{display:flex;flex-direction:column}
  .hero-inner,.hero-aside{position:relative;z-index:1}
  .hero-aside{padding-bottom:34px}
  .hero-bottom{position:relative;margin-top:auto;height:150px;box-sizing:border-box;bottom:auto;left:auto;right:auto;padding:16px 24px 14px}
  .hero-media{bottom:150px}
  .hero:after{background:linear-gradient(0deg,#0e0b09 0,#0e0b09 150px,#0e0b0900 320px)}
  .hero-pause{bottom:166px;background:#0e0b0950;border:1px solid #ffffff28;opacity:.9}
  .hero-pause:not(.is-playing){opacity:.9}
  .hero-pause .hp-play{left:50%;top:50%;transform:translate(-30%,-50%)}
  .ambient-controls{bottom:166px;right:68px;opacity:.9;pointer-events:auto}
}
@media (max-width:700px){.hero-inner,.hero-aside,.hero-bottom{flex-shrink:0}}

/* ---- 9/7: pause control is the SAME small circle on every screen, bottom-right of the film.
   The big centre sheet is gone; it was "living in the middle of the video". ---- */
.hero-pause{inset:auto;top:auto;left:auto;right:calc(4vw + 54px);bottom:30px;width:44px;height:44px;opacity:.75;border:1px solid #ffffff44;border-radius:50%;background:#0e0b0966;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s}
.hero-pause:hover,.hero-pause:focus-visible{opacity:1}
.hero-pause:not(.is-playing){opacity:.75}
.hero-pause .hp-bars{gap:5px}
.hero-pause .hp-bars i{width:3px;height:14px;box-shadow:none}
.hero-pause .hp-play{display:block;transform:translate(-35%,-50%);border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:none}
.hero-pause.is-playing .hp-play{display:none}
.hero-pause:not(.is-playing) .hp-bars{display:none}
.ambient-controls{top:auto;bottom:30px;right:4vw;opacity:.75;pointer-events:auto}
@media (max-width:700px){.hero-pause{right:16px;bottom:166px}.ambient-controls{right:68px;bottom:166px}}

/* ---- 9/7: "Something you carry" fades out over 8 seconds, 56 seconds in, so the film is open ---- */
.hero.hero-clear .hero-inner,.hero.hero-clear .hero-aside{opacity:0;pointer-events:none}
.hero.hero-clear .hero-home-brand{opacity:.55}

/* ---- 9/7: the title types in softly — each letter blooms in, one after another (v15-fade.js splits it) ---- */
#hero-title.hero-typed .hero-soften,#hero-title.hero-typed .outline{white-space:nowrap}
.hero-inner:has(#hero-title.hero-typed){transition-delay:0s} /* the block comes up at once; the letters carry the entrance */
#hero-title.hero-typed .tch{opacity:0;filter:blur(7px);transition:opacity .9s ease,filter .9s ease;transition-delay:calc(.9s + var(--i) * 75ms)} /* plain inline: kerning pairs (yo, y.) survive */
#hero-title.hero-typed .outline .tch{filter:blur(2px)} /* a 1px stroke disappears under a 7px blur */
#hero-title.hero-typed.hero-typing .tch{opacity:1;filter:blur(0)}
@media (prefers-reduced-motion:reduce){#hero-title.hero-typed .tch{opacity:1;filter:none;transition:none}}