/* ============================================================
   MOTION LAYER
   Loaded AFTER site.css. Adds the Studio Fifty functionality
   (smooth scroll, pinned work section) and changes nothing about
   the existing look: same type scale, same logo, same colours.
   ============================================================ */

/* ---------- smooth scroll shell ---------- */
#smooth-wrap{position:fixed;inset:0;overflow:hidden}
#smooth-content{will-change:transform}
body.no-smooth #smooth-wrap{position:static;overflow:visible}
body.no-smooth #smooth-content{transform:none!important}

/* ---------- pinned work section ----------
   The section is (n+1) x 100vh tall. The stage is translated so it holds
   still while the cases swap, then released. Transform-based, because
   position:sticky does not work inside a transformed ancestor.
   The CASE MARKUP IS UNCHANGED — same .case grid as the live site. */
/* the section supplies its own vertical rhythm, so drop .sec padding */
.pin{position:relative;padding-block:0!important;background:var(--ink);color:#fff;border-top:0}
.pin .kick{color:rgba(255,255,255,.45)}
.pin h2{color:#fff}
.pin-stage{min-height:100vh;display:flex;align-items:center;will-change:transform;
  padding-block:clamp(40px,6vh,90px)}
.pin-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

.pin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,40px)}
.pin-count{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.02em;color:rgba(255,255,255,.45);margin:0}
.pin-count b{color:#fff;font-size:20px;letter-spacing:-.03em}

/* filter pills: All / Creative / Strategy, sits under the section headline */
.pin-filter{display:flex;gap:8px;margin-top:clamp(16px,2vw,24px)}
.pf-btn{
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:transparent;color:rgba(255,255,255,.6);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.pf-btn:hover{border-color:rgba(255,255,255,.5);color:#fff}
.pf-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.pin-cards .case[hidden]{display:none}
.pin-rail span[hidden]{display:none}
@media(max-width:900px){.pin-filter{margin-top:14px}}

.pin-cards{position:relative}
.pin-cards .case{
  position:absolute;inset:0;margin:0;border:0;
  padding:clamp(24px,2.6vw,40px);gap:clamp(28px,4vw,72px);
  background:#141619;align-content:center;
  opacity:0;transform:translateY(34px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .65s var(--ease);
}
.pin-cards .case h3{color:#fff}
.pin-cards .case .case-tag{color:rgba(255,255,255,.45)}
.pin-cards .case .case-body{color:rgba(255,255,255,.62);margin-bottom:clamp(20px,2.4vw,30px)}
.pin-cards .case .stats{border-top-color:rgba(255,255,255,.16)}
.pin-cards .case .stats div{border-right-color:rgba(255,255,255,.16);padding-block:clamp(14px,1.8vw,22px)}
.pin-cards .case .stats span{color:rgba(255,255,255,.45)}
.pin-cards .case .arrow{color:#fff}
.pin-cards .case .arrow::after{background:#fff}
.pin-cards .case:last-of-type{border-bottom:0}
.pin-cards .case.active{opacity:1;transform:none;pointer-events:auto}
.pin-cards .case.past{opacity:0;transform:translateY(-28px)}

/* progress rail, in the existing hairline language */
.pin-rail{display:flex;gap:6px;margin-top:clamp(22px,2.6vw,38px)}
.pin-rail span{flex:1;height:2px;background:rgba(255,255,255,.2);overflow:hidden}
.pin-rail span i{display:block;height:100%;width:0;background:var(--accent);
  transition:width .5s var(--ease)}
.pin-rail span.done i,.pin-rail span.now i{width:100%}
.pin-all{margin-top:clamp(24px,2.8vw,40px)}

@media(max-width:900px){
  /* no pin on touch: the section falls back to normal stacked cases */
  .pin{height:auto!important}
  .pin-stage{min-height:0;display:block}
  .pin-cards{position:static}
  .pin-cards .case{position:relative;opacity:1;transform:none;pointer-events:auto;
    border-top:1px solid var(--rule);padding-block:clamp(40px,6vw,80px)}
  .pin-rail,.pin-count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pin{height:auto!important}
  .pin-stage{min-height:0;display:block}
  .pin-cards{position:static}
  .pin-cards .case{position:relative;opacity:1;transform:none;pointer-events:auto}
  .pin-rail{display:none}
}


/* ============================================================
   ACCOUNTS — no panel inside a section. The section IS the surface.
   Hairline rules and a plain grid, matching the rest of the site.
   ============================================================ */
.acct-sec{background:#F4F4F1}
/* the accounts grid itself is the shared .acct system in site.css */


/* ============================================================
   ABOUT — portrait left, everything else right, so the column
   fills instead of leaving dead space bottom-right.
   ============================================================ */
.split--about{align-items:start}
.split--about .about-portrait{position:sticky;top:110px}
body:not(.no-smooth) .split--about .about-portrait{position:relative;top:0}

/* ============================================================
   WHAT I DO — this is just the site's own .caps grid, inverted onto a
   dark ground for section separation. Hairline cells, small solid red
   numerals, square corners, no stagger, no outlined type.
   The last cell is the call to action rather than a floating circle.
   ============================================================ */
.tiles-sec{background:var(--ink);color:#fff}
.tiles-sec .kick{color:rgba(255,255,255,.42)}
/* match the section headings everywhere else on the page */
.tiles-sec h2{color:#fff;font-size:clamp(32px,5vw,76px)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16);
  margin-top:clamp(36px,4.6vw,68px)}
.tile{position:relative;padding:clamp(28px,3vw,46px);min-height:clamp(210px,22vw,270px);
  border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);
  transition:background .4s var(--ease)}
.tile:hover{background:rgba(255,255,255,.035)}
.tile .no{display:block;font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.15em;color:var(--accent);margin-bottom:clamp(18px,2.2vw,30px)}
.tile h3{font-size:clamp(18px,1.85vw,24px);color:#fff;margin:0 0 12px;letter-spacing:-.03em}
.tile p{font-size:14.5px;color:rgba(255,255,255,.58);margin:0;line-height:1.62}

/* the call to action is a cell in the grid, not an object floating over it */
/* six capability tiles fill two rows; the CTA takes the third on its own */
.tile-cta{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--accent);text-decoration:none}
.tile-cta:hover{background:var(--accent-deep)}
.tile-cta .no{color:rgba(255,255,255,.7)}
.tile-cta h3{font-size:clamp(20px,2.1vw,28px)}
.tile-cta .go{font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:5px;align-self:flex-start}
.tile-cta:hover .go{border-color:#fff}

@media(max-width:1080px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tiles{grid-template-columns:1fr}}