/* ═══ OUTDOOR · SECTION 3 — BUILT FOR (sticky client name + scrolling shots) ═══ */
.built{position:relative;background:#080808;border-top:1px solid var(--border);
  padding:clamp(70px,11vh,140px) 0 clamp(74px,12vh,150px)}
.built-head{padding:0 var(--gut) clamp(30px,5vh,54px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.built-head h2{margin-top:20px;font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1;max-width:15ch}
.built-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:24ch;
  text-align:right;flex-shrink:0}
@media(max-width:760px){.built-head{flex-direction:column;align-items:flex-start}
  .built-head .aside{text-align:left}}

.built-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(24px,5vw,80px);padding:0 var(--gut)}
@media(max-width:900px){.built-grid{grid-template-columns:1fr;gap:0}}

/* the name sticks and swaps to whichever photo is nearest the middle of the screen */
.name-panel{position:sticky;top:calc(var(--nav-h) + clamp(40px,10vh,110px));
  height:max-content;padding-bottom:40px}
@media(max-width:900px){.name-panel{display:none}}
.name-panel .idx{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--cut)}
.name-panel .nm{margin-top:18px;min-height:3.2em}
.name-panel .nm b{display:block;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.5rem,3.2vw,2.8rem);line-height:1;letter-spacing:-.032em;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.name-panel .nm em{display:block;font-style:normal;margin-top:12px;font-size:10.5px;
  letter-spacing:.18em;color:var(--dim);transition:opacity .35s ease}
.name-panel.swap .nm b{opacity:0;transform:translateY(10px)}
.name-panel.swap .nm em{opacity:0}
.name-panel .rule{margin-top:26px;height:2px;width:56px;background:var(--cut)}
.name-panel .tally{margin-top:26px;font-size:12px;color:var(--dim);line-height:1.6}
.name-panel .tally b{color:var(--text)}

.shots{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,34px)}
.shot{position:relative;overflow:hidden;background:var(--surface-alt);
  clip-path:polygon(0 0,0 0,-36% 100%,-36% 100%);
  transition:clip-path 1s cubic-bezier(.65,0,.2,1)}
.shot.is-in{clip-path:polygon(0 0,136% 0,100% 100%,0 100%)}
.shot.tall{aspect-ratio:3/4}
.shot.wide{aspect-ratio:16/9}
.shot.std{aspect-ratio:4/3}
.shot .inner{position:absolute;inset:-8% 0;will-change:transform}
.shot img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) brightness(.84);transition:filter .55s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{filter:grayscale(0) brightness(1);transform:scale(1.035)}
.shot .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#161616 0 14px,#111 14px 28px)}
.shot .ph i{font-style:normal;font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--dim)}
/* on phones the sticky panel is hidden, so each photo carries its own label */
.shot .lbl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:44px 18px 15px;
  background:linear-gradient(to top,rgba(8,8,8,.9),transparent)}
.shot .lbl b{display:block;font-size:12.5px;font-weight:700}
.shot .lbl em{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  color:var(--muted);margin-top:5px}
@media(min-width:901px){.shot .lbl{display:none}}

@media(prefers-reduced-motion:reduce){
  .shot{clip-path:none!important}
  .shot .inner{transform:none!important;inset:0}
  .name-panel{position:static}
  .shot .lbl{display:block}
}