/* =====================================================================
   SHARED SITE FOOTER  (clients + marquee + footer)
   Single source of truth — loaded by every page after its inline <style>
   so these rules are authoritative. Edit here to change the footer
   everywhere at once.
   ===================================================================== */

/* floating brand elements (footer uses .el / .flo / .flo2) */
.el{position:absolute;pointer-events:none;z-index:0;will-change:transform}
.el .flo{animation:float 8s ease-in-out infinite}
.el .flo2{animation:float2 10s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-42px) rotate(4deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(46px) rotate(-5deg)}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* dark wrapper */
.dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.foot-inner{position:relative}

/* ===== DESKTOP: fixed footer reveal (main slides up over the pinned footer) ===== */
@media(min-width:901px) and (min-height:760px){
  main{position:relative;z-index:2;background:var(--paper);margin-bottom:100vh;box-shadow:0 50px 70px -26px rgba(58,24,85,.55)}
  #contact{position:fixed;left:0;right:0;bottom:0;height:100vh;z-index:0;overflow:hidden}
  .foot-inner{min-height:100vh;display:flex;flex-direction:column;will-change:transform}
  .foot-inner>.clients,.foot-inner>.marquee,.foot-inner>footer.foot{width:100%}
  #contact .clients{padding-top:88px;padding-bottom:24px}
  #contact footer.foot{margin-top:auto;padding-top:0}
}

/* ===== CLIENTS ===== */
.clients{padding-top:170px;padding-bottom:96px}
.clients h2{font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;line-height:1.04;font-size:clamp(30px,4.2vw,56px);max-width:15ch;margin:0 0 14px}
@media(min-width:901px){.clients h2{max-width:66.666vw}}
.clients h2 em{font-style:normal;color:var(--yellow)}
.clients .sub{font-family:var(--font-mono);font-size:17px;letter-spacing:.08em;color:rgba(255,255,255,.5);margin-bottom:48px}

/* ===== MARQUEE ===== */
.marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(var(--mshift,-50%))}}
.mtrack{display:flex;align-items:center;gap:90px;width:max-content;animation:marq var(--mdur,40s) linear infinite;will-change:transform}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack img{height:74px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.62;transition:opacity .3s}
.mtrack img:hover{opacity:1}

/* ===== FOOTER ===== */
footer.foot{padding-top:96px}
.foot-cta{padding:0 0 44px;border-top:1px solid rgba(255,255,255,.1);padding-top:48px}
.foot-cta .small{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:26px}
.foot-mail{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,4.2vw,56px);letter-spacing:-.03em;line-height:1.04;display:inline-flex;align-items:center;gap:.26em;transition:color .3s}
.foot-mail:hover{color:var(--yellow)}
.foot-mail .ar{width:.6em;height:.6em;flex:none}
.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 0 36px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.foot-bar .logo{height:38px;opacity:1;filter:brightness(0) invert(1)}
.foot-links{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.foot-links a{position:relative;font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);padding:4px 0}
/* social as text links (desktop) — sit on the same row after Contact */
.fl-social{}
@media(min-width:901px){ .foot-bottom .foot-social{display:none} }
.foot-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:currentColor;transition:width .3s}
.foot-links a:hover::after{width:100%}
.foot-copy{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.foot-bottom{display:flex;align-items:center;gap:16px}
.foot-social{display:flex;gap:10px}
.foot-social a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);transition:.25s}
.foot-social a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
.foot-social svg{width:16px;height:16px}

/* ===== MOBILE (<=900px): footer flows normally, tightened + white logos ===== */
@media(max-width:900px){
  .clients{padding-top:140px;padding-bottom:24px}
  .marquee{margin-bottom:6px}
  .mtrack img{opacity:1}
  footer.foot{padding-top:8px}
  .foot-cta{padding-top:32px;padding-bottom:36px}
  .foot-mail{font-size:clamp(18px,6vw,30px)}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:32px}
  .foot-bar .logo{filter:brightness(0) invert(1)}
  .fl-social{display:none}
  .foot-links{width:100%;gap:8px;justify-content:space-between}
  .foot-links a{font-size:11px;letter-spacing:.06em}
  .foot-social a{color:#fff}
  .foot-social svg{filter:brightness(0) invert(1)}
  .foot-bottom{width:100%;justify-content:space-between}
}