/* ================= interactive features (from the "Websites Ideas for Peter" doc) ================= */

/* ---------- project hover: list over image ---------- */
.where{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:960px){.where{grid-template-columns:1fr}}
.phover{position:relative;border:1px solid var(--line);overflow:hidden;min-height:clamp(440px,46vw,580px);display:grid;grid-template-rows:1fr auto}
.phover__imgs{position:absolute;inset:0;z-index:0}
.phover__imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.6s var(--ease);filter:saturate(.8) contrast(1.05)}
.phover__imgs img.on{opacity:1;transform:scale(1)}
.phover__imgs::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,30,72,.94) 0%,rgba(11,30,72,.8) 55%,rgba(11,30,72,.4) 100%)}
.phover__list{position:relative;z-index:1;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.phover__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;color:var(--text-2);transition:color .3s var(--ease),background .4s var(--ease),padding-left .4s var(--ease)}
.phover__item:last-child{border-bottom:0}
.phover__item.on,.phover__item:hover{color:var(--text);background:rgba(255,255,255,.04);padding-left:clamp(24px,3vw,36px)}
.phover__n{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);margin-right:12px}
.phover__name{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:500;font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:-.01em}
.phover__stat{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.phover__item.on .phover__stat{color:var(--text-2)}
.phover__cap{position:relative;z-index:1;padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,28px) clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,rgba(11,30,72,0),rgba(11,30,72,.92) 30%,rgba(11,30,72,.97))}
.phover__cap span,.phover__cap b{max-width:40ch}
.phover__cap b{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:500;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.01em;display:block}
.phover__cap span{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.phover__cap a{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none;margin-top:6px}

/* ---------- Dubai map with popups ---------- */
.dmap{position:relative;border:1px solid var(--line);height:100%;min-height:clamp(440px,46vw,580px);background:var(--ink-2);overflow:hidden}
@media (max-width:960px){.dmap{height:clamp(380px,60vw,520px)}}
.dmap .leaflet-container{background:#F1F1F1;font-family:var(--body)}
.dmap .leaflet-tile-pane{filter:grayscale(1) contrast(1.02) brightness(1.03)}
.dmap .leaflet-control-attribution{background:rgba(255,255,255,.85);color:var(--text-3);font-family:var(--mono);font-size:9px}
.dmap .leaflet-control-attribution a{color:var(--text-2)}
.dmap .leaflet-bar{border:1px solid var(--line-2);box-shadow:none}
.dmap .leaflet-bar a{background:var(--ink-2);color:var(--text);border-bottom-color:var(--line)}
.dmap .leaflet-bar a:hover{background:var(--ink-3)}
.pin{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(11,27,58,.14);position:relative;transition:transform .3s var(--ease)}
.pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(11,27,58,.45);animation:pulse 2.4s var(--ease) infinite}
.pin--office{background:var(--cool);box-shadow:0 0 0 4px rgba(141,166,194,.2)}
.pin--office::after{border-color:rgba(141,166,194,.5)}
.pin.on{transform:scale(1.35)}
@keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.dmap .leaflet-popup-content-wrapper{background:var(--ink-2);color:var(--text);border:1px solid var(--line-2);border-radius:2px;box-shadow:0 20px 50px rgba(11,27,58,.18)}
.dmap .leaflet-popup-tip{background:var(--ink-2);border:1px solid var(--line-2)}
.dmap .leaflet-popup-content{margin:16px 18px;min-width:220px}
.dmap .leaflet-popup-close-button{color:var(--text-3)!important;font-size:18px!important;top:6px!important;right:8px!important}
.pop__h{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;margin:0 0 4px}
.pop__s{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.06em;margin:0 0 12px}
.pop__rows{display:grid;grid-template-columns:auto auto;gap:6px 14px;font-size:var(--fs-sm)}
.pop__rows dt{color:var(--text-3)}
.pop__rows dd{margin:0;font-family:var(--mono);font-size:var(--fs-xs);text-align:right;color:var(--text)}
.pop__a{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2)}
.pop__a:hover{border-color:var(--accent)}

/* ---------- listings with feature filters ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vw,32px)}
.chips__sep{width:1px;background:var(--line);margin-inline:6px}
.chip{appearance:none;background:none;border:1px solid var(--line-2);color:var(--text-2);cursor:pointer;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em;padding:8px 13px;border-radius:2px;display:inline-flex;align-items:center;gap:7px;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.chip::before{content:"";width:5px;height:5px;background:var(--text-3);transition:background .3s var(--ease)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.chip[aria-pressed="true"]::before{background:var(--ink)}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:980px){.lgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.lgrid{grid-template-columns:1fr}}
.lcard{border:1px solid var(--line);background:var(--ink-2);display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease),opacity .45s var(--ease)}
.lcard:hover{transform:translateY(-5px);border-color:var(--line-2)}
.lcard.out{opacity:0;transform:scale(.96);pointer-events:none;position:absolute;visibility:hidden}
.lcard__v{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3)}
.lcard__v img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.2s var(--ease)}
.lcard:hover .lcard__v img{transform:scale(1.05)}
.lcard__st{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;background:rgba(10,13,19,.85);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.lcard__st--sold{color:var(--text-3)}
.lcard__b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.lcard__p{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;font-size:1.35rem;letter-spacing:-.02em;line-height:1}
.lcard__p small{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);margin-left:6px;letter-spacing:.04em}
.lcard__t{font-family:var(--display);font-variation-settings:"wdth" 104;font-weight:500;font-size:1.0625rem;line-height:1.25}
.lcard__c{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.06em}
.lcard__specs{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2);margin-top:4px}
.lcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.lcard__tags span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);padding:3px 7px}
.lcard__a{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text);padding-top:14px;display:flex;gap:8px;align-items:center}
.lgrid__empty{grid-column:1/-1;padding:40px;border:1px dashed var(--line-2);text-align:center;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-3)}
.lnote{margin-top:18px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}

/* ---------- image wipe reveal ---------- */
.wipe{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:21/9;min-height:280px;max-height:560px;cursor:none;background:var(--ink-2)}
@media (max-width:700px){.wipe{aspect-ratio:4/3;cursor:auto}}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.wipe__blur{filter:blur(18px) saturate(.5) brightness(.45);transform:scale(1.08)}
.wipe__sharp{clip-path:circle(var(--r,0px) at var(--x,50%) var(--y,50%));transition:clip-path .12s linear;filter:saturate(.95)}
.wipe__ring{position:absolute;left:var(--x,50%);top:var(--y,50%);width:calc(var(--r,0px)*2);height:calc(var(--r,0px)*2);border-radius:50%;border:1px solid rgba(237,232,223,.55);transform:translate(-50%,-50%);pointer-events:none;transition:width .12s linear,height .12s linear;box-shadow:0 0 0 1px rgba(0,0,0,.4) inset}
.wipe__txt{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(20px,4vw,44px);z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:10px;max-width:38ch}
.wipe__txt h2{font-size:clamp(1.6rem,3.6vw,2.9rem);text-shadow:0 2px 24px rgba(0,0,0,.7)}
.wipe__txt p{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}

/* ---------- Dubai facts: counters + rings ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(24px,3vw,36px)}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}
.fact{background:var(--ink);padding:clamp(22px,2.8vw,32px) clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:12px;min-height:200px}
.fact__v{font-family:var(--display);font-variation-settings:"wdth" 116;font-weight:600;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.fact__v small{font-size:.5em;color:var(--text-2);margin-left:2px;font-variation-settings:"wdth" 108;font-weight:500}
.fact__l{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);line-height:1.6}
.fact p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;margin-top:auto}
.ring{position:relative;width:96px;height:96px;flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring__bg{stroke:var(--line-2)}
.ring__fg{stroke:var(--accent);stroke-linecap:butt;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1.8s var(--ease)}
.ring__v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.fact--ring{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
.fact--ring .fact__txt{display:flex;flex-direction:column;gap:8px;flex:1;min-width:140px}
.fact--ring p{margin-top:0}

/* ---------- Instagram 3D profile card ---------- */
.social{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.6fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.social{grid-template-columns:1fr}}
.card3d{perspective:1400px;width:100%;max-width:360px;aspect-ratio:4/5.4;cursor:pointer;margin-inline:auto}
.card3d__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.card3d.flip .card3d__in{transform:rotateY(180deg)}
.card3d:hover .card3d__in{transform:rotateY(180deg)}
@media (hover:none){.card3d:hover .card3d__in{transform:none}.card3d.flip .card3d__in{transform:rotateY(180deg)}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line-2);background:var(--ink-2);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px rgba(11,27,58,.14)}
.face--b{transform:rotateY(180deg);padding:26px;gap:14px}
.face__img{position:relative;flex:0 0 58%;overflow:hidden;background:var(--ink-3)}
.face__img img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.85)}
.face__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink-2),transparent 30%)}
.face__flip{position:absolute;top:12px;right:12px;width:32px;height:32px;border:1px solid rgba(11,27,58,.15);background:rgba(255,255,255,.88);display:grid;place-items:center;color:var(--text-2);font-family:var(--mono);font-size:12px;z-index:2}
.face__body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.face__name{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:600;font-size:1.3rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.face__name svg{color:var(--cool)}
.face__h{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.08em}
.face__bio{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.face__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.face__stats{display:flex;gap:16px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2)}
.face__stats b{color:var(--text);font-weight:500}
.face__tags{display:flex;flex-wrap:wrap;gap:6px}
.face__tags span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line-2);padding:4px 8px}
.face__links{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2)}
.face__links a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2)}
.face--b .eyebrow{color:var(--text-3)}

/* ---------- reel carousel ---------- */
.carousel{position:relative}
.carousel__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;cursor:grab;scroll-behavior:smooth}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel__track .reel{flex:0 0 clamp(250px,26vw,300px);scroll-snap-align:start}
.carousel__nav{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px}
.carousel__btn{appearance:none;width:40px;height:40px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:border-color .3s var(--ease),background .3s var(--ease)}
.carousel__btn:hover{border-color:var(--accent);background:var(--ink-3)}
.carousel__btn:disabled{opacity:.35;cursor:default}
.carousel__dots{display:flex;gap:6px;margin-top:14px}
.carousel__dots span{width:18px;height:2px;background:var(--line-2);transition:background .3s var(--ease),width .3s var(--ease)}
.carousel__dots span.on{background:var(--accent);width:32px}

/* ---------- lead popup ---------- */
.lead{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:58;width:min(360px,calc(100vw - 28px));background:var(--ink-2);border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(11,27,58,.2);padding:22px 22px 20px;display:flex;flex-direction:column;gap:12px;transform:translateY(24px) scale(.98);opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.lead.show{transform:none;opacity:1;pointer-events:auto}
@media (max-width:760px){.lead{bottom:64px}}
.lead__x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;background:none;color:var(--text-3);cursor:pointer;font-size:18px;line-height:1}
.lead__x:hover{color:var(--text)}
.lead__h{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:600;font-size:1.15rem;letter-spacing:-.015em;line-height:1.2;padding-right:24px}
.lead p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.lead__row{display:flex;gap:8px;flex-wrap:wrap}
.lead__row .btn{flex:1;padding:11px 14px}
.lead__meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-3)}
.lead__meta img{width:34px;height:34px;object-fit:cover;object-position:center top;border:1px solid var(--line-2)}
.lead__dot{width:6px;height:6px;border-radius:50%;background:#62A183;box-shadow:0 0 0 3px rgba(98,161,131,.2)}

@media (prefers-reduced-motion:reduce){
  .pin::after{animation:none}
  .card3d__in,.phover__imgs img,.ring__fg,.lead{transition:none}
}

/* components that stay dark because they sit on photos */
.phover,.wipe{--text:#F2EEE6;--text-2:#C2CAD6;--text-3:#94A0B0;color:var(--text)}
.phover{border-color:#0F2C66;background:#0F2C66}
.wipe__ring{border-color:rgba(255,255,255,.7)}
.lead__dot{background:#2F8F63}

/* overrides that must come after the base facts grid */
.facts.reveal{gap:clamp(12px,1.4vw,18px);background:transparent;border:0}

/* navy map popups */
.dmap .leaflet-popup-content-wrapper{background:#0F2C66;border-color:#0F2C66;--text:#FFFFFF;--text-2:#C9D6F0;--text-3:#9DB2DC;color:#fff;border-radius:14px;box-shadow:0 24px 50px rgba(11,27,58,.35)}
.dmap .leaflet-popup-tip{background:#0F2C66;border-color:#0F2C66}
.dmap .leaflet-popup-content-wrapper a.pop__a{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.dmap .leaflet-popup-content-wrapper a.pop__a:hover{border-bottom-color:#fff}
.dmap .leaflet-popup-close-button{color:#C9D6F0!important}
.dmap .leaflet-tile-pane{filter:grayscale(1) contrast(1.02) brightness(1.03)}

/* ================= phone fixes ================= */
.social{grid-template-columns:minmax(280px,.9fr) minmax(0,1.6fr)}
@media (max-width:900px){.social{grid-template-columns:minmax(0,1fr)}.carousel{min-width:0}.card3d{max-width:340px}}
@media (max-width:700px){
  .wipe{aspect-ratio:auto;height:320px;min-height:0;width:100%}
  .wipe__txt{right:20px;max-width:none}
  .wipe__txt h2{font-size:1.45rem}
  .facts.reveal{grid-template-columns:1fr 1fr;gap:10px}
  .flipc,.flipc__in{min-height:200px}
  .flipc__f,.flipc__b{padding:16px;border-radius:14px;gap:8px}
  .fact__v{font-size:1.9rem}
  .ring{width:72px;height:72px}.ring__v{font-size:1rem}
  .flipc__b p{font-size:.8rem;line-height:1.5}
  .carousel__track .reel{flex-basis:78vw;max-width:300px}
  .phover{min-height:0}
  .dmap{min-height:0;height:340px}
}
@media (max-width:900px){.card3d{aspect-ratio:4/6.1}.face__img{flex-basis:50%}}