/* Marketing Showcase + Portfolio decks: screenshot wall, gallery, browser/phone frames that scroll the page */

/* ---------------------------------------------------------------- cover: a slow wall of work */
.sw{position:absolute;left:880px;top:-40px;width:820px;height:980px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;transform:rotate(-8deg);transform-origin:50% 50%;
  -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.sw-col{display:flex;flex-direction:column;gap:22px;animation:swUp var(--t,70s) linear infinite}
.sw-col:nth-child(2){animation-direction:reverse;margin-top:-180px}
.sw-col img{width:100%;height:auto;border-radius:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2)}
@keyframes swUp{to{transform:translateY(-50%)}}

/* ---------------------------------------------------------------- gallery */
.gl-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-12px 0 20px}
.gl-bar .seg button{font-size:15.5px}
.gl-bar small{font:600 15px/1 var(--f-display);color:var(--muted)}
.gl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gl-c{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);cursor:pointer;padding:0;font:inherit;color:inherit;
  transition:border-color .35s,box-shadow .45s var(--ease),opacity .45s var(--ease)}
.gl-c:hover{border-color:var(--blue-200);box-shadow:var(--sh-2)}
.gl-c.is-hide{display:none}
.gl-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--blue-050)}
.gl-img img{position:absolute;left:0;top:0;width:100%;height:auto;transition:transform 5s cubic-bezier(.45,0,.55,1)}
.gl-c:hover .gl-img img{transform:translateY(calc(-1 * var(--pan,0px)))}
.gl-t{padding:11px 13px 12px;display:flex;flex-direction:column;gap:3px}
.gl-t b{font:750 15.5px/1.2 var(--f-display);color:var(--ink)}
.gl-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-k{position:absolute;left:10px;top:10px;z-index:2;font:800 10.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:#fff;color:var(--blue-700);box-shadow:0 4px 10px -4px rgba(0,0,0,.3)}
.gl-k--concept{background:var(--odoo-050);color:var(--odoo)}
.gl-k--pitch{background:var(--amber-050);color:var(--amber)}

/* ---------------------------------------------------------------- one site: browser + phone */
.sf{display:grid;grid-template-columns:420px minmax(0,1fr);gap:40px;align-items:start;height:100%}
.sf-copy{padding-top:6px}
.sf-copy .kicker{margin-bottom:8px}
.sf-copy h2{font:800 46px/1.08 var(--f-display);color:var(--ink);letter-spacing:-.025em;margin:0}
.sf-copy .sf-dom{display:inline-flex;gap:8px;align-items:center;margin:12px 0 0;font:650 15px/1.3 var(--f-display);color:var(--blue);text-decoration:none;overflow-wrap:anywhere;max-width:100%}
.sf-copy .sf-dom:hover{text-decoration:underline}
.sf-copy p{font-size:18px;line-height:1.5;margin:16px 0 0}
.sf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sf-chips span{display:inline-flex;gap:7px;align-items:center;padding:8px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);font:650 14px/1 var(--f-display);color:var(--ink)}
.sf-chips .ic{color:var(--blue);font-size:15px}
.sf-meta{list-style:none;margin:20px 0 0;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sf-meta li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--body)}
.sf-meta b{font:700 14.5px/1.3 var(--f-display);color:var(--ink);text-align:right}
.sf-acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sf-acts .btn{padding:15px 20px;font-size:17px}
.sf-stage{position:relative;height:690px}
.bw{position:absolute;left:0;top:0;width:900px;height:600px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.bw-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#F4F3F6;border-bottom:1px solid var(--line)}
.bw-bar i{width:11px;height:11px;border-radius:50%;background:#E0DDE4}
.bw-bar i:nth-child(1){background:#F2A9A0}.bw-bar i:nth-child(2){background:#F4D08A}.bw-bar i:nth-child(3){background:#A7D9B5}
.bw-url{margin-left:12px;flex:1;height:24px;border-radius:7px;background:#fff;border:1px solid var(--line);font:500 13px/22px var(--f-body);color:var(--muted);padding:0 10px;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap}
.bw-url .ic{font-size:12px;color:var(--ok)}
.bw-view,.ph-view{position:relative;overflow:hidden;background:#fff}
.bw-view{height:560px}
.bw-view img,.ph-view img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}
/* a calm read of the whole page: down, pause, back up */
.slide.is-active .scroller{animation:pageRead var(--dur,24s) cubic-bezier(.45,0,.55,1) infinite;animation-delay:.8s}
.bw:hover .scroller,.ph:hover .scroller{animation-play-state:paused}
@keyframes pageRead{0%,8%{transform:translateY(0)}46%,58%{transform:translateY(calc(-1 * var(--travel,0px)))}96%,100%{transform:translateY(0)}}
.ph{position:absolute;right:-6px;top:150px;width:262px;height:540px;border-radius:40px;background:#1B1D29;padding:12px;box-shadow:0 40px 70px -30px rgba(0,0,0,.55),inset 0 0 0 2px #3A3D50;z-index:3}
.ph::before{content:"";position:absolute;left:50%;top:18px;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#1B1D29;z-index:4}
.ph-view{height:100%;border-radius:30px}
.ph-view::before{content:"9:41";position:absolute;left:0;right:0;top:0;height:28px;padding-left:24px;background:#0F1119;color:#fff;font:650 10.5px/28px var(--f-display);letter-spacing:.02em;z-index:2}
.ph-view::after{content:"";position:absolute;right:22px;top:10px;width:18px;height:9px;border-radius:3px;border:1.5px solid rgba(255,255,255,.9);box-sizing:border-box;background:#fff;box-shadow:inset 0 0 0 1.5px #0F1119;z-index:3}
.ph-view img{top:28px}
.sf-hint{position:absolute;left:0;bottom:0;margin:0;display:flex;gap:8px;align-items:center;font:500 14px/1 var(--f-body);color:var(--muted)}
.sf-hint .ic{color:var(--blue)}

/* ---------------------------------------------------------------- concept wall */
.cw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cw-c{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-decoration:none;color:inherit;transition:box-shadow .45s var(--ease),border-color .35s}
.cw-c:hover{box-shadow:var(--sh-2);border-color:var(--blue-200)}
.cw-c .bw-bar{height:30px}
.cw-c .bw-bar i{width:9px;height:9px}
.cw-view{position:relative;height:240px;overflow:hidden}
.cw-view img{position:absolute;left:0;top:0;width:100%;height:auto;transition:transform 6s cubic-bezier(.45,0,.55,1)}
.cw-c:hover .cw-view img{transform:translateY(calc(-1 * var(--pan,0px)))}
.cw-t{padding:12px 14px 14px}
.cw-t b{display:block;font:750 17px/1.25 var(--f-display);color:var(--ink)}
.cw-t small{display:block;font-size:13.5px;color:var(--body);margin-top:3px}

/* ---------------------------------------------------------------- portfolio: map, grid, detail */
.pm{position:relative;width:1000px;height:600px;flex:none}
.pm-svg{position:absolute;inset:0;overflow:visible}
.pm-dots path{fill:none;stroke:#C9D6EE}
.dark .pm-dots path{stroke:rgba(255,255,255,.22)}
.pm-pin{position:absolute;left:0;top:0;transform:translate(var(--px),var(--py));z-index:2}
.pm-pin i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #fff,0 6px 14px -4px rgba(30,70,145,.6)}
.dark .pm-pin i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.pm-pin i::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid currentColor;color:var(--blue);opacity:0;animation:ofRing 3.4s var(--ease-io) infinite;animation-delay:var(--d,0s)}
.dark .pm-pin i::before{color:#fff}
@keyframes ofRing{0%{transform:scale(.5);opacity:.6}100%{transform:scale(1.7);opacity:0}}
.pm-pin b{position:absolute;left:16px;top:-12px;white-space:nowrap;font:750 14px/1 var(--f-display);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 9px;box-shadow:var(--sh-1)}
.pm-pin.is-l b{left:auto;right:16px}
.pm-pin.is-t b{left:50%;top:auto;bottom:16px;transform:translateX(-50%)}
.pm-pin.is-b b{left:50%;top:16px;transform:translateX(-50%)}
.pm-pin small{display:block;font:600 11.5px/1.25 var(--f-body);color:var(--muted);margin-top:3px;white-space:pre}
.pf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pf-c{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);cursor:pointer;font:inherit;color:inherit;box-shadow:0 1px 2px rgba(31,31,61,.04);
  transition:border-color .35s,box-shadow .35s,opacity .45s}
.pf-c:hover{border-color:var(--blue-200)}
.pf-c[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,103,202,.12)}
.pf-c.is-dim{opacity:.28}
.pf-mono{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--c,var(--blue));color:#fff;font:800 15px/1 var(--f-display);letter-spacing:.02em;overflow:hidden}
.pf-mono img{width:100%;height:100%;object-fit:contain;background:#fff;padding:5px}
.pf-c b{display:block;font:750 15.5px/1.2 var(--f-display);color:var(--ink)}
.pf-c small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---------------------------------------------------------------- the wall of work (mosaic) */
.mz{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px}
.mz-t.is-big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.mz-t.is-big .mz-cap{padding:34px 12px 10px}
.mz-t.is-big .mz-cap b{font-size:15px}
.mz-t{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--blue-050);padding:0;cursor:pointer;box-shadow:var(--sh-1);
  transition:opacity .45s var(--ease),box-shadow .35s,border-color .35s}
.mz-t img{width:100%;height:100%;object-fit:cover;object-position:top}
.mz-t:hover{border-color:var(--blue-300);box-shadow:var(--sh-2)}
.mz-t.is-dim{opacity:.16}
.mz-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 6px;background:linear-gradient(transparent,rgba(12,21,48,.88));color:#fff;text-align:left;opacity:0;transition:opacity .3s}
.mz-t:hover .mz-cap,.mz-t:focus-visible .mz-cap{opacity:1}
.mz-cap b{display:block;font:700 12px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mz-cap small{display:block;font:700 9.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:3px}
.mz-t[data-k=live]::after{content:"";position:absolute;right:7px;top:7px;width:9px;height:9px;border-radius:50%;background:#1FAF62;box-shadow:0 0 0 3px rgba(255,255,255,.92)}
.mz-foot{display:flex;align-items:flex-end;gap:56px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.mz-n{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;transition:opacity .3s}
.mz-n b{display:block;font:800 56px/1 var(--f-display);letter-spacing:-.02em;color:var(--blue)}
.mz-n small{display:block;margin-top:8px;font:600 15px/1.2 var(--f-body);color:var(--muted)}
.mz-n:hover small,.mz-n:focus-visible small{color:var(--ink)}
.mz-n.is-dim{opacity:.3}
.mz-legend{display:flex;gap:10px;align-items:center;margin:0 0 4px auto;font:500 15px/1 var(--f-body);color:var(--muted)}
.mz-legend i{width:10px;height:10px;border-radius:50%;background:#1FAF62}
.mz-legend span{opacity:.5}
.cw--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.cw--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cw-c.is-dim{opacity:.18}
.cw--6 .cw-t b{font-size:15px}
.cw--6 .cw-t small{font-size:12.5px}

/* ---------------------------------------------------------------- portfolio: cover marquee */
.mq{position:absolute;left:860px;right:-40px;top:226px;display:flex;flex-direction:column;gap:18px;transform:rotate(-6deg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 90%,transparent)}
.mq-row{display:flex;gap:14px;width:max-content;animation:mqGo var(--t,60s) linear infinite}
.mq-row:nth-child(2n){animation-direction:reverse}
.mq-row span{display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);white-space:nowrap;
  font:700 19px/1 var(--f-display);color:#fff}
.mq-row span i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue-700);font:800 13px/1 var(--f-display);font-style:normal}
.mq-row.is-svc span{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.72);font-size:17px;font-weight:650;padding:10px 18px 10px 10px}
.mq-row.is-svc span i{width:32px;height:32px;background:rgba(255,255,255,.12);color:#fff}
.mq-row.is-svc span i svg{width:17px;height:17px}
@keyframes mqGo{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- portfolio: directory + detail */
.pd{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}
.pd-bar{display:flex;gap:10px;align-items:center;margin:-10px 0 16px}
.pd-bar .seg button{font-size:15px;padding:10px 13px}
.pd-card{position:relative;padding:20px 22px 18px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.pd-card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--blue),var(--blue-300))}
.pd-card>*{transition:opacity .28s}
.pd-card.is-swap>*{opacity:0}
.pd-head{display:flex;gap:14px;align-items:center;margin:4px 0 12px}
.pd-head .pf-mono{width:56px;height:56px;border-radius:15px;font-size:18px}
.pd-head b{display:block;font:800 25px/1.15 var(--f-display);color:var(--ink);letter-spacing:-.015em}
.pd-head small{display:block;font-size:14.5px;color:var(--muted);margin-top:3px}
.pd-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.pd-chips span{padding:7px 10px;border-radius:999px;background:var(--blue-050);color:var(--blue-700);font:650 13px/1 var(--f-display)}
.pd-list{list-style:none;margin:0;padding:10px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.pd-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.38;color:var(--ink)}
.pd-list .ic{color:var(--ok);flex:none;margin-top:2px}
.pd-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pd-links a{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--line);text-decoration:none;font:650 13px/1 var(--f-display);color:var(--blue-700);white-space:nowrap}
.pd-links a:hover{border-color:var(--blue-200)}

/* ---------------------------------------------------------------- portfolio: clients x services */
.mx{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-1)}
.mx th,.mx td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center;transition:background .3s}
.mx thead th{font:750 13px/1.2 var(--f-display);color:var(--ink);background:var(--alt);vertical-align:bottom}
.mx tbody th{text-align:left;font:700 14.5px/1.2 var(--f-display);color:var(--ink);white-space:nowrap}
.mx tbody th small{display:block;font:500 12px/1.2 var(--f-body);color:var(--muted);margin-top:2px}
.mx tbody tr:last-child th,.mx tbody tr:last-child td{border-bottom:0}
.mx td i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-050)}
.mx td i.o{background:#fff;border:2px solid var(--blue-300);box-shadow:none}
.mx .is-hl{background:var(--blue-050)}
.mx-legend{display:flex;gap:18px;align-items:center;margin:0 0 10px;font:500 15px/1 var(--f-body);color:var(--muted)}
.mx-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:-1px}
.mx-legend i.o{background:#fff;border:2px solid var(--blue-300)}

/* ---------------------------------------------------------------- portfolio: map extras */
.pm-pin.is-hollow i{background:#fff;box-shadow:0 0 0 3px var(--blue-300)}
.pm-pin.is-hollow i::before{display:none}
.pm-pin.is-hollow b{color:var(--muted)}
.pm-stats{display:flex;flex-direction:column;gap:16px}
.pm-stat{padding:22px 24px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.pm-stat b{display:block;font:800 60px/1 var(--f-display);color:var(--blue);letter-spacing:-.03em}
.pm-stat small{display:block;font:650 17px/1.3 var(--f-display);color:var(--ink);margin-top:8px}
.pm-note{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.pm-legend{display:flex;gap:16px;margin-top:6px;font:500 14px/1 var(--f-body);color:var(--muted)}
.pm-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:-1px}
.pm-legend i.o{background:#fff;border:2px solid var(--blue-300)}

/* ---------------------------------------------------------------- portfolio: client stories */
.st{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px;align-items:start}
.st-lead{font-size:19px;line-height:1.5;margin:14px 0 0;color:var(--body)}
.st-tl{list-style:none;margin:22px 0 0;padding:0 0 0 18px;position:relative;display:flex;flex-direction:column;gap:12px}
.st-tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--blue-100)}
.st-tl li{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.slide.is-in .st-tl li,.deck.is-overview .st-tl li{opacity:1;transform:none}
.st-tl li::before{content:"";position:absolute;left:-18px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.st-tl b{font:750 14px/1.3 var(--f-display);color:var(--blue-700)}
.st-tl span{font-size:16px;line-height:1.4;color:var(--ink)}
.st-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.st-links a{display:inline-flex;gap:7px;align-items:center;padding:10px 13px;border-radius:11px;border:1px solid var(--line);background:#fff;text-decoration:none;font:650 14.5px/1 var(--f-display);color:var(--blue-700)}
.st-links a:hover{border-color:var(--blue-200)}
.st-viz{position:relative;height:640px}
.st-viz .bw{width:760px;height:462px}
.st-viz .bw-view{height:422px}
.st-viz .ph{top:120px;right:-10px;width:220px;height:450px;border-radius:34px;padding:10px}
.st-viz .ph-view{border-radius:26px}
.st-mini{position:absolute;left:0;right:0;top:486px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.st-m{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-decoration:none;color:inherit}
.st-m:hover{border-color:var(--blue-200)}
.st-m-img{width:150px;height:84px;border-radius:9px;overflow:hidden;flex:none;background:var(--blue-050);border:1px solid var(--line)}
.st-m-img img{width:100%;height:100%;object-fit:cover;object-position:top}
/* next to a phone: the cards stack in the space left of it */
.st-mini--side{right:236px;grid-template-columns:minmax(0,1fr);gap:10px}
.st-mini--side .st-m{padding:8px 10px}
.st-mini--side .st-m-img{width:112px;height:63px}
.st-m b{display:block;font:750 16px/1.25 var(--f-display);color:var(--ink)}
.st-m small{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
/* the TRE network: four sites around shared events and forms */
.nw{position:relative;width:820px;height:640px}
.nw-svg{position:absolute;inset:0;overflow:visible}
.nw-svg path{fill:none;stroke:var(--blue-200);stroke-width:2;stroke-dasharray:3 9;animation:flow 2s linear infinite}
.nw-core{position:absolute;left:410px;top:300px;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:#137A4A;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  box-shadow:0 0 0 14px rgba(19,122,74,.1),0 0 0 34px rgba(19,122,74,.05),0 24px 50px -24px rgba(19,122,74,.8);z-index:2}
.nw-core .ic{font-size:30px}
.nw-core b{font:800 17px/1.2 var(--f-display);max-width:150px}
.nw-core small{font-size:12.5px;opacity:.85;max-width:150px}
.nw-n{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:250px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden;text-decoration:none;color:inherit;z-index:3}
.nw-n:hover{border-color:var(--blue-200)}
.nw-n .nw-img{height:130px;overflow:hidden;background:var(--blue-050)}
.nw-n .nw-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.nw-n b{display:block;padding:9px 12px 0;font:750 15px/1.2 var(--f-display);color:var(--ink)}
.nw-n small{display:block;padding:2px 12px 10px;font-size:12.5px;color:var(--muted)}
.nw-chip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:inline-flex;gap:8px;align-items:center;padding:9px 13px;border-radius:999px;background:#fff;border:1px dashed var(--blue-200);font:650 13.5px/1 var(--f-display);color:var(--ink);white-space:nowrap;z-index:3}
.nw-chip .ic{color:#137A4A}

/* ---------------------------------------------------------------- portfolio: proposals, concepts, paused */
.po{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.po-c{display:flex;flex-direction:column;gap:5px;padding:18px 18px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);min-height:210px}
.po-c b{font:750 17px/1.25 var(--f-display);color:var(--ink);margin-top:6px}
.po-c small{font-size:13px;color:var(--muted)}
.po-c p{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--body)}
.po-k{align-self:flex-start;font:800 10.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:var(--amber-050);color:var(--amber)}
.po-k--concept{background:var(--odoo-050);color:var(--odoo)}
.po-k--paused{background:#EEF0F4;color:var(--muted)}
.pf-st{display:inline-block;font:800 10.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:var(--ok-050);color:var(--ok);margin-left:8px;vertical-align:3px}
.pf-st--progress{background:var(--blue-050);color:var(--blue-700)}
.pf-st--proposal{background:var(--amber-050);color:var(--amber)}