/* Knocky, the Team Knocknock mascot -------------------------------------
   Poses come from site_knocky() in lib/site.php (uploads/media/knocky-*.webp).
   Motion stays small and switches off under prefers-reduced-motion. */
.mil-knocky{display:block;height:auto;max-width:100%}

/* Homepage hero: muted knock loop, the still as poster and reduced-motion fallback */
.mil-hero-img-frame .mil-hero-img .mil-hero-video,
.mil-hero-img-frame .mil-hero-img .mil-hero-still{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;object-position:70% bottom}
.mil-hero-img-frame .mil-hero-img .mil-hero-still{display:none}

/* Footer: Knocky waves next to "Opportunity knocks but once" */
.mil-footer-contact .mil-knocky-footer{width:150px;margin-left:auto;flex-shrink:0;transform-origin:50% 100%}
.mil-footer-contact:hover .mil-knocky-footer{animation:mil-knocky-bob .9s ease-in-out 2}
@media (max-width:768px){.mil-footer-contact .mil-knocky-footer{width:110px;margin-left:0}}

/* Call to action: Knocky knocks on the picture next to the text ("the door") */
.mil-has-knocky .mil-knocky-cta{position:absolute;right:3%;bottom:48px;width:160px;z-index:3;pointer-events:none}
@media (max-width:992px){.mil-has-knocky .mil-knocky-cta{display:none}}

/* 404 and Influencer Lab application success */
.mil-knocky-404{width:220px;margin:0 auto}
.mil-knocky-apply{width:160px;margin:0 auto 20px}

/* Form thank-you (?sent=contact|newsletter) */
.mil-knocky-toast{position:fixed;right:24px;top:104px;z-index:9999990;display:flex;align-items:center;gap:14px;max-width:min(440px,calc(100vw - 48px));padding:14px 44px 14px 14px;background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(30,30,50,.28);color:#1E1E32;font-family:var(--font-primary),sans-serif;animation:mil-knocky-toast-in .45s cubic-bezier(0,0,.3642,1) both,mil-knocky-toast-out .4s ease-in 10s forwards}
.mil-knocky-toast .mil-knocky{width:84px;flex-shrink:0}
.mil-knocky-toast-text{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45;color:#5a5a6a}
.mil-knocky-toast-text strong{font-size:16px;font-weight:600;color:#1E1E32}
.mil-knocky-toast-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#1E1E32;font-size:22px;line-height:1;cursor:pointer}
.mil-knocky-toast-close:hover{background:rgba(30,30,50,.08)}
@media (max-width:768px){.mil-knocky-toast{left:12px;right:12px;top:84px;max-width:none}}

/* Market-entry pages: AI-labelled scene with Knocky (templates/enter-market.php) */
.mil-ep-knocky-row{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center;max-width:1040px;margin:0 auto}
.mil-ep-knocky-fig{margin:0}
.mil-ep-knocky-fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:22px;box-shadow:0 24px 60px rgba(30,30,50,.18)}
.mil-ep-knocky-fig figcaption{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;line-height:1.45;color:#7a7a7a}
.mil-ep-ai-badge{flex-shrink:0;font:700 10px/1 var(--font-primary),sans-serif;letter-spacing:.08em;color:#fff;background:#1E1E32;padding:5px 7px;border-radius:5px}
.mil-ep-knocky-text .mil-ep-lead{margin:18px 0 0}
.mil-ep-knocky-text .mil-stylized{margin-bottom:14px}
@media (max-width:768px){.mil-ep-knocky-row{grid-template-columns:1fr}.mil-ep-knocky-fig{max-width:320px;margin:0 auto}.mil-ep-knocky-text{text-align:center}}

/* About: Meet the Knockers (lib/blocks/knockers.php) */
.mil-knockers-head{text-align:center;margin-bottom:50px}
.mil-knockers-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.mil-knockers-card{margin:0;width:calc(25% - 21px);min-width:200px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(30,30,50,.08);transition:transform .35s cubic-bezier(0,0,.3642,1)}
.mil-knockers-card img{display:block;width:100%;height:auto}
.mil-knockers-card figcaption{display:flex;flex-direction:column;gap:4px;padding:6px 20px 22px;text-align:center}
.mil-knockers-card figcaption strong{font-family:var(--font-secondary),sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em;color:#1E1E32;text-transform:uppercase}
.mil-knockers-card figcaption span{font-size:14px;color:#D82549}
.mil-knockers-card:hover{transform:translateY(-4px)}
@media (max-width:768px){.mil-knockers-grid{gap:16px}.mil-knockers-card{width:calc(50% - 8px);min-width:0}.mil-knockers-card figcaption{padding:4px 10px 16px}.mil-knockers-card figcaption strong{font-size:16px}.mil-knockers-card figcaption span{font-size:12px}}

/* Knocky waving beside the floating WhatsApp button (desktop only) */
.mil-floating-actions .mil-knocky-fab{position:absolute;right:58px;top:-14px;width:76px;max-width:none;pointer-events:none;transform-origin:80% 100%}
.mil-floating-actions:hover .mil-knocky-fab{animation:mil-knocky-bob .9s ease-in-out 2}
@media (max-width:992px){.mil-floating-actions .mil-knocky-fab{display:none}}

/* Influencer Lab: Knocky in the studio */
.mil-lab-knocky-lead{max-width:640px;margin:0 auto}
.mil-lab-knocky-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:960px;margin:0 auto}
.mil-lab-knocky-grid figure{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:#1E1E32;box-shadow:0 18px 50px rgba(30,30,50,.16)}
.mil-lab-knocky-grid video,.mil-lab-knocky-grid img{display:block;width:100%;height:100%;object-fit:cover}
.mil-lab-knocky-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:13px;color:#7a7a7a;text-align:center}
@media (max-width:768px){.mil-lab-knocky-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.mil-lab-knocky-grid figure{border-radius:14px}.mil-lab-knocky-note{align-items:flex-start;text-align:left}}

/* Contact page: Google map loads only on request (lib/blocks/basic.php) */
.mil-map-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;border:0;background:#1E1E32;color:#fff;font:500 16px/1.4 var(--font-primary),sans-serif;cursor:pointer;z-index:2}
.mil-map-load i{font-size:34px;color:#E52E51}
.mil-map-load small{max-width:300px;font-size:12px;color:rgba(255,255,255,.65);text-align:center}
.mil-map-load:hover span{text-decoration:underline}

/* Homepage quote band (lib/blocks/quote.php) */
.mil-quote-band{padding:clamp(70px,9vw,130px) 0}
.mil-quote-band-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,60px);max-width:1080px;margin:0 auto}
.mil-quote-band .mil-quote-band-knocky{width:150px;flex-shrink:0}
.mil-quote-band-text{margin:0;position:relative}
.mil-quote-band-text:before{content:"“";position:absolute;left:-.1em;top:-.55em;font:400 160px/1 var(--font-secondary),sans-serif;color:#E52E51;opacity:.18;pointer-events:none}
.mil-quote-band-q{font:400 clamp(32px,4.6vw,64px)/1.05 var(--font-secondary),sans-serif;color:#1E1E32;text-transform:uppercase;margin:0 0 22px}
.mil-quote-band-rest{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:#5a5a6a;margin:0;max-width:720px}
@media (max-width:768px){.mil-quote-band-row{flex-direction:column;text-align:center}.mil-quote-band .mil-quote-band-knocky{width:110px}.mil-quote-band-rest{margin:0 auto}}

/* Project cards: logo on the brand colour, portfolio cover on hover (site_project_card_face) */
.mil-pf-faced .mil-pf-face{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:16%}
.mil-pf-faced .mil-pf-face img.mil-pf-logo{position:static;width:auto;height:auto;max-width:min(64%,300px);max-height:min(42%,170px);object-fit:contain;transform:none!important}
.mil-pf-faced .mil-pf-namemark{font-family:var(--font-secondary),sans-serif;font-weight:400;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;text-align:center}
.mil-pf-faced img.mil-pf-hover{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
/* the square board sits whole on the card's brand colour, whatever the card's shape */
.mil-pf-faced .mil-pf-readmore{z-index:3}
@media (hover:hover){.mil-pf-card:hover .mil-pf-faced img.mil-pf-hover,.mil-work-card.mil-pf-faced:hover img.mil-pf-hover{opacity:1}}
.mil-pf-card:focus-visible .mil-pf-faced img.mil-pf-hover{opacity:1}
.mil-work-card.mil-pf-faced .mil-hover-frame{position:relative}

/* Knocky's feathers replace the 3D shapes (img/feathers/). The shapes filled their whole box and
   peeked in from off-screen; a slim feather sits in the middle of its box, so each one gets its
   own visible spot. The levitate animations from site.css keep running on the boxes. */
.mil-hero-1 .mil-shapes .mil-s-2,.mil-cta .mil-shapes .mil-s-2{top:-3vw;left:-7vw;bottom:auto;width:30vw}
.mil-hero-1 .mil-shapes .mil-s-2 img,.mil-cta .mil-shapes .mil-s-2 img{transform:rotate(-52deg)}
.mil-hero-1 .mil-shapes .mil-s-3,.mil-cta .mil-shapes .mil-s-3{top:24%;bottom:auto;right:-5vw;width:30vw}
.mil-hero-1 .mil-shapes .mil-s-3 img,.mil-cta .mil-shapes .mil-s-3 img{transform:rotate(18deg)}
/* the cream down feather tucks behind the first word, like the old white shape */
.mil-hero-1 .mil-hero-main .mil-hero-text .mil-word-frame .mil-s-4{top:-45%;bottom:auto;left:-12%;width:24%}
.mil-hero-1 .mil-hero-main .mil-hero-text .mil-word-frame .mil-s-4 img{transform:rotate(-24deg)}
.mil-cta .mil-shapes .mil-s-1{bottom:-2vw;left:4vw;width:14vw}
@media (max-width:768px){
  /* phones: only the gaps around the text are free */
  .mil-hero-1 .mil-shapes .mil-s-2,.mil-cta .mil-shapes .mil-s-2{top:auto;bottom:-4vw;left:-10vw;width:34vw}
  .mil-hero-1 .mil-shapes .mil-s-3,.mil-cta .mil-shapes .mil-s-3{top:57%;right:-9vw;width:28vw}
  .mil-hero-1 .mil-hero-main .mil-hero-text .mil-word-frame .mil-s-4{bottom:auto;top:-78%;left:-4%;width:15%}
  .mil-cta .mil-shapes .mil-s-1{width:24vw}
}

/* feathers float BEHIND the words. The text block is scaled by GSAP, which makes it its own
   layer, so the whole block (not just the words inside it) has to sit above the feathers. */
.mil-hero-1 .mil-shapes,.mil-cta .mil-shapes{z-index:0}
.mil-hero-1 .mil-hero-main .mil-hero-text{position:relative;z-index:2}
.mil-cta > .container{position:relative;z-index:2}
/* the cream down feather no longer sits on the headline: it falls down the page instead */
.mil-hero-1 .mil-word-frame .mil-s-4:has(img[src*="feather"]){display:none}

/* Falling feather: fixed to the screen, moved by site.js initFeatherFall() as the page scrolls.
   z-index -1 puts it behind the page content: it shows over the light page background and
   slips behind the text and behind sections with their own background. No clicks. */
.mil-feather-fall{position:fixed;top:0;left:0;z-index:-1;width:clamp(110px,11vw,210px);height:auto;pointer-events:none;opacity:0;will-change:transform;transform-origin:0 0;filter:drop-shadow(0 10px 14px rgba(30,30,50,.12));transition:opacity .6s ease}
.mil-feather-fall.is-on{opacity:.95}
@media (prefers-reduced-motion:reduce){.mil-feather-fall{display:none}}

/* Ventures/testimonials band: Knocky flies across instead of the 3D shape (lib/blocks/basic.php).
   The path element is scrubbed left to right by GSAP (.mil-parallax-x-img); the wings flap by
   swapping two frames; a slow bob keeps the glide alive between scroll steps. */
.mil-tapes-frame .mil-knocky-fly{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
.mil-knocky-fly-path{width:clamp(120px,13vw,200px);margin-top:-6%}
.mil-knocky-fly-bob{position:relative;display:block;aspect-ratio:513/520;animation:mil-knocky-glide 2.4s ease-in-out infinite;transform-origin:50% 60%}
.mil-knocky-fly-bob img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 16px 22px rgba(30,30,50,.18))}
.mil-knocky-fly-up{animation:mil-knocky-flap-a .44s steps(1,end) infinite}
.mil-knocky-fly-down{animation:mil-knocky-flap-b .44s steps(1,end) infinite}
@keyframes mil-knocky-flap-a{0%{opacity:1}50%{opacity:0}}
@keyframes mil-knocky-flap-b{0%{opacity:0}50%{opacity:1}}
@keyframes mil-knocky-glide{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-14px) rotate(-3deg)}}
@media (max-width:768px){.mil-knocky-fly-path{width:120px;margin-top:-14%}}

/* Customer logo slider (block partners_block): every logo carries the same visual weight (sized by
   area in lib/blocks/basic.php), shown in calm grey and in its own colours on hover. */
.mil-logo-marquee .mil-marquee-logo{width:auto;height:110px;margin:0 34px;opacity:1}
/* the list is about twice as long as before, so the loop takes twice as long: same speed */
.mil-logo-marquee .mil-logo-track{animation-duration:115s}
.mil-logo-marquee .mil-marquee-logo img{width:var(--lw);height:var(--lh);max-width:none;max-height:none;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter .35s ease,opacity .35s ease}
.mil-logo-marquee .mil-marquee-logo:hover img,.mil-logo-marquee .mil-marquee-logo:focus-visible img{filter:none;opacity:1}
.mil-logo-marquee span.mil-marquee-logo:hover{transform:none}
@media (max-width:768px){
  .mil-logo-marquee .mil-marquee-logo{height:80px;margin:0 20px}
  .mil-logo-marquee .mil-marquee-logo img{width:calc(var(--lw) * .72);height:calc(var(--lh) * .72)}
}

/* Phones: Knocky leads. On the homepage he knocks first, "Knock. Knock." follows under him;
   the CTA pose comes back at a phone size. The WhatsApp Knocky stays desktop-only: on a
   375px screen a floating mascot sits on top of the text. */
@media (max-width:768px){
  .mil-hero-1:has(.mil-hero-video){display:flex;flex-direction:column}
  .mil-hero-1:has(.mil-hero-video) .mil-hero-img-frame{order:-1;margin-top:110px}
  .mil-hero-1:has(.mil-hero-video) .mil-hero-img-frame .mil-hero-img{height:auto;aspect-ratio:16/11;padding-bottom:0}
  .mil-hero-1:has(.mil-hero-video) .mil-hero-main{height:auto;padding:32px 0 72px}
  .mil-hero-1:has(.mil-hero-video) .mil-hero-main .mil-hero-text{padding-top:0}
  .mil-footer-contact{position:relative}
  .mil-footer-contact .mil-knocky-footer{position:absolute;right:0;bottom:0;width:104px}
}
@media (max-width:576px){
  .mil-hero-1 .mil-hero-main .mil-hero-text{padding-left:16px;padding-right:16px}
  .mil-hero-1 .mil-hero-main .mil-display1{font-size:clamp(40px,14.5vw,64px)}
  .mil-hero-1 .mil-hero-main .mil-hero-eyebrow{white-space:normal;letter-spacing:.08em;line-height:1.5;max-width:320px;margin-left:auto;margin-right:auto}
}
@media (max-width:992px){
  .mil-has-knocky .mil-knocky-cta{display:block;right:auto;left:24px;bottom:-48px;width:112px}
}

@keyframes mil-knocky-bob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-4deg)}60%{transform:translateY(-1px) rotate(3deg)}}
@keyframes mil-knocky-toast-in{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes mil-knocky-toast-out{to{opacity:0;visibility:hidden;transform:translateY(-12px)}}

@media (prefers-reduced-motion:reduce){
  .mil-hero-img-frame .mil-hero-img .mil-hero-video{display:none}
  .mil-hero-img-frame .mil-hero-img .mil-hero-still{display:block}
  .mil-footer-contact:hover .mil-knocky-footer,.mil-floating-actions:hover .mil-knocky-fab{animation:none}
  .mil-knockers-card,.mil-knockers-card:hover{transition:none;transform:none}
  .mil-lab-knocky-grid video{display:none}
  .mil-lab-knocky-grid figure{background-size:cover;background-position:center}
  .mil-knocky-toast{animation:mil-knocky-toast-out .01s linear 12s forwards}
  .mil-pf-faced img.mil-pf-hover{transition:none}
  .mil-knocky-fly-bob,.mil-knocky-fly-up,.mil-knocky-fly-down{animation:none}
  .mil-knocky-fly-down{opacity:0}
}