@font-face{font-family:Cabinet;src:url('/assets/projects/CabinetGrotesk.woff2') format('woff2');font-weight:100 900;font-display:swap}
html.lenis.lenis-smooth{scroll-behavior:auto}
.pill{transition:background .3s var(--ease),color .3s var(--ease)}
.pill:active{opacity:.85}
.media-dialog>.dialog-close{color:#111}
.end-note{font-size:11px}
.project-featured{grid-column:1/-1}
/* Tag scramble (reveals.js): the hidden copy keeps the final height, the scramble is drawn over it. */
.project-meta{position:relative}.meta-ghost{visibility:hidden}.meta-scramble{position:absolute;inset:0}
.project-featured .project-image{aspect-ratio:2/1}
.project-title h3{font:inherit;margin:0}
.project-title a{font-size:clamp(11px,.8vw,15px);letter-spacing:0;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px}
.project-summary{font-size:clamp(16px,1.15vw,23px);line-height:1.45;max-width:52ch;margin-top:12px;letter-spacing:-.01em}
.project-cover{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.project-image img{transition:none;will-change:auto}
.project-image:hover img{transform:none;filter:none}
.project-cover .cover-photo,.project-cover .infinity-photo{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;transition:transform 1s var(--ease)}
.project-image:hover .cover-photo,.project-image:hover .infinity-photo{transform:scale(1.035)}
.cover-fogstores{background:#131313;color:#fff}
.cover-shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,#000b)}
.cover-brand{position:absolute;bottom:7%;left:5%;display:grid;gap:10px}
.cover-brand strong{font-size:clamp(40px,6vw,140px);font-weight:400;line-height:1;letter-spacing:-.04em}
.cover-brand span{font-size:clamp(13px,1.1vw,22px)}
.cover-infinity{background:#f5eee4;color:#386155;font-family:Cabinet,Aeonik,sans-serif}
.project-cover .infinity-photo{position:absolute;width:49%;right:0;object-position:center}
.infinity-brand{position:absolute;inset:0 49% 0 0;padding:6%;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}
.project-cover .infinity-brand img{width:65%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;border-radius:0}
.infinity-brand strong{font-size:clamp(22px,2.8vw,64px);font-weight:600;line-height:1.05;letter-spacing:-.035em}
.infinity-brand span{font-size:clamp(9px,.65vw,14px);letter-spacing:.08em}
.cover-bnm{background:#dce5d8;color:#111}
.bnm-brand{position:absolute;left:7%;top:11%;bottom:12%;width:36%;display:flex;flex-direction:column;justify-content:space-between}
.project-cover .bnm-brand img{width:94%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;border-radius:0;mix-blend-mode:multiply}
.bnm-brand span{font-size:clamp(20px,2.7vw,60px);line-height:1.02;letter-spacing:-.03em}
.bnm-phone{position:absolute;width:39%;right:7%;top:9%;height:104%;overflow:hidden;border:5px solid #151515;border-radius:25px;transform:rotate(6deg);background:#fff;box-shadow:0 16px 35px #22351d33}
.project-cover .bnm-phone img{width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;border-radius:0;transform:none}
.media-dialog-content:has(.case-study){display:block}
.case-study{width:100%;max-width:1400px;margin:auto}
.case-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:15px 0 35px}
.case-heading h2{font-size:clamp(38px,5vw,90px);font-weight:400;line-height:1;letter-spacing:-.035em}
.case-heading p{font-size:16px;color:#bfc0d0;margin-top:12px}
.case-heading .pill{flex-shrink:0;color:#111}
.case-description{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;padding:45px 0}
.case-description>p{font-size:clamp(20px,2vw,34px);line-height:1.35;letter-spacing:-.02em}
.case-description ul{list-style:none;margin:0;padding:0;font-size:18px;line-height:1.35}
.case-description li{border-bottom:1px solid #fff3;padding:12px 0}
.case-description li:first-child{padding-top:0}
/* Case-study screenshots: 12-column grid, rows of equal height so spans 2/3/6/12 always fill a row. */
.case-shots{display:grid;gap:clamp(45px,5vw,90px)}
.shots-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid #fff3;padding-top:16px;margin-bottom:20px}
.shots-head h3{margin:0;font-size:clamp(22px,1.8vw,34px);font-weight:400;letter-spacing:-.025em}
.shots-head p{font-size:13px;color:#bfc0d0;text-align:right;line-height:1.4}
.shots{container-type:inline-size;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.shot{grid-column:span var(--span);position:relative;height:30cqw;overflow:hidden;padding:0;border-radius:12px;background:#1b1c20;text-align:left;isolation:isolate}
.shot-full{height:42cqw}
.media-dialog-content .shot img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:top center;border-radius:0;transition:transform 1.1s var(--ease)}
.media-dialog-content .shot-photo img{object-position:center}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,#0b0c10d9);opacity:0;transition:opacity .45s var(--ease)}
.shot-caption{position:absolute;left:18px;right:80px;bottom:16px;z-index:1;color:#fff;font-size:14px;line-height:1.35;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.shot-open{position:absolute;right:14px;bottom:14px;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);color:#111;font-size:22px;transform:translateY(70px) rotate(-30deg);transition:transform .6s var(--ease)}
@media(hover:hover){
  .shot:hover img{transform:scale(1.04)}
  .shot:hover::after,.shot:focus-visible::after{opacity:1}
  .shot:hover .shot-caption,.shot:focus-visible .shot-caption{opacity:1;transform:none}
  .shot:hover .shot-open,.shot:focus-visible .shot-open{transform:none}
}
.shot:focus-visible{outline-offset:4px}
/* Screenshot gallery */
.lightbox{position:fixed;inset:0;width:100%;height:100dvh;max-height:100dvh;margin:0;padding:0;overflow:hidden;background:#0b0c10;color:#fff;border-radius:0;grid-template-rows:auto minmax(0,1fr) auto auto}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:transparent;backdrop-filter:none}
.lightbox-bar{display:flex;align-items:center;gap:22px;padding:22px var(--margin) 14px}
.lightbox-count{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lightbox-group{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#bfc0d0}
.lightbox .dialog-close{position:relative;top:auto;right:auto;margin-left:auto;color:#111}
.lightbox .dialog-close[data-filled]{color:#fff}
.lightbox-stage{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;overflow:auto;padding:0 calc(var(--margin) + 80px);touch-action:pan-y;overscroll-behavior:contain}
/* The image box fills the stage and the picture is contained in it; max-width/max-height alone stretch it in grid. */
.lightbox-stage img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lightbox-stage[data-scroll]{place-items:start center}
.lightbox-stage[data-scroll] img{width:min(100%,1150px);height:auto}
.lightbox-nav{position:absolute;top:50%;display:grid;place-items:center;width:62px;height:62px;margin-top:-31px;border-radius:50%;background:#ffffff17;color:#fff;transition:background-color .35s var(--ease),opacity .25s,transform .45s var(--ease)}
.lightbox-nav[data-step="-1"]{left:var(--margin)}
.lightbox-nav[data-step="1"]{right:var(--margin)}
.lightbox-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lightbox-nav:active{transform:scale(.92)}
.lightbox-nav:disabled{opacity:.2;cursor:default}
@media(hover:hover){.lightbox-nav:not(:disabled):hover{background:var(--blue)}}
.lightbox-caption{min-height:1.4em;padding:14px var(--margin) 4px;text-align:center;font-size:15px;line-height:1.4;color:#d6d7e2}
.lightbox-thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px var(--margin) 22px;scrollbar-width:none}
.lightbox-thumbs::-webkit-scrollbar{display:none}
.lightbox-thumbs button{flex:0 0 auto;width:66px;height:46px;padding:0;border-radius:7px;overflow:hidden;background:#1b1c20;opacity:.4;outline:2px solid transparent;outline-offset:2px;transition:opacity .25s,outline-color .25s}
.lightbox-thumbs button:first-child{margin-left:auto}
.lightbox-thumbs button:last-child{margin-right:auto}
.lightbox-thumbs button[aria-current]{opacity:1;outline-color:var(--blue)}
@media(hover:hover){.lightbox-thumbs button:hover{opacity:.85}}
.lightbox-thumbs img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.case-back{background:none;color:#fff;border-bottom:1px solid #fff8;padding:15px 0;margin-top:35px;font-size:17px}
.gallery-grid .project-cover{aspect-ratio:1/.65;height:auto;border-radius:12px}
.gallery-grid button>span{margin-top:12px;font-size:18px}
.gallery-grid .cover-brand strong{font-size:clamp(20px,2.6vw,52px)}
.gallery-grid .cover-brand span{font-size:11px;margin:0}
.gallery-grid .infinity-brand strong{font-size:clamp(16px,1.8vw,32px)}
.gallery-grid .infinity-brand span{font-size:8px;margin:0}
.gallery-grid .bnm-brand span{font-size:clamp(16px,1.8vw,32px);margin:0}
@media(max-width:812px){
  .project-featured .project-image{aspect-ratio:1/.8}
  .cover-brand strong{font-size:11vw}
  .cover-fogstores .cover-photo{object-position:58% center}
  .project-title{gap:12px}.project-title a{font-size:11px}.project-meta{font-size:11px}.project-summary{font-size:16px}
  .infinity-brand strong{font-size:5.6vw}.infinity-brand span{font-size:11px}
  .bnm-brand span{font-size:5.6vw}.bnm-phone{border-width:3px;border-radius:17px}
  .case-heading{align-items:flex-start;flex-direction:column;margin-top:15px;gap:20px}
  .case-description{grid-template-columns:1fr;gap:25px;padding:30px 0}.case-description ul{font-size:16px}
  /* Phones: two columns; phone screens and looks share a row, wide captures take the full width. */
  .case-shots{gap:45px}
  .shots-head{flex-direction:column;gap:6px;margin-bottom:16px}.shots-head p{text-align:left}
  .shots{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot{grid-column:span 1;height:auto;aspect-ratio:9/16;border-radius:10px}
  .shot-photo{aspect-ratio:4/5}
  .shot-wide,.shot-full{grid-column:1/-1;aspect-ratio:16/10}
  .shot-caption{display:none}
  .shot-open{width:30px;height:30px;right:8px;bottom:8px;font-size:14px;transform:none;background:var(--blue);color:#fff}
  .lightbox-bar{padding:16px 16px 10px;gap:14px}
  .lightbox-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .lightbox-stage{padding:0 16px}
  /* Arrows leave the image and sit either side of the caption. */
  .lightbox{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto}
  .lightbox-bar,.lightbox-stage,.lightbox-thumbs{grid-column:1/-1}
  .lightbox-nav{position:static;grid-row:3;width:46px;height:46px;margin:12px 0 0}
  .lightbox-nav[data-step="-1"]{grid-column:1;margin-left:16px}.lightbox-nav[data-step="1"]{grid-column:3;margin-right:16px}
  .lightbox-caption{grid-row:3;grid-column:2;align-self:center;padding:12px 12px 0;font-size:13px}
  .lightbox-thumbs{padding:10px 16px max(16px,env(safe-area-inset-bottom))}
  .lightbox-thumbs button{width:52px;height:38px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid .cover-brand strong{font-size:9vw}.gallery-grid .infinity-brand strong,.gallery-grid .bnm-brand span{font-size:6vw}
}
@media(prefers-reduced-motion:reduce){.project-cover img,.media-dialog-content .shot img{transition:none}}