/* ============ Refinements: details, glossary, cards, founder, articles, Venice layers ============ */

/* ---------- smooth plus / close icons ---------- */
.svc-item summary::after,.faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-left:auto;font-size:0;
  background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--graphite);transition:transform .45s var(--ease),background-color .3s,color .3s,box-shadow .3s}
.faq summary::after{position:absolute;right:4px;top:50%;margin-top:-11px}
.svc-item[open]:not(.closing) summary::after,.faq details[open]:not(.closing) summary::after{transform:rotate(135deg);background-color:var(--green);color:#fff;box-shadow:none}
.svc-item summary:hover::after,.faq summary:hover::after{box-shadow:inset 0 0 0 1px var(--red);color:var(--red)}
.svc-item[open]:not(.closing) summary:hover::after,.faq details[open]:not(.closing) summary:hover::after{color:#fff}
details>:not(summary){transition:opacity .4s var(--ease),transform .45s var(--ease)}
details.opening>:not(summary){animation:dIn .45s var(--ease)}
details.closing>:not(summary){opacity:0;transform:translateY(-6px)}
@keyframes dIn{from{opacity:0;transform:translateY(-6px)}}
.svc-item summary::before{background:var(--red)}

/* ---------- glossary ---------- */
.letters{gap:5px}
.letters button{width:32px;height:32px;border-radius:8px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.letters button:hover{background:#e3e0d9;transform:translateY(-1px)}
.letters button[aria-pressed=true]{background:var(--green);color:#fff}
.letters button.all{width:auto;padding:0 12px}
.g-count{flex-basis:100%;margin:2px 0 0;color:var(--muted)}
.glo{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:560px;overflow:auto;padding:2px 8px 2px 0;margin:0}
.glo .g{background:#FFFFFE;border:1px solid var(--line);border-radius:12px;padding:14px 16px;animation:gIn .35s var(--ease) both}
.glo dt{margin:0 0 4px;font-family:var(--serif);font-size:1.02rem}
.glo dd{margin:0}
.g-empty{grid-column:1/-1;color:var(--muted)}
@keyframes gIn{from{opacity:0;transform:translateY(6px)}}
@media (max-width:900px){.glo{grid-template-columns:1fr}}

/* ---------- project cards: consistent hover ---------- */
.card .vis .hov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px;color:#fff;
  background:linear-gradient(0deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.62) 48%,rgba(10,11,13,0) 100%);opacity:0;transition:opacity .45s var(--ease)}
.card .vis .hov>*{transform:translateY(10px);transition:transform .55s var(--ease)}
.card .vis .hov .mono{color:var(--gold);font-size:.62rem}
.card .vis .hov p{margin:0;font-size:.86rem;line-height:1.45;color:#ECEAE4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .vis .hov .enter{font-weight:600;font-size:.85rem;display:inline-flex;gap:8px;align-items:center;border-top:1px solid rgba(255,255,255,.18);padding-top:10px}
.card .vis .hov .enter i{font-style:normal;color:var(--red);transition:transform .35s var(--ease)}
.card:hover .vis .hov,.card:focus-visible .vis .hov{opacity:1}
.card:hover .vis .hov>*,.card:focus-visible .vis .hov>*{transform:none}
.card:hover .vis .hov .enter i{transform:translateX(4px)}
.card:hover .vis img.cpt{transform:scale(1.06)}
.card:hover .feat{opacity:0}
.card .feat{transition:opacity .3s;background:var(--red);color:#fff}
.card:hover .go{background:var(--red)}
.grid.list .card .hov{display:none}

/* ---------- founder portrait ---------- */
.desk.portrait{max-width:440px;justify-self:end;width:100%}
.desk.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:center 18%}
.desk.portrait figcaption{left:14px;right:14px;bottom:14px;max-width:none}
.knight.photo{width:96px;height:96px;padding:0;overflow:hidden;background:none;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold)}
.knight.photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
@media (max-width:980px){.desk.portrait{justify-self:stretch;max-width:none}.desk.portrait img{aspect-ratio:1/1}}

/* ---------- insights cards ---------- */
.post{text-decoration:none;color:inherit;cursor:pointer}
.post .more{margin-top:auto;font-weight:600;font-size:.86rem;display:inline-flex;gap:8px;align-items:center}
.post .more i{font-style:normal;color:var(--red);transition:transform .35s var(--ease)}
.post:hover .more i{transform:translateX(4px)}
.post:first-child::before{background:url(../assets/ui/lens-lubin-c.webp) right 20%/contain no-repeat;opacity:.38;-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 75%);mask-image:linear-gradient(90deg,transparent 15%,#000 75%)}

/* ---------- article page ---------- */
.art{position:fixed;inset:0;z-index:120;background:var(--ivory);display:flex;flex-direction:column;opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.art.open{opacity:1;transform:none}
.art-top{display:flex;align-items:center;gap:18px;padding:12px clamp(16px,3vw,40px);border-bottom:1px solid var(--line);background:rgba(243,242,239,.92);backdrop-filter:blur(12px)}
.art-top .pw-crumb{margin-right:auto}
.art-scroll{flex:1;overflow:auto;overscroll-behavior:contain}
.art-body{max-width:1160px;margin:0 auto;padding:clamp(18px,3vw,34px) clamp(16px,3vw,40px) 70px}
.art-hero{margin:0;border-radius:22px;overflow:hidden;height:clamp(220px,38vh,400px);position:relative;background:var(--green)}
.art-hero.img img{width:100%;height:100%;object-fit:cover}
.art-hero.img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,13,.35),transparent 50%)}
.art-hero.seal{background:radial-gradient(70% 90% at 72% 50%,#2a2d33 0%,#15171A 60%,#0B0C0E 100%);display:flex;align-items:center;padding:0 clamp(24px,6vw,80px)}
.art-hero .topo{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(217,186,46,.22);stroke-width:1}
.art-hero .seal-in{position:relative;display:flex;flex-direction:column;gap:12px}
.art-hero .seal-in .mono{color:var(--gold)}
.art-hero .seal-in b{font:600 clamp(3rem,9vw,6.4rem)/.95 var(--serif);color:#fff;letter-spacing:-.02em}
.art-hero .seal-in em{font-style:normal;color:var(--red);margin:0 .18em}
.art-head{margin:34px 0 26px;max-width:860px}
.art-head h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.02;margin:0;color:var(--green-3)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,5vw,64px);align-items:start}
.art-text p{font-size:1.08rem;line-height:1.75;color:var(--graphite);max-width:66ch;margin:0 0 18px}
.art-text p.lead{font-family:var(--serif);font-size:1.45rem;line-height:1.4;color:var(--green-3)}
.art-founder{display:flex;gap:16px;align-items:center;margin:26px 0 22px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#FFFFFE}
.art-founder img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 32%}
.art-founder strong{display:block;font-size:1.15rem}
.art-founder span{font-size:.84rem;color:var(--muted)}
.art-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0 22px}
.art-gal button{padding:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/2}
.art-gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.art-gal button:hover img{transform:scale(1.04)}
.art-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:10px}
.art-side>.mono{color:var(--muted);margin:0 0 2px}
.rel{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#FFFFFE;text-decoration:none;color:inherit;transition:border-color .25s,transform .3s var(--ease)}
.rel:hover{border-color:var(--red);transform:translateY(-2px)}
.rel img{width:58px;height:44px;object-fit:cover;border-radius:8px;flex:none;background:var(--cream)}
.rel img.lg{object-fit:contain;padding:6px}
.rel span{display:flex;flex-direction:column;font-weight:600;font-size:.92rem;line-height:1.25}
.rel span em{font-style:normal;font-size:.58rem;color:var(--muted);margin-bottom:3px}
.rel i{margin-left:auto;font-style:normal;color:var(--red)}
.art-cta{margin-top:8px;padding:20px;border-radius:16px;background:var(--green);color:#fff;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.art-cta p{margin:0;font-size:1.3rem}
.art-cta .text-link{color:#fff;border-color:var(--gold)}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.art-nav a{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:var(--green-3);font-family:var(--serif);font-weight:600;font-size:1.1rem;transition:border-color .25s}
.art-nav a:last-child{text-align:right}
.art-nav a:hover{border-color:var(--red)}
.art-nav .mono{font-family:var(--mono);font-weight:400;color:var(--muted);font-size:.62rem}
@media (max-width:860px){.art-grid{grid-template-columns:1fr}.art-side{position:static}.art-top .btn{display:none}.art-nav{grid-template-columns:1fr}.art-nav a:last-child{text-align:left}}
.lb{z-index:160}

/* ---------- Venice cinematic world + layers ---------- */
.pw.cine .pw-scene{background:#0A0B0D}
.pw.cine #pwImg{transition:opacity .35s var(--ease)}
.pw.cine .pw-cam img{object-fit:cover}
.pw-layers{position:absolute;inset:0;z-index:3;cursor:ew-resize;--cut:62%}
.pw-layers .ly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.pw-layers.plan .ly{filter:saturate(1.1)}
.ly-tags span{position:absolute;transform:translate(-50%,-50%);font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:4px;background:rgba(10,11,13,.82);color:#fff;border-left:3px solid;white-space:nowrap;pointer-events:none;transition:opacity .25s}
.ly-tags .w{border-color:#3b82f6}.ly-tags .s{border-color:#22c55e}.ly-tags .d{border-color:#e5e7eb}
.pw-layers.plan .ly-tags{opacity:0}
.ly-handle{position:absolute;top:0;bottom:0;left:var(--cut);width:44px;margin-left:-22px;display:grid;place-items:center;cursor:ew-resize;touch-action:none}
.ly-handle i{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4)}
.ly-handle b{position:relative;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;font-size:1rem;box-shadow:0 6px 20px -6px rgba(0,0,0,.6),0 0 0 3px var(--red)}
.ly-lab{position:absolute;top:14px;font:600 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(10,11,13,.7);padding:7px 10px;border-radius:999px;pointer-events:none}
.ly-lab.l{left:14px}.ly-lab.r{right:14px}
.ly-modes{position:absolute;z-index:6;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(10,11,13,.75);backdrop-filter:blur(8px)}
.ly-modes button{border:0;border-radius:999px;padding:7px 14px;font:600 .74rem/1 var(--sans);background:none;color:#ddd;cursor:pointer}
.ly-modes button[aria-pressed=true]{background:#fff;color:var(--green)}
.art-hero.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;background:none;height:clamp(260px,42vh,420px)}
.art-hero.mosaic button{padding:0;border:0;overflow:hidden;cursor:zoom-in;position:relative}
.art-hero.mosaic button:first-child{grid-row:span 2}
.art-hero.mosaic button:nth-child(4){grid-column:span 2}
.art-hero.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.art-hero.mosaic button:hover img{transform:scale(1.04)}
.art-hero.mosaic figcaption{position:absolute;left:14px;bottom:14px;background:rgba(10,11,13,.75);color:#fff;padding:7px 10px;border-radius:999px;font-size:.58rem}
.art-hero.portrait img{position:absolute;right:0;top:0;height:100%;width:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.art-hero.portrait .seal-in b{font-size:clamp(2.4rem,6vw,4.6rem)}
.pw.cine .pw-scene{flex:none;aspect-ratio:16/9;min-height:0}
.ly-modes{left:14px;top:14px;transform:none}
.ly-lab{top:auto;bottom:16px}
.story-top .desk.portrait{width:min(400px,100%);max-width:400px;justify-self:end;align-self:start}
@media (min-width:981px){.story-top:has(.desk.portrait){grid-template-columns:minmax(0,1fr) 380px}}
.story-top .desk.portrait{width:100%;max-width:380px}
.desk.portrait img{height:auto;max-height:500px;display:block}
.desk.portrait figcaption{position:static;border-radius:0 0 22px 22px;background:#FFFFFE}
/* v3 art */
.art-hero .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-hero.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,13,.9) 0%,rgba(10,11,13,.66) 45%,rgba(10,11,13,.2) 100%);pointer-events:none}
.art-hero.has-bg .seal-in,.art-hero.has-bg>img:not(.bgi){z-index:2}
.art-hero.has-bg .topo{z-index:1;opacity:.6}
.art-hero.portrait.has-bg>img:not(.bgi){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%)}
.pthumb{display:block;margin:-24px -24px 6px;height:120px;background:center/cover no-repeat;border-radius:18px 18px 0 0}
.post:first-child::before{background:url(../assets/v3/f-office-dusk.webp) center/cover no-repeat;opacity:.45;-webkit-mask-image:none;mask-image:none}
.post:first-child::after{content:"";position:absolute;right:24px;bottom:24px;width:120px;height:120px;border-radius:50%;background:url(../assets/ui/lens-lubin-c.webp) center 32%/cover no-repeat;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold),0 20px 40px -10px rgba(0,0,0,.6)}
.post:first-child>*{position:relative;z-index:1;max-width:70%}
.pw.cover-on .pw-scene{background:#0A0B0D}
.pw.cover-on .pw-cam img{object-fit:cover}