/* Page styles from the original design (archive-portfolio). Generated by tools/seed/services.php. */
/* shared bits for the expansion pages */
.nav nav a{padding:8px 11px;font-size:13.5px}
@media (max-width:1240px){.nav nav a{padding:8px 8px;font-size:13px}}
.sample{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;background:#ffe7ad;color:#4d3500;border-radius:999px;padding:4px 9px;white-space:nowrap}
.sample::before{content:"";width:6px;height:6px;border-radius:50%;background:#e09a00}
.real{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:999px;padding:4px 9px;white-space:nowrap}
.real::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.page-hero{position:relative;padding:150px 0 40px;text-align:center;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:-.05em}
.page-hero h1 .plus{color:var(--lime-2)}
.page-hero .dots{display:block;width:max-content;max-width:100%;margin:6px auto 0}
.page-hero p.sub{max-width:640px;margin:22px auto 0;font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2)}
.page-hero .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{border:0;border-radius:999px;background:var(--card);padding:9px 14px;font-size:14px;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgb(0 0 0/.06);transition:background-color .2s,color .2s,transform .2s}
.fchip:hover{transform:translateY(-1px)}
.fchip[aria-checked="true"]{background:var(--ink);color:#fff}
.fchip .ct{font-family:var(--mono);font-size:11px;opacity:.6;margin-left:6px}
.is-out{opacity:0!important;transform:scale(.96)!important;pointer-events:none}
.is-gone{display:none!important}
.logo{width:26px;height:26px;display:block;object-fit:contain}
.dk .logo,.logo.inv{filter:invert(1)}
@media (max-width:600px){.page-hero{padding-top:118px}.page-hero h1{font-size:clamp(2.1rem,9vw,2.6rem)}}

.filters{display:flex;justify-content:center;margin-top:28px}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:220px;grid-auto-flow:dense;gap:12px}
a.tile{display:block;text-decoration:none}
.tile{position:relative;border:0;padding:0;text-align:left;cursor:pointer;border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgb(0 0 0/.05);transition:opacity .35s,transform .35s var(--ease),box-shadow .3s;color:inherit;font:inherit}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgb(0 0 0/.45),0 0 0 1px rgb(0 0 0/.05)}
.tile.w4{grid-column:span 4}.tile.w5{grid-column:span 5}.tile.w6{grid-column:span 6}.tile.w7{grid-column:span 7}.tile.w8{grid-column:span 8}.tile.h2{grid-row:span 2}
.tile .vis{position:absolute;inset:0}
.tile .vis img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile:hover .vis img{transform:scale(1.05)}
.tile .badge{position:absolute;left:14px;top:14px;z-index:3}
/* drawn previews stop above the caption so it never covers them */
.tile .vis.v-app,.tile .vis.v-dash,.tile .vis.v-bars{bottom:84px}
.tile .vis.v-site{bottom:84px;padding:44px 18px 0}
.tile:not(.h2) .v-site .bar2{display:none}
.tile:not(.h2) .v-site{padding-top:40px}
.tile:not(.h2) .v-site .blocks{margin-top:0}
.tile:not(.h2) .v-site .blocks i{height:22px}
.tile:has(.v-site,.v-app,.v-dash,.v-bars){background:var(--card)}
.tile .cap{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;background:rgb(20 20 20/.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border-radius:var(--r-md);padding:12px 14px;display:grid;gap:6px;box-shadow:inset 0 1px 0 rgb(255 255 255/.15)}
.tile .cap b{font-weight:500;font-size:1.0625rem}
.tile .cap small{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#cfcfcb}
.tile .cap .st{display:flex;gap:6px;flex-wrap:wrap;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s}
.tile:hover .cap .st,.tile:focus-visible .cap .st{max-height:60px;opacity:1}
.tile .cap .st span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgb(255 255 255/.14)}
/* visuals */
.v-dark{background:var(--dark)}
.v-dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgb(255 255 255/.07) 1px,transparent 1.2px);background-size:16px 16px}
.v-app{background:linear-gradient(160deg,#e9fbf5,#f4f4f2);padding:52px 22px 96px;display:grid;gap:10px;align-content:start}
.v-app .row2{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:11px 13px;font-size:13.5px;box-shadow:0 0 0 1px var(--line)}
.v-app .row2 b{font-weight:500}
.v-app .st2{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#ececea}
.v-app .ok{background:#5ef0cf}.v-app .dr{background:var(--ink);color:#fff}
.v-app .hd{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.v-app .hd b{color:var(--ink);font-size:16px}
.v-site{padding:50px 18px 96px;display:grid;gap:8px;align-content:start}
.v-site .bar2{height:10px;border-radius:999px;background:rgb(20 20 20/.1);width:60%}
.v-site .h{height:18px;border-radius:6px;background:var(--ink);width:80%}
.v-site .h.s{width:55%;background:var(--acc)}
.v-site .blocks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px}
.v-site .blocks i{height:30px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.v-site .blocks i:nth-child(2){background:var(--dark)}
.v-site.lime{--acc:var(--lime-2);background:linear-gradient(160deg,#d0e6ff,#eef6fc)}
.v-site.teal{--acc:var(--primary,#1d4ed8);background:linear-gradient(160deg,#e6edff,#f4f4f2)}
.v-dash{padding:52px 18px 96px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;position:relative}
.v-dash .k{background:var(--dark-2);border-radius:10px;padding:10px;color:#fff}
.v-dash .k b{display:block;font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.v-dash .k small{font-family:var(--mono);font-size:9.5px;color:var(--dark-muted);text-transform:uppercase}
.v-dash svg{grid-column:1/-1;width:100%;height:60px}
.v-dash svg polyline{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 2.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.v-bars{padding:52px 20px 96px;display:flex;align-items:flex-end;gap:8px;height:100%}
.v-bars i{flex:1;border-radius:6px 6px 0 0;background:var(--ink-2);transform-origin:bottom;animation:grow 1.2s var(--ease) both}
.v-bars i.w{background:#e09a00}
@keyframes grow{from{transform:scaleY(0)}}
.v-flow{position:absolute;inset:0;padding:40px 0 80px}
.v-flow svg{width:100%;height:100%}
dialog.pf{border:0;padding:0;border-radius:var(--r-xl);max-width:min(760px,calc(100vw - 32px));width:100%;background:var(--bg);color:var(--ink);box-shadow:0 40px 90px -30px rgb(0 0 0/.6)}
dialog.pf::backdrop{background:rgb(20 20 20/.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pf .in-d{padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.pf .vis-d{position:relative;height:260px;border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.pf .top-d{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.pf h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.pf .type{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pf p{color:var(--ink-2)}
.pf .stk{display:flex;gap:6px;flex-wrap:wrap}
.pf .stk span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--panel)}
.pf .acts{display:flex;gap:8px;flex-wrap:wrap}
.pf .x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--panel);cursor:pointer;font-size:20px;line-height:1;z-index:5}
.pf .x:hover{background:#e1e1de}
.empty{text-align:center;color:var(--muted);padding:30px}
@media (max-width:1000px){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}.tile.w4,.tile.w5,.tile.w6,.tile.w7,.tile.w8{grid-column:span 6}.tile.h2{grid-row:span 2}}
@media (max-width:640px){.gallery{grid-auto-rows:200px}.tile.h2{grid-row:span 2}}
@media (prefers-reduced-motion:reduce){.v-dash svg polyline{animation:none;stroke-dashoffset:0}.v-bars i{animation:none}}
.v-photo{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
/* expansion: portfolio hub */
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.legend article{border-radius:var(--r-lg);padding:24px;display:grid;gap:12px;align-content:start;background:var(--card);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgb(0 0 0/.05)}
.legend article:nth-child(2){background:#fff6df}
.legend .real,.legend .sample{justify-self:start;white-space:normal}
.legend article:last-child{background:var(--dark);color:#fff}
.legend article:last-child p{color:#cfcfcb}
.legend h3{font-size:1.25rem;letter-spacing:-.02em}
.legend p{font-size:15px;color:var(--ink-2)}
.legend .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:rgb(255 255 255/.12);border-radius:999px;padding:4px 9px;justify-self:start}
.ktabs{background:var(--panel);border-radius:var(--r-xl);padding:clamp(18px,3vw,36px)}
.ktabs [role=tablist]{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.ktabs [role=tab]{border:0;border-radius:999px;padding:10px 16px;font:inherit;font-size:15px;cursor:pointer;background:var(--card);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgb(0 0 0/.06)}
.ktabs [role=tab][aria-selected=true]{background:var(--ink);color:#fff}
.ktabs [role=tabpanel]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,40px)}
.ktabs [role=tabpanel][hidden]{display:none}
.ktabs .prose{display:grid;gap:12px;color:var(--ink-2);align-content:start}
.ktabs .prose h3{font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.03em;color:var(--ink)}
.ktabs .side{display:grid;gap:8px;align-content:start}
.ktabs .side div{background:#fff;border-radius:var(--r-md);padding:14px 16px;display:grid;gap:4px;box-shadow:0 0 0 1px var(--line)}
.ktabs .side small{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ktabs .side span{font-size:14.5px}
.ktabs .side a{text-decoration:underline;text-underline-offset:3px}
.bar6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bar6 article{position:relative;border-radius:var(--r-lg);padding:26px 24px 24px;display:grid;gap:8px;align-content:end;min-height:200px;overflow:hidden;background:var(--glass-bg);box-shadow:var(--glass-edge)}
.bar6 article:nth-child(1),.bar6 article:nth-child(5){background:var(--lime)}
.bar6 article:nth-child(3){background:var(--dark);color:#fff}.bar6 article:nth-child(3) p{color:#cfcfcb}
.bar6 .big{position:absolute;top:10px;right:16px;font-size:clamp(3.4rem,6vw,5rem);font-weight:500;letter-spacing:-.06em;line-height:1;opacity:.12}
.bar6 h3{font-size:1.25rem;letter-spacing:-.02em;max-width:20ch}
.bar6 p{font-size:15px;color:var(--ink-2)}
.pf-faq .qa a{text-decoration:underline;text-underline-offset:3px}
.wq-more{display:flex;flex-wrap:wrap;gap:8px}
.wq-more a{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;background:var(--card);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgb(0 0 0/.06);font-size:15px;transition:transform .2s var(--ease)}
.wq-more a:hover{transform:translateY(-2px)}
.wq-more a small{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1000px){.legend,.bar6{grid-template-columns:1fr 1fr}.legend article:last-child{grid-column:1/-1}.ktabs [role=tabpanel]{grid-template-columns:1fr}.pf-faq.faq{grid-template-columns:1fr}}
@media (max-width:600px){.legend,.bar6{grid-template-columns:1fr}.bar6 article{min-height:0;padding-top:56px}}


/* Hub section rhythm (from the mock). */
.ix-content.ix-archive-extra > .sec{margin-block-start:clamp(88px,12vw,168px)}

/* Light tiles (site, app, dashboard sketches) get a solid paper caption with ink text; the frosted dark
   caption stays only on photo and dark tiles, where there is something behind the glass. */
.tile:has(.v-site,.v-app,.v-dash,.v-bars) .cap{background:#faf8f4;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px var(--line)}
.tile:has(.v-site,.v-app,.v-dash,.v-bars) .cap small{color:var(--muted)}
.tile:has(.v-site,.v-app,.v-dash,.v-bars) .cap .st span{background:var(--surface,#e7e3da);color:var(--ink)}