/* Approved Bright silver + graphite palette and shared device frames. */
#work{background:radial-gradient(ellipse 95% 70% at 67% 2%,#f4f5f6aa,transparent 70%),linear-gradient(125deg,#b9bec2 0%,#dce0e3 45%,#aeb5ba 100%);color:#22272a}#work .curated-cover{background:radial-gradient(ellipse 130% 100% at 25% -22%,#e1e8ed55,transparent 70%),linear-gradient(125deg,transparent 18%,#c3cdd31c 42%,transparent 66%),linear-gradient(130deg,#3c4349 0%,#4b535a 38%,#2a3136 78%,#20262b 100%)}#work .section-kicker,#work .tile-caption>span{color:#4e585e}#work .tile-caption p{color:#4e585e}#work .section-heading em{color:#347d83}
#work .see-more-work{color:#303b40}#work .more-work-icon{border-color:#54636b99}#work .project-card:focus-visible{outline-color:#347d83}

#work .tile-main,#work .tile-secondary{box-sizing:border-box;overflow:visible;isolation:isolate}#work .frame-glass{width:100%;height:100%;overflow:hidden;background:white;position:relative}#work .frame-glass img{display:block;width:100%;height:auto;max-width:none;transform:none}#work .tile-secondary{height:auto;aspect-ratio:210/416;max-height:none;bottom:auto}#work .tile-secondary:before{content:"";position:absolute;width:2px;height:13%;left:-2px;top:25%;border-radius:2px;background:linear-gradient(#aab0b4,#22292d,#777e83);z-index:-1}#work .tile-secondary:after{content:"";position:absolute;width:2px;height:18%;right:-2px;top:31%;border-radius:2px;background:linear-gradient(#aab0b4,#22292d,#777e83);z-index:-1}#work .tile-main .frame-glass{border-radius:5px 5px 0 0}#work .tile-secondary .frame-glass{border-radius:12px}#work .tile-main{padding:5px 5px 0;border:1px solid #aeb4b8;border-bottom:0;border-radius:11px 11px 0 0;background:#090b0c;box-shadow:0 13px 28px #0007,0 0 0 1px #121619}#work .tile-secondary{width:23%;top:20%;padding:4px;border:1px solid #a7afb4;border-radius:17px;background:#080a0b;box-shadow:0 10px 22px #0008,0 0 0 1px #252a2e}

/* Selected slim frames: upper-left metal glint and larger handset. */
#work .tile-main{background:linear-gradient(135deg,#c6d0d6 0%,#697780 1.2%,#131a1e 5%,#090b0c 14%,#090b0c 100%);box-shadow:0 13px 28px #0007,0 0 0 1px #121619,inset 1px 1px 0 #eaf1f585}
#work .tile-secondary{width:25%;top:10%;background:linear-gradient(135deg,#b9c5cc 0%,#53616a 4%,#080a0b 15%,#080a0b 92%,#5d6a73 100%);box-shadow:0 11px 23px #0009,0 0 0 1px #252a2e,inset 1px 1px 0 #e5eff480}
/* Optical logo sizing: shared alignment, natural proportions, readable marks. */
#work .curated-cover .tile-logo{left:5.6%;top:11.1111%;width:110px;height:24px;transform:translateY(-50%);transform-origin:left center;mix-blend-mode:normal}
#work .tile-logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.96}
#work .tile-logo.logo-01,#work .tile-logo.logo-02,#work .tile-logo.logo-13{width:52px;height:16px}
#work .tile-logo.logo-03,#work .tile-logo.logo-04{width:76px;height:16px}
#work .tile-logo.logo-05{width:48px;height:17px}
#work .tile-logo.pg-tile-logo{width:29px;height:16px}
#work .tile-logo.logo-07{width:94px;height:16px}
/* Fit the supplied wallet screen to the shared handset without stretching it. */
#work .project-13 .tile-main .frame-glass img{height:100%;object-fit:cover;object-position:top left}
#work .project-13 .tile-secondary .frame-glass img{height:auto;object-fit:initial;object-position:initial}

/* Keep eReq full-width and anchor its original footer to the handset bottom. */
#work .project-04 .tile-secondary .frame-glass img{height:auto}
#work .project-04 .tile-secondary .frame-glass .ereq-pinned-footer{position:absolute;bottom:0;left:0;width:100%;height:auto}

/* Sharper shared handset corners, retaining a small rounded edge. */
#work .tile-secondary{border-radius:9px}
#work .tile-secondary .frame-glass{border-radius:5px}

/* Thin modern handset edge: half the bezel, with a quiet silver highlight. */
#work .tile-secondary{padding:2px;border:.5px solid #c0c9ce;background:linear-gradient(135deg,#dae1e5 0%,#8c999f 4%,#384248 18%,#303a40 90%,#9eabb2 100%);box-shadow:0 8px 18px #0006,inset .5px .5px 0 #f1f6f7aa}
#work .tile-secondary .frame-glass{border-radius:6.5px}
#work .tile-secondary:before,#work .tile-secondary:after{width:1px}
#work .tile-secondary:before{left:-1px}
#work .tile-secondary:after{right:-1px}

/* About panel shares the client tiles’ gray graphite sheen. */
#about .about-callout{background:radial-gradient(ellipse 130% 100% at 25% -22%,#e1e8ed55,transparent 70%),linear-gradient(125deg,transparent 18%,#c3cdd31c 42%,transparent 66%),linear-gradient(130deg,#3c4349 0%,#4b535a 38%,#2a3136 78%,#20262b 100%)}
#about .about-story .extension-eyebrow{color:#c5d0d5}
#about .about-story p{color:#d0d8dc}
#about .about-story p strong{color:#edf1f3}

#work .project-05 .tile-secondary .frame-glass img{height:100%;object-fit:cover;object-position:center top}

#work .project-05 .tile-secondary{aspect-ratio:772/1378}
#work .project-05 .tile-secondary .frame-glass img{height:auto;object-fit:contain}

#work .project-05 .tile-secondary{aspect-ratio:772/1400}
#work .project-05 .tile-secondary .frame-glass{background:#fff}
#work .project-05 .tile-secondary .frame-glass img{width:100%;height:100%;object-fit:contain;object-position:center top}

/* Preserve the complete Team Citi navigation and athletes inside the desktop glass. */
#work .project-05 .tile-main .frame-glass{background:#fff}
#work .project-05 .tile-main .frame-glass img{width:100%;height:100%;object-fit:contain;object-position:center top}

/* Modest top-aligned Citi zoom: reduce side whitespace, retain space beneath the athletes. */
#work .project-05 .tile-main .frame-glass img{width:112%;height:auto;object-fit:initial;object-position:center top;transform:translateX(-5.357143%)}

/* Vicks desktop only: gentle centered zoom with the original top edge retained. */
#work .project-06 .tile-main .frame-glass img{width:112%;height:auto;max-width:none;object-fit:initial;transform:translateX(-5.357143%);transform-origin:center top}

#work .project-13 .tile-secondary .frame-glass{background:#e5e5e3}

/* Citi award belongs to this project alone; keep the ribbon readable at tile size. */
#work .project-05 .tile-main .frame-glass .citi-tile-award-ribbon{position:absolute;top:0;left:0;z-index:2;width:clamp(94px,32%,145px);height:auto;transform:none;object-fit:contain;pointer-events:none;clip-path:polygon(0 78%,78% 0,100% 0,100% 1%,1% 100%,0 100%)}