/* ==========================================================
   Known Media — atmosphere & extra sections (loaded after styles.css)
   ========================================================== */

/* ---------- 1. film grain over the whole page ---------- */
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: kmGrain 1.2s steps(6) infinite; }
@keyframes kmGrain { 0% { background-position: 0 0; } 20% { background-position: -40px 30px; } 40% { background-position: 30px -50px; } 60% { background-position: -25px -15px; } 80% { background-position: 45px 40px; } 100% { background-position: 0 0; } }

/* ---------- 2. warm light leaks + subtle grid behind sections ---------- */
.hero, #work, #team, #reel { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 78% 42%, rgba(184, 50, 42, .16), transparent 70%),
    radial-gradient(30% 40% at 12% 8%, rgba(232, 160, 110, .18), transparent 70%),
    radial-gradient(35% 45% at 95% 95%, rgba(122, 31, 28, .1), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(122, 31, 28, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 31, 28, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 70% at 72% 45%, #000 0%, transparent 75%); }
#reel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 60% at 75% 50%, rgba(184, 50, 42, .14), transparent 70%), radial-gradient(30% 50% at 5% 80%, rgba(232, 160, 110, .14), transparent 70%); }

/* big outlined film words in the background */
#work::before, #team::before { position: absolute; z-index: -1; pointer-events: none; font: 900 clamp(120px, 19vw, 300px)/.8 var(--f);
  letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(122, 31, 28, .1); white-space: nowrap; }
#work::before { content: "ACTION"; top: clamp(20px, 4vw, 50px); right: -2vw; }
#team::before { content: "KNOWN"; bottom: -.32em; left: -1vw; }
#team, #work { overflow: hidden; }

/* ---------- 3. hero: camera viewfinder + floating notifications ---------- */
.fan { overflow: visible; }
.vf { position: absolute; inset: -4% -2% -2% -4%; pointer-events: none; z-index: 0; }
.vf i { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(20, 16, 16, .55); }
.vf .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.vf .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.vf .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.vf .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.vf span { position: absolute; font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: rgba(20, 16, 16, .7); }
.vf .rec { top: 12px; left: 46px; display: inline-flex; align-items: center; gap: 7px; color: var(--red); }
.vf .rec b { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(184, 50, 42, .16); animation: kmBlink 1.2s steps(2, start) infinite; }
.vf .tc { top: 12px; right: 46px; font-variant-numeric: tabular-nums; }
.vf .fmt { bottom: 12px; right: 46px; }
@keyframes kmBlink { to { visibility: hidden; } }

.flt { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(60, 20, 15, .16), 0 0 0 1px rgba(20, 16, 16, .05); font-size: 13px; line-height: 1.2; color: var(--ink);
  animation: kmFloat 6s ease-in-out infinite; }
.flt b { display: block; font-weight: 800; font-size: 14px; }
.flt small { display: block; color: var(--mu); font-size: 12px; }
.flt .fi { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.flt .fi svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fi-eye { background: linear-gradient(135deg, #1b1414, #463d3a); }
.fi-heart { background: linear-gradient(135deg, #e0453a, #b8322a); }

.fi-msg { background: linear-gradient(135deg, #8f2620, #5c1514); }
.flt.f1 { top: 14%; left: -6%; }
.flt.f2 { top: 46%; right: -8%; animation-delay: -2s; }
.flt.f3 { bottom: 8%; left: 2%; animation-delay: -4s; }
@keyframes kmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- 4. crossing marquee bands ---------- */
.mq { position: relative; height: clamp(150px, 16vw, 210px); overflow: hidden; margin-block: clamp(-30px, -2vw, -10px); }
.mq-band { position: absolute; left: -5%; width: 110%; padding: 15px 0; overflow: hidden; white-space: nowrap; }
.mq-band.b1 { top: 50%; transform: translateY(-50%) rotate(-3deg); background: var(--ox); color: #fff; z-index: 2; box-shadow: 0 18px 40px rgba(122, 31, 28, .25); }
.mq-band.b2 { top: 50%; transform: translateY(-50%) rotate(2.2deg); background: var(--ink); color: rgba(255, 255, 255, .85); }
.mq-track { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; animation: kmMarquee 38s linear infinite; }
.b2 .mq-track { animation-direction: reverse; animation-duration: 46s; }
.mq-track span { font: 800 clamp(18px, 2vw, 26px)/1 var(--f); letter-spacing: -.02em; text-transform: uppercase; }
.mq-track i { font-style: normal; color: #f2a48f; font-size: 14px; }
.b2 .mq-track i { color: var(--red); }
@keyframes kmMarquee { to { transform: translateX(-50%); } }

/* ---------- 6. softer section edges (no hard colour cuts) ---------- */
.alt { position: relative; }
.alt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; z-index: 0;
  background: linear-gradient(var(--bg), transparent); }
.alt > .wrap { position: relative; z-index: 1; }

/* ---------- 7. sticky call bar on phones ---------- */
.mcta { display: none; }
@media (max-width: 760px) {
  .mcta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55; display: flex; gap: 8px;
    padding: 8px; border-radius: 20px; background: rgba(246, 242, 236, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 16px 40px rgba(20, 16, 16, .18), 0 0 0 1px rgba(20, 16, 16, .06);
    transform: translateY(140%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .mcta.on { transform: none; }
  .mcta .btn.pri { flex: 1; justify-content: center; }
  .mcta .btn.wa { width: 52px; padding: 0; justify-content: center; }
  .mcta .btn.wa svg { width: 22px; height: 22px; color: #1fa855; }
  footer { padding-bottom: 96px; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .flt.f1 { left: 0; } .flt.f2 { right: 0; } .flt.f3 { left: 4%; }
}
@media (max-width: 560px) {
  .flt { font-size: 12px; padding: 7px 11px 7px 7px; border-radius: 13px; }
  .flt .fi { width: 28px; height: 28px; border-radius: 9px; }
  .flt b { font-size: 12.5px; } .flt small { font-size: 11px; }
  .flt.f1 { top: 6%; } .flt.f2 { top: 52%; } .flt.f3 { bottom: 2%; }
  .vf .fmt { display: none; }
  #work::before { font-size: 34vw; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .flt, .mq-track, .vf .rec b { animation: none !important; }
}

/* facts row: three short service points fit on one line each */
.facts strong { font-size: clamp(20px, 1.8vw, 25px); line-height: 1.12; }

/* ---------- success screen: clapperboard "take" ---------- */
.clap{position:relative;width:min(210px,64%);margin:0 auto 10px}
.clap>svg{display:block;width:100%;height:auto;overflow:visible}
.clap .slate-all{transform-box:fill-box;transform-origin:50% 100%}
.clap .stick{transform-box:fill-box;transform-origin:0% 100%}
.clap .burst path{stroke:var(--ox);stroke-width:3;stroke-dasharray:14;stroke-dashoffset:14;opacity:0}
.clap-ok{position:absolute;right:-26px;bottom:-18px;width:44px;height:44px;border-radius:50%;background:var(--ox);display:grid;place-items:center;box-shadow:0 10px 22px -8px rgba(122,31,28,.7),0 0 0 5px #f8f3ee;transform:scale(0)}
.clap-ok svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
.clap-rec{animation:clapRec 1.1s steps(2,start) infinite}
.fdone.on .clap{animation:clapIn .6s cubic-bezier(.2,1.3,.4,1) both}
.fdone.on .clap .stick{animation:clapStick 1.1s .1s both}
.fdone.on .clap .slate-all{animation:clapShake .32s .86s both}
.fdone.on .clap .burst path{animation:clapBurst .5s .84s ease-out both}
.fdone.on .clap .burst path:nth-child(2){animation-delay:.87s}.fdone.on .clap .burst path:nth-child(3){animation-delay:.9s}
.fdone.on .clap .sv{animation:clapFade .5s 1s both}
.fdone.on .clap-ok{animation:clapPop .55s 1.2s cubic-bezier(.2,1.6,.4,1) forwards}
.fdone.on .clap-ok svg{animation:clapDraw .35s 1.45s ease-out forwards}
.fdone.on .clap~h3{animation:clapUp .6s 1.25s cubic-bezier(.2,.8,.2,1) both}
.fdone.on .clap~p,.fdone.on .clap~.sum{animation:clapUp .6s 1.38s cubic-bezier(.2,.8,.2,1) both}
.fdone.on .clap~.send,.fdone.on .clap~.link{animation:clapUp .6s 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes clapIn{from{opacity:0;transform:translateY(-26px) rotate(-7deg) scale(.9)}}
@keyframes clapStick{0%{transform:rotate(-30deg)}60%{transform:rotate(-30deg);animation-timing-function:cubic-bezier(.75,0,1,.55)}70%{transform:rotate(0)}78%{transform:rotate(-5deg)}86%,100%{transform:rotate(0)}}
@keyframes clapShake{0%,100%{transform:none}30%{transform:translateY(2px) rotate(1.2deg)}60%{transform:translateY(-1px) rotate(-.6deg)}}
@keyframes clapBurst{0%{opacity:1;stroke-dashoffset:14}60%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:-14}}
@keyframes clapFade{from{opacity:0}}
@keyframes clapPop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1)}}
@keyframes clapDraw{to{stroke-dashoffset:0}}
@keyframes clapUp{from{opacity:0;transform:translateY(12px)}}
@keyframes clapRec{to{opacity:.25}}
@media (prefers-reduced-motion:reduce){.fdone.on .clap,.fdone.on .clap *,.fdone.on .clap~*{animation:none!important}.clap-ok{transform:none}.clap-ok svg{stroke-dashoffset:0}.clap-rec{animation:none}}

/* ---------- hero background: wall of our videos ---------- */
.hwall{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;animation:hwIn 1.6s cubic-bezier(.2,.8,.2,1) both}
.hw-cols{position:absolute;inset:-30% -10% -30% 18%;display:flex;gap:18px;transform:rotate(-9deg);
  -webkit-mask:linear-gradient(90deg,transparent 14%,#000 46%);mask:linear-gradient(90deg,transparent 14%,#000 46%)}
.hw-col{flex:1;display:flex;flex-direction:column;gap:18px;animation:hwUp 70s linear infinite;will-change:transform}
.hw-col:nth-child(even){animation-duration:85s;animation-direction:reverse}
.hw-col img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px;filter:grayscale(.15) blur(.6px) brightness(.9);opacity:.34;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.hw-shade{position:absolute;inset:0;background:radial-gradient(420px 380px at 74% 48%,rgba(15,12,12,.45),transparent 75%)}
.hwall.paused .hw-col{animation-play-state:paused}
@keyframes hwUp{to{transform:translateY(-50%)}}
@keyframes hwIn{from{opacity:0;filter:blur(16px)}}
@media (max-width:900px){
  .hw-cols{inset:-20% -30% -20% -10%;-webkit-mask:linear-gradient(180deg,transparent 0%,transparent 45%,#000 75%);mask:linear-gradient(180deg,transparent 0%,transparent 45%,#000 75%)}
  .hw-col:nth-child(n+4){display:none}
  .hw-col img{opacity:.2}
  .hw-shade{background:radial-gradient(70% 40% at 50% 70%,rgba(15,12,12,.55),transparent 75%)}
}
@media (prefers-reduced-motion:reduce){.hwall,.hw-col{animation:none}}

/* ---------- pricing v3: clear "how many videos" block, savings in euros ---------- */
#pricing .plans{align-items:stretch}
#pricing .plan.pop,#pricing .plan.pop:hover{transform:none!important;translate:none!important}
#pricing .plan.pop{box-shadow:0 30px 80px -30px rgba(224,69,58,.55),0 0 0 1px rgba(255,140,120,.35)!important}
#pricing .plan .cad{display:none}
#pricing .plan .pdesc{color:#c9bcb6!important;min-height:44px;font-size:15px!important}
#pricing .plan.pop .pdesc{color:#eadbd4!important}
.vblk{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#pricing .plan.pop .vblk{background:rgba(255,255,255,.07);border-color:rgba(255,160,140,.22)}
.vblk .vic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(224,69,58,.16);color:#ff8b7f;flex:none}
.vblk .vic svg{width:24px;height:24px}
.vblk .vn{font-size:44px;line-height:1;font-weight:900;letter-spacing:-.04em;color:#fff}
.vblk .vt{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.vblk .vt strong{font-size:16px;font-weight:800;color:#f4efe9}
.vblk .vt small{font-size:14px;color:#bfb1aa}
.per{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.per span{font-size:13.5px!important}
.per .save{font-style:normal;font-size:13.5px;font-weight:800;color:#86dcae;background:rgba(80,190,130,.13);padding:5px 11px;border-radius:999px}
#pricing .plan .btn{margin-top:auto}