/* Stack Innovations — portfolio.
   Rides on blog.css for the shared shell (.bwrap, .beyebrow, .bfilters). */

.pfwrap{max-width:1160px}
.pfcase{max-width:1000px}
.pfcase--body{padding-top:0}

/* ---------------- index grid ---------------- */
.pfgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.pfcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--ink-1);height:100%;transition:border-color .3s,transform .4s var(--ease-out)}
.pfcard:hover{border-color:rgba(212,255,58,.45);transform:translateY(-3px)}
.pfcard__shot{display:block;position:relative;aspect-ratio:16/10;background:var(--ink-2);overflow:hidden}
.pfcard__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s var(--ease-out)}
.pfcard:hover .pfcard__shot img{transform:scale(1.03)}
.pfcard__body{display:flex;flex-direction:column;padding:24px 26px 26px;flex:1}
.pfcard__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-3);margin-bottom:12px}
.pfcard__meta .cat{color:var(--lime)}
.pfcard__body b{font:500 clamp(19px,2.3vw,24px)/1.25 var(--f-sans);letter-spacing:-.02em;color:var(--bone);margin-bottom:8px}
.pfcard:hover .pfcard__body b{color:var(--lime)}
.pfcard__body small{display:block;color:var(--bone-3);font-size:14px;line-height:1.6;margin-bottom:16px}
.pfcard__stack{display:flex;gap:6px;flex-wrap:wrap;margin:auto 0 16px}
.pfcard__stack em{font-style:normal;font:10.5px var(--f-mono);letter-spacing:.08em;color:var(--bone-3);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px}
/* Lead project: image beside the copy, across the full row. */
.pfgrid__lead{grid-column:1/-1}
.pfcard--feat{flex-direction:row}
.pfcard--feat .pfcard__shot{flex:0 0 56%;aspect-ratio:auto;min-height:340px}
.pfcard--feat .pfcard__shot img{position:absolute;inset:0}
.pfcard--feat .pfcard__body{padding:38px 40px;justify-content:center}
.pfcard--feat .pfcard__body b{font-size:clamp(24px,3vw,32px)}
.pfcard--feat .pfcard__body small{font-size:15px;max-width:46ch}
.pfcard--feat .pfcard__stack{margin:6px 0 20px}

.pfcard__go{font:11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.pfcard__go i{font-style:normal;display:inline-block;transition:transform .3s}
.pfcard:hover .pfcard__go i{transform:translateX(5px)}

/* ---------------- case study head ---------------- */
.pfcase__head{max-width:820px;margin-bottom:10px}
.pfcase__head h1{margin:0 0 18px;font:300 clamp(38px,6vw,68px)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--bone)}
.pfcase__live{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:9px 18px;border-radius:999px;
  border:1px solid var(--line);font:12px var(--f-mono);letter-spacing:.06em;color:var(--bone-2);transition:.3s}
.pfcase__live:hover{border-color:var(--lime);color:var(--lime)}
.pfcase__live .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.pfcase__live i{font-style:normal;opacity:.6}

/* ---------------- the device stage ----------------
   A tall section with a sticky middle. Scrolling through it drives two custom
   properties set by portfolio.js: --open lifts the laptop lid, then --shot
   scrolls both screens through their full-page captures.

   The screens use background-position in percent rather than a translated
   child, so the browser does the arithmetic for whatever height the capture
   happens to be. 0% is the top of the page, 100% the bottom, no matter how
   tall the image is, so nothing here needs to know the image dimensions. */
/* The lid now opens on approach rather than inside the pin, so the pinned
   stretch only has to carry the screen scroll. It can be shorter than it was. */
.pfstage{height:260vh;position:relative;--open:0;--shot:0}
.pfstage__sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;
  padding:0 var(--gutter);overflow:hidden}
.pfstage__devices{display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,3vw,44px);
  width:100%;max-width:1180px;perspective:1400px;
  transform:scale(calc(.9 + .1 * var(--open)));transition:transform .1s linear}

/* laptop */
.mac{flex:1 1 auto;max-width:900px;min-width:0;transform-style:preserve-3d}
/* 55 degrees, not the 78 this started at. The lid rotates about its bottom
   edge, so at 78 it is nearly edge-on to the camera and collapses to a nine
   pixel sliver — a laptop that has not arrived yet rather than one that is
   shut. 55 still reads as closing while keeping the screen on screen. */
.mac__lid{position:relative;transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--open)) * -55deg));
  background:linear-gradient(160deg,#2b2d31,#131417);border-radius:14px 14px 3px 3px;
  padding:11px 11px 13px;box-shadow:0 40px 90px rgba(0,0,0,.55);will-change:transform}
.mac__screen{position:relative;border-radius:5px;overflow:hidden;background:var(--ink-0);
  aspect-ratio:16/10.2;border:1px solid rgba(0,0,0,.6)}
.mac__shot{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% auto;
  background-position:0 calc(var(--shot) * 100%)}
.mac__camera{position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#0b0b0d;box-shadow:inset 0 0 2px rgba(255,255,255,.25)}
.mac__base{position:relative;height:clamp(10px,1.4vw,16px);margin:0 -3.2%;
  background:linear-gradient(180deg,#3a3d42 0%,#202226 45%,#111214 100%);
  border-radius:0 0 12px 12px;box-shadow:0 22px 34px rgba(0,0,0,.5)}
.mac__notch{position:absolute;top:0;left:50%;width:14%;height:42%;margin-left:-7%;
  background:rgba(0,0,0,.42);border-radius:0 0 8px 8px}

/* phone */
.phone{flex:0 0 auto;width:clamp(132px,15vw,208px);position:relative;
  background:linear-gradient(160deg,#2b2d31,#131417);border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(6px,.8vw,9px);box-shadow:0 30px 60px rgba(0,0,0,.55);
  transform:translateY(calc((1 - var(--open)) * 26px));opacity:calc(.4 + .6 * var(--open));
  transition:transform .1s linear,opacity .1s linear}
.phone__screen{position:relative;border-radius:clamp(15px,1.8vw,22px);overflow:hidden;background:var(--ink-0);
  aspect-ratio:9/19.5}
.phone__shot{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% auto;
  background-position:0 calc(var(--shot) * 100%)}
.phone__island{position:absolute;top:clamp(11px,1.3vw,16px);left:50%;width:32%;height:clamp(9px,1vw,13px);
  transform:translateX(-50%);background:#08080a;border-radius:999px}

/* Under a laptop-sized screen the 3D stage costs more than it gives: a sticky
   320vh section on a phone is a long scroll through one picture. Show the two
   captures plainly instead, already open, and let the page move normally. */
@media (max-width:860px){
  .pfstage{height:auto;--open:1;--shot:0}
  .pfstage__sticky{position:static;height:auto;padding:30px var(--gutter) 10px}
  .pfstage__devices{flex-direction:column;align-items:center;gap:28px;perspective:none;transform:none}
  .mac{width:100%;max-width:560px}
  .mac__lid{transform:none;box-shadow:0 20px 44px rgba(0,0,0,.5)}
  .mac__screen{aspect-ratio:16/11}
  .phone{width:170px;transform:none;opacity:1}
  .phone__screen{aspect-ratio:9/17}
}

/* Someone who asked for less motion gets the laptop open and still. */
@media (prefers-reduced-motion:reduce){
  .pfstage{height:auto;--open:1;--shot:0}
  .pfstage__sticky{position:static;height:auto;padding:30px var(--gutter)}
  .pfstage__devices{transform:none;transition:none}
  .mac__lid,.phone{transition:none;transform:none}
  .mac__screen{aspect-ratio:16/11}
}

/* ---------------- case study blocks ---------------- */
.pfblock{padding:52px 0;border-top:1px solid var(--line)}
.pfblock:first-child{border-top:0}
.pfh{margin:0 0 22px;font:11px var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);font-weight:400}
.pflede{margin:0;color:var(--bone-2);font-size:16.5px;line-height:1.72;max-width:62ch}
.pfblock--intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
.pfnote{margin:18px 0 0;font-size:11px;letter-spacing:.04em;color:var(--bone-3);opacity:.8}

.pffeat{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.pffeat li{display:flex;gap:20px;padding:20px 6px;border-top:1px solid rgba(245,242,236,.055)}
.pffeat li:first-child{border-top:0}
.pffeat__n{flex:0 0 26px;color:var(--lime);font-size:11px;padding-top:3px;opacity:.85}
.pffeat b{display:block;font:500 17px/1.4 var(--f-sans);color:var(--bone);margin-bottom:5px}
.pffeat p{margin:0;color:var(--bone-3);font-size:14.5px;line-height:1.65;max-width:64ch}

.pfstack{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pfstack li{border:1px solid var(--line);border-radius:11px;padding:15px 17px;background:var(--ink-1)}
.pfstack b{display:block;font:500 14.5px var(--f-sans);color:var(--bone);margin-bottom:3px}
.pfstack span{display:block;font-size:12.5px;line-height:1.5;color:var(--bone-3)}

.pfmetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pfmetrics__col{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--ink-1)}
.pfmetrics__col h3{margin:0 0 14px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lime);font-weight:400}
.pfmetrics dl{margin:0;display:grid;gap:1px}
.pfmetrics dl div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-top:1px solid rgba(245,242,236,.055)}
.pfmetrics dl div:first-child{border-top:0}
.pfmetrics dt{color:var(--bone-3);font-size:13px}
.pfmetrics dd{margin:0;font:500 16px var(--f-mono);color:var(--bone)}
.pfmetrics dd span{font-size:10.5px;color:var(--bone-3);margin-left:3px;font-weight:400}

.pfserv{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.pfserv li a,.pfserv li span{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--line);font-size:13.5px;color:var(--bone-2);transition:.3s}
.pfserv li a:hover{border-color:var(--lime);color:var(--lime)}
.pfserv li a i{font-style:normal;opacity:.55}

.pfprose{color:var(--bone-2);font-size:16.5px;line-height:1.75}
.pfprose h2{font:400 clamp(23px,2.8vw,30px)/1.25 var(--f-display);color:var(--bone);margin:38px 0 14px}
.pfprose h3{font:500 18px/1.4 var(--f-sans);color:var(--bone);margin:30px 0 10px}
.pfprose p{margin:0 0 18px;max-width:68ch}
.pfprose a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.pfprose ul,.pfprose ol{max-width:68ch;padding-left:20px}
.pfprose li{margin-bottom:8px}

.pfnext{display:block;margin-top:10px;padding:34px 34px 36px;border:1px solid var(--line);border-radius:18px;
  background:var(--ink-1);position:relative;transition:border-color .3s}
.pfnext:hover{border-color:rgba(212,255,58,.45)}
.pfnext span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-3);margin-bottom:10px}
.pfnext b{display:block;font:400 clamp(24px,3.4vw,34px)/1.15 var(--f-display);color:var(--bone);letter-spacing:-.02em}
.pfnext:hover b{color:var(--lime)}
.pfnext small{display:block;margin-top:9px;color:var(--bone-3);font-size:14px;max-width:56ch}
.pfnext i{position:absolute;right:34px;top:50%;margin-top:-10px;font-style:normal;font-size:22px;
  color:var(--lime);transition:transform .3s}
.pfnext:hover i{transform:translateX(6px)}

/* ---------------- closing call to action ---------------- */
.pfcta{border-top:1px solid var(--line);padding:clamp(64px,9vw,110px) var(--gutter)}
.pfcta__inner{max-width:1000px;margin:0 auto;text-align:center}
.pfcta__inner h2{margin:0 0 16px;font:300 clamp(30px,4.6vw,54px)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--bone)}
.pfcta__inner p{margin:0 auto 30px;color:var(--bone-3);font-size:16px;line-height:1.7;max-width:56ch}
.pfcta__btn{display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:999px;
  background:var(--lime);color:var(--ink-0);font-weight:600;font-size:14.5px;transition:.3s}
.pfcta__btn:hover{color:var(--ink-0);transform:translateY(-2px);box-shadow:0 14px 30px rgba(212,255,58,.22)}
.pfcta__btn .arr{transition:transform .3s}
.pfcta__btn:hover .arr{transform:translateX(4px)}

@media (max-width:820px){
  .pfgrid{grid-template-columns:1fr;gap:20px}
  .pfcard--feat{flex-direction:column}
  .pfcard--feat .pfcard__shot{flex:none;aspect-ratio:16/10;min-height:0}
  .pfcard--feat .pfcard__body{padding:24px 26px 26px}
  .pfblock--intro{grid-template-columns:1fr;gap:34px}
  .pfmetrics{grid-template-columns:1fr}
  .pfnext i{display:none}
}