/* Listing films (bone). Ported from pages/real-estate-video.html .video-films, the page's .vd-player dialog and the shared price list and
   focus reveal (pages/_services-base.css). The reveal, the curve and the player are locked. */
  /* price list (bone; .dark on a dark ground): a short menu of what you get, in plain words, with the price beside it.
     Used on the Video and Aerial pages instead of spec-sheet pills. Every price reads the one store (data-price). */
  .video-films .price-list{list-style:none;margin:0;padding:0}
  .video-films .price-list li{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:14px 0;border-top:1px solid rgba(20,17,14,.16)}
  .video-films .price-list li:last-child{border-bottom:1px solid rgba(20,17,14,.16)}
  .video-films .price-list .what{font-size:17px;line-height:1.4;color:var(--plot-ink)}
  .video-films .price-list .what small{display:block;margin-top:2px;font-size:15px;color:var(--plot-slate)}
  .video-films .price-list b{flex:none;font-family:var(--font-display);font-weight:var(--wt-display);font-size:24px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--plot-ink)}
  .video-films .price-list.dark li{border-color:rgba(243,238,230,.16)}
  .video-films .price-list.dark .what,.video-films .price-list.dark b{color:var(--plot-bone)}
  .video-films .price-list.dark .what small{color:#C9C2DE}
  /* =========================================================
     FOCUS REVEAL (from rep-gallery): point at a photo or film; everything else blurs while its device rises around it
     (4:5 or square as a feed post on a phone, wide as a listing page on a laptop). The media never moves.
     ========================================================= */
  .video-films .rows{display:flex;flex-direction:column;gap:var(--grid-gutter)}
  .video-films .g-row{display:flex;gap:var(--grid-gutter)}
  .video-films .g-item{position:relative;flex:var(--r) 1 0%;min-width:0;container-type:inline-size;cursor:zoom-in;outline:none;margin:0}
  .video-films .g-item .ph{position:relative;z-index:2;aspect-ratio:var(--r);border-radius:var(--radius-media);overflow:hidden;background:#000;
    transition:border-radius var(--dur-reveal) var(--ease-settle)}
  .video-films .g-item .ph img,.video-films .g-item .ph video{width:100%;height:100%;object-fit:cover;transition:filter var(--dur-reveal) var(--ease-settle),transform var(--dur-reveal) var(--ease-settle)}
  .video-films .g-item:focus-visible .ph{outline:2px solid var(--focus);outline-offset:4px}
  .video-films .rows.focusing .g-item:not(.on) .ph img,.video-films .rows.focusing .g-item:not(.on) .ph video{filter:blur(var(--reveal-blur)) brightness(var(--reveal-dim)) saturate(.8);transform:scale(var(--reveal-scale))}
  .video-films .rows.focusing .g-item:not(.on) figcaption{opacity:.35;filter:blur(3px)}
  .video-films .g-item.on{z-index:5}
  .video-films .g-item.on .ph{border-radius:0}
  .video-films .dv{position:absolute;z-index:1;opacity:0;pointer-events:none;transform:translateY(var(--reveal-rise)) scale(var(--reveal-from));transform-origin:50% 60%;
    transition:opacity var(--dur-reveal) var(--ease-settle),transform var(--dur-reveal) var(--ease-settle)}
  .video-films .dv-top{position:absolute;z-index:3;opacity:0;pointer-events:none;transition:opacity var(--dur-reveal) var(--ease-settle)}
  .video-films .g-item.on .dv{opacity:1;transform:none}
  .video-films .g-item.on .dv-top{opacity:1}
  /* The device is sized from the photo/film box (height = width / --r), not from the whole figure: a figure with a caption
     under it used to stretch the device down over the caption, leaving a dead band inside the screen (the Video page's
     films, where the caption is three lines, showed it worst). */
  .video-films .dv.phone{inset:-31cqw -5cqw auto;height:calc(100cqw / var(--r) + 87cqw);border-radius:11cqw;background:#000;color:#F3EEE6;
    box-shadow:0 0 0 7px #0c0a09,0 0 0 8px #4a433b,0 40px 70px -20px rgba(0,0,0,.85)}
  .video-films .dv.phone .island{position:absolute;left:50%;top:3.6cqw;translate:-50% 0;width:30%;height:6.5cqw;border-radius:999px;background:#0c0a09;box-shadow:0 0 0 1px #1d1a17}
  .video-films .dv.phone .acct{position:absolute;left:7cqw;right:7cqw;top:17cqw;display:flex;align-items:center;gap:3cqw;font-size:clamp(11px,4.6cqw,15px);font-weight:600}
  .video-films .dv.phone .below{position:absolute;left:7cqw;right:7cqw;bottom:0;height:52cqw;display:flex;flex-direction:column;gap:2.6cqw;padding-top:4cqw;font-size:clamp(11px,4.4cqw,15px);line-height:1.35}
  .video-films .dv.phone .icons{display:flex;gap:5cqw;align-items:center}
  .video-films .dv.phone .icons svg{width:7.5cqw;height:7.5cqw;stroke:#F3EEE6;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .video-films .dv.phone .icons svg:last-child{margin-left:auto}
  .video-films .dv.phone .below .l{height:3cqw;border-radius:2cqw;background:rgba(243,238,230,.28)}
  .video-films .dv.phone .tabs{margin-top:auto;display:flex;justify-content:space-between;padding:4cqw 3cqw 7cqw;border-top:1px solid #1d1a17}
  .video-films .dv.phone .tabs i{width:6cqw;height:6cqw;border-radius:1.6cqw;background:rgba(243,238,230,.7)}
  .video-films .dv.laptop{inset:-6cqw -3.2cqw auto;height:calc(100cqw / var(--r) + 25cqw);border-radius:1.4cqw 1.4cqw .4cqw .4cqw;background:#15120F;
    box-shadow:0 0 0 1.1cqw #0c0a09,0 0 0 calc(1.1cqw + 1px) #4a433b}
  .video-films .dv.laptop .chrome{position:absolute;left:0;right:0;top:0;height:6cqw;background:#1d1a17;border-radius:1.4cqw 1.4cqw 0 0;display:flex;align-items:center;gap:.9cqw;padding:0 1.6cqw}
  .video-films .dv.laptop .chrome i{width:1cqw;height:1cqw;border-radius:50%;background:#4a433b}
  .video-films .dv.laptop .chrome .url{margin-left:3cqw;width:36%;height:2.8cqw;border-radius:999px;background:#2a2520}
  .video-films .dv.laptop .deets{position:absolute;left:3.2cqw;right:3.2cqw;bottom:0;height:19cqw;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2cqw;padding:3cqw 0}
  .video-films .dv.laptop .deets .t{display:flex;flex-direction:column;gap:1.2cqw}
  .video-films .dv.laptop .deets .t i{display:block;height:1.6cqw;border-radius:1cqw;background:rgba(243,238,230,.3)}
  .video-films .dv.laptop .deets .t i:first-child{height:2.6cqw;width:70%;background:#F3EEE6}
  .video-films .dv.laptop .deets b{border-radius:.8cqw;background:#2a2520}
  .video-films .dv.laptop::after{content:"";position:absolute;left:-9cqw;right:-9cqw;bottom:calc(-1.1cqw - 2.4cqw);height:2.4cqw;
    background:linear-gradient(#3b352f,#211d19);border-radius:.3cqw .3cqw 2cqw 2cqw;box-shadow:0 40px 50px -14px rgba(0,0,0,.85)}
  .video-films .dv-top.site{left:0;right:0;top:0;height:9cqw;display:flex;align-items:center;justify-content:space-between;padding:0 3.2cqw;
    background:linear-gradient(rgba(12,10,9,.5),rgba(12,10,9,0))}
  .video-films .dv-top.site img{height:3.4cqw;width:auto}
  .video-films .dv-top.site span{width:14cqw;height:3.4cqw;border-radius:999px;background:var(--plot-bone)}
  .video-films{padding:var(--space-2xl) 0;overflow:clip}
  .video-films .head,.video-films .vd-reels .head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:start;
    margin-bottom:clamp(64px,6vw,96px)}
  .video-films .head{transition:filter var(--dur-reveal) var(--ease-settle),opacity var(--dur-reveal) var(--ease-settle)}
  .video-films .head h2,.video-films .vd-reels .head h2{max-width:12ch}
  .video-films .head .price-list,.video-films .vd-reels .head .price-list{margin-top:.35em}      /* the list's top rule sits on the heading's cap line */
  .video-films.focusing .head{filter:blur(6px);opacity:.4}
  /* hover and click belong to the picture only: the figure and its caption let the pointer through, the picture takes it */
  .video-films .g-item{pointer-events:none;cursor:auto}
  .video-films .g-item .ph{pointer-events:auto}
  .video-films .play-full{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;
    font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
  .video-films .play-full:focus{outline:none}
  .video-films .g-item:has(.play-full:focus-visible) .ph{outline:2px solid var(--focus);outline-offset:4px}
  .video-films .g-item figcaption{margin-top:16px;transition:opacity var(--dur-reveal),filter var(--dur-reveal)}
  .video-films .g-item.on figcaption{opacity:0}
  .video-films .g-item h3{font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem);letter-spacing:-.015em;line-height:1.2}
  .video-films .g-item p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--plot-slate);max-width:36ch}
  .video-films .g-item .ph .tag{position:absolute;z-index:3;left:12px;top:12px;display:flex;align-items:center;gap:8px;background:var(--chip-bg);color:var(--chip-text);border-radius:999px;padding:5px 12px 5px 6px;font-size:15px;transition:opacity var(--dur-reveal)}
  .video-films .g-item .ph .tag i{width:22px;height:22px;border-radius:50%;background:var(--plot-ink);display:grid;place-items:center}
  .video-films .g-item .ph .tag i::after{content:"";border-left:7px solid var(--plot-bone);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
  .video-films .g-item.on .ph .tag{opacity:0}
  /* the row curves inwards like a wide cinema screen (client note 2026-09-30): the two outer films turn a few degrees toward
     the viewer about their inner edge, the middle one stays square. The film you point at (or focus) turns to face you before
     its laptop rises. Flat where the films stack (phones). */
  .video-films .g-row{--curve:12deg;perspective:1700px;perspective-origin:50% 40%}
  .video-films .g-item{transition:transform var(--dur-reveal) var(--ease-settle)}
  .video-films .g-item:first-child{transform-origin:100% 50%;transform:rotateY(var(--curve))}
  .video-films .g-item:last-child{transform-origin:0 50%;transform:rotateY(calc(-1 * var(--curve)))}
  .video-films .g-item.on{transform:none}
  /* the names in the price lists (films here, reels below) carry the weight; the line under each stays light */
  .video-films .price-list .what,.video-films .vd-reels .price-list .what{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.005em}
  .video-films .price-list .what small,.video-films .vd-reels .price-list .what small{font-family:var(--font-text);font-weight:var(--wt-text);letter-spacing:0}
  .video-films .vd-player{width:min(1200px,100vw - 2 * var(--grid-margin));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:none;color:var(--plot-bone);overflow:visible}
  .video-films .vd-player::backdrop{background:rgba(15,13,11,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .video-films .vd-player[open]{animation:vf-pl-in 260ms var(--ease-settle)}
  .video-films .vd-player[open]::backdrop{animation:vf-pl-fade 260ms var(--ease-settle)}
  @keyframes vf-pl-in{from{opacity:0;transform:translateY(10px)}}
  @keyframes vf-pl-fade{from{opacity:0}}
  .video-films .vd-player .pl-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px}
  .video-films .vd-player h2{font-size:clamp(1.15rem,1.05rem + .35vw,1.35rem);letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
  .video-films .vd-player h2 .pl-meta{display:block;margin-top:2px;font-family:var(--font-text);font-weight:400;font-size:15px;letter-spacing:0;color:rgba(243,238,230,.72)}
  .video-films .vd-player .pl-close{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border:1px solid rgba(243,238,230,.35);
    border-radius:999px;background:none;color:var(--plot-bone);font:inherit;font-size:16px;font-weight:500;cursor:pointer;transition:border-color 150ms ease}
  .video-films .vd-player .pl-close:hover{border-color:var(--plot-bone)}
  .video-films .vd-player .pl-close:focus-visible{outline:2px solid var(--plot-bone);outline-offset:3px}
  .video-films .vd-player .pl-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .video-films .vd-player video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 150px);background:#000;border-radius:4px}
  .video-films .vd-player video:focus-visible{outline:2px solid var(--plot-bone);outline-offset:3px}
  .video-films .vd-player .pl-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

  .video-films .vd-cta{margin-top:clamp(48px,5vw,80px);display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  .video-films .acts{display:flex;flex-wrap:wrap;gap:12px}
  .video-films .g-item .ph video{display:block}
  .video-films .g-item .ph .mss-video{position:relative}
  .video-films .dv.laptop .dv-logo{display:none}
  .video-films .dv-top.site img{height:3.4cqw;width:auto}
  @media (max-width:1080px){ .video-films .g-row{--curve:8deg} }
  @media (max-width:900px){
    .video-films .head{grid-template-columns:1fr;gap:var(--space-l)}
    .video-films .head .price-list{margin-top:0}
  }
  @media (max-width:760px){
    .video-films .g-row{flex-wrap:wrap;row-gap:var(--grid-gutter)}
    .video-films .g-row{flex-direction:column}
    .video-films .g-item{flex:none}
    .video-films .g-item:first-child,.video-films .g-item:last-child{transform:none}
    .video-films .head{margin-bottom:var(--space-xl)}
    .video-films .vd-cta{flex-direction:column;align-items:stretch}
    .video-films .vd-cta .btn{white-space:normal;text-align:center;padding:10px 22px}
    .video-films .vd-player .pl-bar{align-items:flex-start}
  }
  @media (prefers-reduced-motion:reduce){
    .video-films .g-item *,.video-films .dv,.video-films .dv-top,.video-films .g-item{transition:none!important}
    .video-films .vd-player[open],.video-films .vd-player[open]::backdrop{animation:none}
  }
  .video-films .vd-player .pl-stage video,.video-films .vd-player .pl-stage iframe{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 150px);background:#000;border:0;border-radius:4px}
  .video-films .vd-player .pl-stage video:focus-visible{outline:2px solid var(--plot-bone);outline-offset:3px}