/* ═══════════════════════════════════════════════════════════════
   DIRIGO — the two show blocks: the clients stage and the footer.
   Loaded last on every page, so it takes over blocks that
   sections.css and footer.css still style for paper.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ CLIENTS — a projection stage ═══════════════════════════════
   The company's own trick from the hero, a cliff turned into a screen:
   the client marks are thrown onto the stage as light. The travelling
   wave sections.js already writes to each tile (--c, 0→1) becomes the
   lighting cue that sweeps across the names. */
.clients{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(6.5rem,11vw,10rem) 0 clamp(7.5rem,13vw,12rem);
  border:0;color:#fff;
  background:
    radial-gradient(60% 55% at 80% 6%,rgba(143,216,245,.30) 0%,rgba(143,216,245,0) 70%),
    radial-gradient(55% 60% at 10% 100%,rgba(34,185,234,.34) 0%,rgba(34,185,234,0) 72%),
    linear-gradient(165deg,#031621 0%,#083d5a 46%,#1786b8 100%);
}
/* Two follow-spots crossing the stage. */
.clients::before,.clients::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-35%;bottom:-35%;width:clamp(110px,15vw,250px);
  background:linear-gradient(to right,rgba(190,236,255,0) 0%,rgba(190,236,255,.2) 50%,rgba(190,236,255,0) 100%);
  filter:blur(16px);
  animation:stage-beam 12s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.clients::before{left:6%;rotate:18deg}
.clients::after{left:60%;rotate:-24deg;animation-duration:15s;animation-delay:-6s}
@keyframes stage-beam{from{translate:-16vw 0}to{translate:24vw 0}}

/* The word itself, as a faint wall behind everything. A fill, not a
   stroke: text-stroke draws seams through overlapping Hebrew contours. */
.clients-ghost{
  position:absolute;z-index:0;inset-inline:0;top:56%;translate:0 -50%;
  text-align:center;white-space:nowrap;pointer-events:none;user-select:none;
  font-weight:800;letter-spacing:-.05em;line-height:.8;
  font-size:clamp(7rem,30vw,28rem);color:rgba(255,255,255,.055);
  animation:stage-ghost 26s ease-in-out infinite alternate;
}
@keyframes stage-ghost{from{transform:translateX(5%)}to{transform:translateX(-5%)}}

.clients .sec-head{position:relative;z-index:2;margin-bottom:clamp(3.5rem,7vw,6rem)}
.clients .sec-eyebrow{color:#8fd8f5}
.clients .sec-eyebrow::before{background:#8fd8f5}
.clients h2{color:#fff;font-size:clamp(3rem,8.6vw,7.4rem);letter-spacing:-.045em;line-height:.95}
.clients .sec-lede{color:rgba(255,255,255,.8)}
.clients .sec-lede strong{color:#fff}

/* Lanes lean back into the stage; stage.js flattens them as the section
   crosses the screen. Edges fade into the dark instead of cutting. */
.clients-lanes{
  position:relative;z-index:1;
  transform:perspective(1100px) rotateX(var(--tilt,14deg)) rotateZ(var(--spin,-3.5deg)) scale(1.1);
  transform-origin:50% 50%;
  -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(to left,transparent 0%,#000 13%,#000 87%,transparent 100%);
}
.clients .marquee::before,.clients .marquee::after{display:none}
.clients .marquee + .marquee{margin-top:clamp(1.2rem,3vw,2.4rem)}

.clients .logo-tile{
  position:relative;border:0;background:none;padding:.35rem;
  width:clamp(140px,14vw,210px);
  scale:calc(.9 + var(--c,0) * .16);
  transition:scale .25s linear;
}
/* The lit halo behind a mark as the cue passes over it. */
.clients .logo-tile::before{
  content:"";position:absolute;inset:-50% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(190,236,255,.42),rgba(143,216,245,0));
  opacity:var(--c,0);
}
/* The marks ship as white-on-transparent (assets/clients/w), so light and
   glow read on any ground without blend modes — which a transformed rail
   would isolate anyway. */
.clients .logo-tile img{
  filter:drop-shadow(0 0 calc(var(--c,0) * 14px) rgba(143,216,245,.95));
  opacity:calc(.42 + var(--c,0) * .58);
  transition:opacity .25s linear;
}
.clients .logo-tile:hover{border:0;transform:none;scale:1.12}
.clients .logo-tile:hover img{filter:drop-shadow(0 0 12px rgba(143,216,245,.95));opacity:1}

@media(max-width:900px){
  .clients{padding:5.5rem 0 7rem}
  .clients-lanes{transform:perspective(800px) rotateX(calc(var(--tilt,14deg) * .7)) rotateZ(calc(var(--spin,-3.5deg) * .8)) scale(1.14)}
  .clients .logo-tile{width:124px}
}
@media(prefers-reduced-motion:reduce){
  .clients::before,.clients::after,.clients-ghost{animation:none}
}


/* ═══ FOOTER — on paper ══════════════════════════════════════════
   White, like the rest of the page (Amir's call). The upgrade keeps its
   shape — the shimmering ask, the contact routes as large buttons, the
   work rolling past in full colour, the name filled with a photograph —
   with brand ink and cyan carrying the weight instead of a dark ground. */
.foot{
  isolation:isolate;color:var(--ink);
  background:var(--paper);border-block-start:1px solid var(--line);
}
.foot::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset-inline:-10%;top:-12%;height:70%;
  background:radial-gradient(48% 58% at 50% 26%,rgba(34,185,234,.11),rgba(34,185,234,0) 72%);
}

/* ── the ask ── */
.foot-cta{border-color:var(--line);padding-block:clamp(5.5rem,11vw,10rem) clamp(3.5rem,7vw,6rem)}
.foot-eyebrow{color:var(--blue)}
.foot-eyebrow::before{display:none}
.foot-big-text{
  font-size:clamp(2.9rem,9vw,8.2rem);line-height:.94;
  background:linear-gradient(100deg,#445867 0%,#1a72a7 34%,#22b9ea 46%,#8fd8f5 50%,#22b9ea 54%,#1a72a7 66%,#445867 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foot-shine 6.5s ease-in-out infinite;
}
@keyframes foot-shine{0%{background-position:100% 0}55%,100%{background-position:0% 0}}
.foot-arrow{
  width:clamp(60px,5.5vw,84px);border:0;
  background:var(--cyan);color:var(--ink);
  animation:foot-ping 2.8s ease-out infinite;
}
.foot-arrow::before{background:var(--ink)}
.foot-big:hover .foot-arrow{color:#fff;border-color:transparent}
@keyframes foot-ping{0%{box-shadow:0 0 0 0 rgba(34,185,234,.45)}70%,100%{box-shadow:0 0 0 16px rgba(34,185,234,0)}}
.foot-arrow svg{width:40%;height:40%}
/* A tap leaves :hover stuck on touch screens, which parks the ink disc
   half-grown over the arrow. */
@media(hover:none){
  .foot-big:hover .foot-arrow{color:var(--ink);transform:none}
  .foot-big:hover .foot-arrow::before{transform:scale(0)}
  .foot-big:hover .foot-arrow svg{transform:none}
}

.foot-quick{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
.foot-pill{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.5rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;
  color:var(--ink);font-size:clamp(1rem,1.4vw,1.16rem);font-weight:500;
  box-shadow:0 14px 30px -22px rgba(21,23,27,.35);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.foot-pill svg{width:20px;height:20px;flex:none;color:var(--blue);transition:color .4s var(--ease)}
.foot-pill:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.foot-pill:hover svg{color:var(--cyan)}
.foot-pill-main{background:#25d366;border-color:#25d366;color:#04210f}
.foot-pill-main svg{color:#04210f}
.foot-pill-main:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── the work, rolling ── */
.foot-reel{
  position:relative;overflow:hidden;direction:ltr;
  padding-block:clamp(2.2rem,4.5vw,3.6rem);
  rotate:-2deg;scale:1.05;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.foot-reel-track{display:flex;width:max-content;animation:foot-reel 64s linear infinite}
.foot-reel:hover .foot-reel-track{animation-play-state:paused}
/* Trailing margin rather than gap, so exactly half the track is one set
   and the -50% loop point lands without a jump. */
.foot-reel figure{
  flex:none;margin:0 16px 0 0;overflow:hidden;
  width:clamp(190px,21vw,320px);aspect-ratio:4/3;border-radius:14px;
  box-shadow:0 28px 54px -28px rgba(21,23,27,.42),0 0 0 1px rgba(21,23,27,.06);
}
.foot-reel figure:nth-child(even){translate:0 18px}
.foot-reel img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.foot-reel figure:hover img{transform:scale(1.08)}
@keyframes foot-reel{to{transform:translateX(-50%)}}

/* ── columns ── */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr;border-top:1px solid var(--line)}
.foot-brand img{width:170px}
.foot-col h3{color:var(--blue)}

/* ── the name, filled with the turquoise bay ── */
.foot-mark span{
  background-image:url("../w3/footmark-w26.webp");
  background-size:cover;background-position:30% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:foot-pan 20s ease-in-out infinite alternate;
}
@keyframes foot-pan{from{background-position:0% 45%}to{background-position:100% 60%}}

/* Hebrew labels: wide tracking pulls the letters of a Hebrew word apart
   until it stops reading as a word — footer.css set it for English. */
.foot-eyebrow,.foot-col h3{letter-spacing:.04em;font-weight:600;text-transform:none}

@media(max-width:900px){
  .foot-arrow{width:60px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-reel figure{width:200px;border-radius:12px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .foot-pill{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .foot-big-text,.foot-arrow,.foot-mark span{animation:none}
  .foot-reel-track{animation:none}
}