.project-pin {
    --brand-navy:#282749; --brand-blue:#1083c0; --brand-white:#fff;
    --pin-delay:0ms; --card-shift:0px;
    --pin-x:0px; --pin-y:0px;
    --pin-scale:1.80;
    appearance:none; position:relative; display:block; width:80px; height:102px;
    left:var(--pin-x); top:var(--pin-y);
    padding:0; margin:0; border:0; background:transparent; cursor:pointer;
    color:var(--brand-white); font-family:Inter,Arial,sans-serif; text-align:left; overflow:visible;
    pointer-events:none;
    -webkit-tap-highlight-color:transparent;
}
.project-pin *, .project-pin *::before, .project-pin *::after { box-sizing:border-box; }
.project-pin-shadow {
    position:absolute; width:44px; height:12px; left:18px; bottom:0; border-radius:50%;
    background:radial-gradient(ellipse,#05091fcc 0%,#080d2978 42%,#080d2918 68%,transparent 78%);
    transform:scale(var(--pin-scale, 1.80));
    transform-origin:50% 50%;
    transition:transform .28s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity .3s;
}
.project-pin-float {
    position:absolute; inset:0; opacity:1;
    transform:scale(var(--pin-scale, 1.80));
    transform-origin:38px 84px;
    transition:transform .28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.project-pin.has-entered .project-pin-float { animation:none; }
.project-pin-head { position:absolute; left:2px; top:2px; width:76px; height:95px; display:block; transition:top .2s ease-out; }
.project-pin-shape { display:block; shape-rendering:geometricPrecision; }
.project-pin-shape path, .project-pin-shape circle { pointer-events:visiblePainted; }
.project-pin-logo { position:absolute; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#ffffff; }
/* Large, perfectly centered HD logo inside pin head with clean white circular background */
.project-pin-head-logo {
    left: 38px;
    top: 36px;
    transform: translate(-50%, -50%);
    width: 53px;
    height: 53px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}
.project-pin-head-logo img {
    position: relative;
    display: block;
    max-width: 92%;
    max-height: 86%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    filter: none !important;
}
.project-pin-card-logo {
    right: 12px;
    top: 12px;
    width: 96px;
    height: 48px;
    z-index: 1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    padding: 4px 8px;
}
.project-pin-card-logo img {
    position: relative;
    display: block;
    max-width: 90%;
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
    filter: none !important;
}
.project-pin-logo.is-brand img { width:auto; height:auto; max-width:85%; max-height:85%; object-fit:contain; }
.project-pin.is-preview .project-pin-head { top:-4px; }
.project-pin.is-preview .project-pin-shadow { transform:scale(.8); opacity:.6; }
.project-pin.is-preview::after { content:''; position:absolute; width:264px; max-width:calc(100vw - 32px); left:50%; bottom:92px; height:24px; transform:translateX(calc(-50% + var(--card-shift))); pointer-events:auto; }
.project-pin.is-preview.card-below::after { bottom:auto; top:96px; }
.project-pin:focus { outline:none; }
.project-pin:focus-visible .project-pin-head { outline:2px solid #1083c0; outline-offset:3px; border-radius:40px; }
.project-pin-card {
    position:absolute; display:block; width:264px; max-width:calc(100vw - 32px); left:50%; bottom:114px;
    margin-left:-132px; left:calc(50% + var(--card-shift));
    border:1px solid var(--brand-blue); border-radius:16px; background:var(--brand-navy);
    box-shadow:0 18px 48px #0007,0 2px 8px #0004; overflow:hidden;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s,visibility .2s;
}
.project-pin.is-preview .project-pin-card { opacity:1; visibility:visible; pointer-events:auto; }
.project-pin.card-below .project-pin-card { bottom:auto; top:110px; transform-origin:50% 0; }
.project-pin-card::after { content:''; position:absolute; inset:0; border-radius:15px; box-shadow:inset 0 0 0 1px #ffffff08; pointer-events:none; }
.project-pin-photo { display:block; height:108px; position:relative; overflow:hidden; background:linear-gradient(130deg,var(--brand-blue),var(--brand-navy)); }
.project-pin-photo > img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s; }
.project-pin-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 30%,#282749e6); }
.project-pin.is-preview .project-pin-photo > img { transform:scale(1.04); }
.project-pin-photo.no-photo { height:92px; }.project-pin-photo.no-photo > img { display:none; }
.project-pin-category { position:absolute; z-index:1; left:15px; bottom:10px; color:#d8efff; font-size:9px; line-height:1; font-weight:600; letter-spacing:1.3px; text-transform:uppercase; }
.project-pin-body { display:block; padding:13px 16px 0; }
.project-pin-eyebrow { display:block; font-size:8px; line-height:1.5; font-weight:500; letter-spacing:1.65px; color:#94d7ff; margin-bottom:6px; }
.project-pin-name { display:block; font-size:17px; font-weight:600; line-height:1.28; letter-spacing:-.35px; color:var(--brand-white); white-space:normal; }
.project-pin-location { display:block; font-size:11px; line-height:1.5; color:#bdc5dd; margin-top:6px; }
.project-pin-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding:10px 0 12px; border-top:1px solid #1083c05c; color:#b6e4ff; font-size:11px; font-weight:500; }
.project-pin-arrow { font-size:20px; font-weight:400; line-height:1; }
@keyframes pin-arrive { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .project-pin .project-pin-float { opacity:1; transform:none; animation:none!important; } .project-pin *, .project-pin *::after { transition:none!important; } }