/* parts.css: filters, dot-reveal images and the project details pane. Used by core.css and by template 21v. */
/* filter rows: text tabs with an underline, never pills */
.tabs{display:flex;flex-wrap:wrap;gap:4px 18px}
.tabs button{padding:5px 0;border-bottom:2px solid transparent;font-size:13.5px;opacity:.62;transition:opacity .15s}
.tabs button:hover{opacity:1}
.tabs button[aria-pressed=true]{opacity:1;border-bottom-color:currentColor}
.tabs button i{font-style:normal;font-size:10.5px;opacity:.6;margin-left:2px}
.tabs button span{opacity:.6}
.lbl{font:500 10.5px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.6;min-width:84px;padding-top:7px}
.frow{display:flex;gap:10px;align-items:flex-start}
.q{display:flex;align-items:center;gap:10px;border-bottom:2px solid currentColor;padding:6px 0;flex:1}
.q input{flex:1;border:0;background:transparent;outline:0;font:400 17px 'Space Grotesk',sans-serif;color:inherit}
.q input::placeholder{color:inherit;opacity:.45}
.q kbd{font:500 11px 'Space Grotesk',sans-serif;opacity:.5}
select{appearance:none;-webkit-appearance:none;border:0;border-bottom:2px solid currentColor;background:transparent;font:500 13.5px 'Space Grotesk',sans-serif;color:inherit;padding:8px 22px 8px 0;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 9px) 52%,calc(100% - 4px) 52%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
select option{color:#0b0b0c}
.count b{font-weight:600}
.reset{font-size:13px;text-decoration:underline;text-underline-offset:3px;opacity:.8}
/* dither reveal for images (from Tour Guide's All work grid) */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.dot{-webkit-mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/7px 7px;mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/7px 7px;--r:0px;transition:--r 1.1s var(--e),transform 1.1s var(--e)}
.in .dot,.dot.in{--r:6px}
/* details pop-up: centred, 20px on all four corners, coloured by the project's category.
   It pops in with a springy scale and shrinks back out on close. */
.scrim{position:fixed;inset:0;background:rgba(11,11,12,.55);opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
#drawer{position:fixed;z-index:41;inset:0;margin:auto;width:min(1120px,94vw);height:min(88vh,880px);border-radius:20px;background:var(--pc,var(--navy));color:var(--pf,#fbfbf8);overflow:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;box-shadow:0 40px 100px rgba(0,0,0,.35)}
#drawer.on{visibility:visible;opacity:1}
#drawer .x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:#fff;color:#0b0b0c;font-size:21px;box-shadow:0 2px 0 rgba(0,0,0,.2)}
#drawer .dh{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px}
#drawer .dh figure{overflow:hidden;border-radius:12px;aspect-ratio:4/3;background:rgba(0,0,0,.2)}
#drawer .dh .m{grid-column:span 2;aspect-ratio:16/10}
#drawer .dh img{width:100%;height:100%;object-fit:cover;display:block}
#drawer .di{padding:14px 32px 44px}
@media(min-width:960px){#drawer{display:grid;grid-template-columns:1fr 1fr;align-items:start}#drawer .dh{position:sticky;top:0;padding:30px}#drawer .di{padding:44px 44px 50px 14px}}
#drawer .dk,#drawer h3,#drawer .ba b,#drawer dt{display:block;font:500 11px 'Space Grotesk',sans-serif;letter-spacing:.11em;text-transform:uppercase;opacity:.65}
#drawer h2{font:600 clamp(42px,4.6vw,72px)/.92 'Funnel Display',sans-serif;letter-spacing:-.04em;margin:10px 0 8px}
#drawer .dp{opacity:.75}
#drawer .db{font:400 clamp(18px,1.45vw,22px)/1.38 'Funnel Display',sans-serif;margin:18px 0 0;max-width:40ch}
#drawer .ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0}
#drawer .ba>div{padding:16px 16px 18px;border-radius:12px;background:var(--pc2)}
#drawer .ba b{margin-bottom:8px}
#drawer .ba p{font-size:14.5px;line-height:1.45}
#drawer .ba .af{background:#fbfbf8;color:#0b0b0c}
#drawer .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#drawer h3{margin-bottom:10px}
#drawer ul{list-style:none;display:grid;gap:7px;font-size:14px;line-height:1.4}
#drawer li{padding-left:16px;position:relative}
#drawer li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;background:currentColor;border-radius:2px;opacity:.55}
#drawer .df{display:flex;gap:40px;margin:28px 0 0}
#drawer dd{font:600 19px 'Funnel Display',sans-serif;margin-top:3px}
#drawer .da{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
#drawer .da .btn:not(.solid){background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
#drawer .da .btn.solid{background:var(--pf,#fbfbf8);color:var(--pc,var(--navy))}
#drawer .dn{font-size:12.5px;opacity:.6}
#drawer .dnav{display:flex;justify-content:space-between;margin-top:26px;padding-top:14px}
#drawer .dnav button{opacity:.75;font-weight:500}#drawer .dnav button:hover{opacity:1}
#drawer .dh,#drawer .di{transition:opacity .35s .12s,transform .5s .1s var(--e)}
#drawer:not(.on) .dh,#drawer:not(.on) .di,#drawer.swap .dh,#drawer.swap .di{opacity:0;transform:translateY(12px);transition-delay:0s}
/* entrance: pop */
#drawer{transform:scale(.86);transition:transform .5s cubic-bezier(.34,1.5,.64,1),opacity .25s,visibility 0s .5s}
#drawer.on{transform:none;transition-delay:0s}
html.pane-open{overflow:hidden}
@media(max-width:700px){#drawer{width:94vw;height:90vh}#drawer .ba,#drawer .cols{grid-template-columns:1fr}#drawer .di{padding:10px 18px 40px}#drawer .dh{padding:14px}}
@media (prefers-reduced-motion:reduce){#drawer{transition:opacity .2s!important;transform:none!important}}
.frow select{max-width:300px;flex:none}
select.set{font-weight:600}
.fsel{flex-wrap:wrap;align-items:flex-end;gap:14px 28px}
.fsel label{display:flex;flex-direction:column;gap:2px}
.fsel .lbl{padding-top:0;min-width:0}
/* "Start a project like this" chooser: WhatsApp or email */
#ask{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:16px;background:rgba(11,11,12,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .3s}
#ask.on{opacity:1;visibility:visible;transition:opacity .25s}
#ask .ak{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;background:#fbfbf8;color:#0b0b0c;border-radius:20px;padding:26px 24px 24px;box-shadow:0 40px 90px rgba(0,0,0,.35);transform:scale(.88);transition:transform .45s cubic-bezier(.34,1.5,.64,1)}
#ask.on .ak{transform:none}
#ask .x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:#ececec;color:#0b0b0c;font-size:20px}
#ask .dk{font:500 11px 'Space Grotesk',sans-serif;letter-spacing:.11em;text-transform:uppercase;opacity:.6;padding-right:44px}
#ask h3{font:600 clamp(26px,3vw,34px)/1.05 'Funnel Display',sans-serif;letter-spacing:-.03em;margin:8px 0 18px;padding-right:30px}
#ask .opt{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;border-radius:14px;background:#ececec;margin-top:10px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s;outline-offset:3px}
#ask .opt:hover{transform:translateY(-2px);background:#e2e2e2}
#ask .opt.wa{background:#0b0b0c;color:#fbfbf8}#ask .opt.wa:hover{background:#222}
#ask .opt small{font-size:11.5px;opacity:.65}
#ask .opt b{font:600 22px/1.1 'Funnel Display',sans-serif;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){#ask .ak{transition:none;transform:none}}