/* =========================================================
   Headworks — brand showcase (auto-running rails)
   Used by work.html and the service pages.
   ========================================================= */

.hw-brands{padding:40px 0 20px}
.hw-brand{padding:52px 0 60px;border-top:1px solid rgba(242,241,237,.08);position:relative}
.hw-brand:first-child{border-top:0}
.hw-brand-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:0 clamp(18px,5vw,80px);margin-bottom:26px;
}
.hw-brand-id{display:flex;align-items:center;gap:18px;min-width:0}
.hw-logo{
  width:96px;height:96px;flex:none;border-radius:20px;background:rgba(242,241,237,.06);
  border:1px solid rgba(242,241,237,.1);display:grid;place-items:center;padding:12px;
  transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .5s;
}
.hw-brand:hover .hw-logo{transform:translateY(-4px) scale(1.03)}
.hw-logo img{width:100%;height:100%;object-fit:contain}
.hw-logo .hw-mark{
  font-family:var(--font-head);font-weight:900;font-size:30px;letter-spacing:-.03em;line-height:1;
}
.hw-brand-txt h2{
  font-family:var(--font-head);font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(26px,4.4vw,52px);
}
.hw-brand-txt h2 em{font-style:normal;color:var(--coral)}
.hw-brand-txt .hw-tags{
  display:block;margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fog)
}
.hw-open{
  display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:999px;
  background:var(--coral);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s;
}
.hw-open:hover{transform:translateY(-3px) scale(1.03);background:var(--coral-2)}
.hw-open span.a{transition:transform .4s}
.hw-open:hover span.a{transform:translateX(5px)}

/* ---- the running rail ---- */
.hw-rail{
  overflow:hidden;position:relative;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.hw-rail-track{
  display:flex;gap:16px;width:max-content;
  will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden;
  animation:hw-run linear infinite;
}
.hw-rail:hover .hw-rail-track,.hw-rail:focus-within .hw-rail-track{animation-play-state:paused}
@keyframes hw-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.hw-rail.rev .hw-rail-track{animation-direction:reverse}

.hw-cell{
  flex:none;width:clamp(190px,22vw,300px);aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#141417;position:relative;cursor:pointer;
  transform:translate3d(0,0,0);backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1),filter .5s;
}
.hw-cell.wide{aspect-ratio:16/9;width:clamp(280px,34vw,480px)}
.hw-cell img,.hw-cell video{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.001);transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.hw-cell::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(242,241,237,.07);
  background:linear-gradient(180deg,transparent 55%,rgba(8,8,10,.55));
  opacity:.75;transition:opacity .5s;
}
.hw-cell:hover::after{opacity:.35}
.hw-cell:hover img,.hw-cell:hover video{transform:scale(1.07)}
.hw-cell:hover{transform:translateY(-10px) scale(1.03);box-shadow:0 46px 80px -42px #000,0 0 0 1px rgba(242,241,237,.12)}
.hw-cell .hw-play{
  position:absolute;left:12px;bottom:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(12,12,15,.6);backdrop-filter:blur(6px);display:grid;place-items:center;
  font-size:11px;color:#fff;pointer-events:none
}

/* ---- service page auto galleries ---- */
.hw-gal{display:grid;gap:14px;padding:0 clamp(18px,5vw,80px)}
.hw-gal.cols{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hw-gal .hw-cell{width:auto}
.hw-tile-in{opacity:0;transform:translate3d(0,28px,0) scale(.96);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.hw-tile-in.on{opacity:1;transform:none}

/* ---- lightbox ---- */
.hw-lb{
  position:fixed;inset:0;z-index:9500;background:rgba(8,8,10,.94);display:none;
  align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;transition:opacity .35s
}
.hw-lb.on{display:flex;opacity:1}
.hw-lb img,.hw-lb video{max-width:100%;max-height:92vh;border-radius:10px;object-fit:contain}
.hw-lb-x{position:absolute;top:18px;right:22px;font-size:28px;line-height:1;color:var(--paper)}

@media (max-width:720px){
  .hw-brand-head{align-items:flex-start}
  .hw-logo{width:66px;height:66px;border-radius:14px;padding:8px}
  .hw-logo .hw-mark{font-size:20px}
  .hw-cell{width:62vw}
  .hw-cell.wide{width:82vw}
}
@media (prefers-reduced-motion:reduce){
  .hw-rail-track{animation:none}
  .hw-rail{overflow-x:auto}
  .hw-tile-in{opacity:1;transform:none}
}

/* ---- lighter rails + full-screen brand feature ---- */
.hw-rail-slot{min-height:clamp(240px,30vw,380px)}

.hw-brand-hero .hw-feature{
  position:relative;margin:0 clamp(18px,5vw,80px);border-radius:22px;overflow:hidden;
  height:min(84vh,760px);background:#141417;
  box-shadow:0 60px 120px -60px #000,0 0 0 1px rgba(242,241,237,.08);
}
.hw-feature img,.hw-feature video{width:100%;height:100%;object-fit:cover;display:block}
.hw-feature-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.25) 0%,transparent 35%,rgba(8,8,10,.75) 100%);
}
.hw-feature-open{
  position:absolute;left:clamp(18px,4vw,44px);bottom:clamp(18px,4vw,44px);
  display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;
  background:var(--coral);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s;
}
.hw-feature-open:hover{transform:translateY(-3px) scale(1.03);background:var(--coral-2)}
@media (max-width:720px){
  .hw-brand-hero .hw-feature{height:70vh;border-radius:16px;margin:0 14px}
}