/* Case study modal, Mux player and card runtime badge - shared by index.html and portfolio.html. */
.yt-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.15);transition:background .25s;z-index:2;pointer-events:none}
.yt-play-btn-circle{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,0.4);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;animation:pulse 2.5s ease-in-out infinite}
.yt-play-btn-circle svg{width:20px;height:20px;fill:white}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.2)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.cs-modal{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,0.88);align-items:center;justify-content:center;padding:var(--cs-pad-y) 24px;--cs-pad-y:24px;/* card height cap: never taller than what fits under the close button (36px + 10px gap), so the X is always on screen */--cs-max:min(85vh,calc(100vh - 2 * var(--cs-pad-y) - 46px))}
@supports(height:100dvh){.cs-modal{--cs-max:min(85dvh,calc(100dvh - 2 * var(--cs-pad-y) - 46px))}}
.cs-wrap{position:relative;width:100%;max-width:min(860px,calc(100vw - 96px))}
.cs-modal.open{display:flex}
.cs-scroll{max-height:var(--cs-max);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.cs-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.cs-scroll-indicator{position:absolute;top:62px;right:-12px;width:4px;height:calc(var(--cs-max) - 32px);pointer-events:none}
.cs-scroll-thumb{position:absolute;top:0;left:0;width:4px;min-height:28px;border-radius:999px;background:#666;opacity:0;transition:opacity .15s}
.cs-scroll-thumb.visible{opacity:1}
.cs-inner{position:relative;width:100%;background:#111;border:0.5px solid #2a2a2a;border-radius:16px;overflow:hidden}
.cs-video{width:100%;aspect-ratio:16/9;background:#000}
.cs-video iframe{width:100%;height:100%;border:none;display:block}
.cs-body{padding:32px 36px 36px}
.cs-title{font-size:18px;font-weight:500;color:#e8e5df;margin-bottom:28px;line-height:1.3}
.cs-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cs-section-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#555;margin-bottom:8px}
.cs-section-text{font-size:13px;color:#999;line-height:1.65;font-weight:300}
.cs-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:none;border:0.5px solid #444;color:#aaa;cursor:pointer;transition:border-color .2s,color .2s;margin-left:auto;margin-bottom:10px;flex-shrink:0}
.cs-close:hover{border-color:#aaa;color:#fff}
@media(max-width:768px){.cs-modal{--cs-pad-y:16px}
.cs-wrap{max-width:100%}}
@media(max-width:768px){.cs-sections{grid-template-columns:1fr}
.cs-body{padding:20px}
.cs-title{font-size:15px}}
/* homepage cards show an animated preview; their Mux player stays hidden until it moves into the modal */
.p-thumb--preview > .mux-wrap{display:none;}

    mux-player::part(tooltip){ display:none !important; }
    mux-player{
      --center-play-button: none;
      --pip-button: none;
      --airplay-button: none;
      --media-icon-color: #999;
      /* Mux fades controls out over a full 1s by default (fade-in is only 0.25s).
         This var is consumed but never re-declared internally, so it inherits fine. */
      --media-control-transition-out: opacity 0.3s;
    }
    /* Mux sets --media-control-hover-background to accent-color, which is white here
       for the seek bar - so every button's hover painted a white box behind a white
       icon (that's the "solid white square", not a rendering glitch). Setting the var
       on mux-player does nothing: media-theme re-declares it on its own :host, and a
       direct declaration beats an inherited one. Declaring it per-button via ::part()
       IS direct on that element, so it wins. */
    mux-player::part(bottom play button),
    mux-player::part(bottom mute button),
    mux-player::part(bottom rendition button),
    mux-player::part(bottom fullscreen button){
      --media-control-hover-background: rgba(255,255,255,0.18);
    }
    /* Separate played (white), buffered (gray), and unloaded (dark gray). */
    mux-player::part(bottom volume range){
      --media-range-track-background: rgba(140,140,140,0.9) !important;
    }
    mux-player::part(bottom time range){
      --media-range-track-background: #3a3a3a !important;
      --media-time-range-buffered-color: #777 !important;
      --media-range-thumb-transform: scale(1) !important;
    }
    mux-player::part(bottom play button),
    mux-player::part(bottom time display){ display:flex !important; }
    mux-player::part(bottom playback-rate button){ display:none !important; }
    /* time display isn't clickable - suppress the hover/focus highlight box that
       otherwise appears behind it (it looked like a stray floating box) */
    mux-player::part(bottom time display){ --media-control-hover-background: transparent !important; }
    /* only play/pause stays left of the flexible spacer; everything else clusters right, like X */
    /* time display keeps its natural order (same tie-group as play and the spacer,
       which sorts by DOM position: play, then time, then the spacer) so it stays
       snug against play instead of being pushed past the spacer into the right cluster */
    mux-player::part(bottom mute button){ order:11; }
    mux-player::part(bottom volume range){ order:12; }
    mux-player::part(bottom rendition button){ order:13; display:flex !important; }
    mux-player::part(bottom fullscreen button){ order:15; }
    /* Custom icon overlay via ::before. The native svg is hidden with
       visibility:hidden, NOT display:none - display:none drops it from layout, the
       button collapses to its padding, and the absolutely-positioned 16px overlay
       then spills outside and overlaps the neighbouring button. */
    mux-player::part(bottom fullscreen button) svg{ visibility:hidden !important; }
    mux-player::part(bottom fullscreen button){ position:relative; }
    mux-player::part(bottom fullscreen button)::before{
      content:'';
      position:absolute;
      inset:0;
      margin:auto;
      width:16px;
      height:16px;
      pointer-events:none;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13 3h8v8h-2V6.41l-5.043 5.05-1.414-1.42L17.586 5H13V3zm-1.543 10.96L6.414 19H11v2H3v-8h2v4.59l5.043-5.05 1.414 1.42z'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    }
    mux-player::part(bottom rendition button) svg{ visibility:hidden !important; }
    mux-player::part(bottom rendition button){ position:relative; }
    mux-player::part(bottom rendition button)::before{
      content:'';
      position:absolute;
      inset:0;
      margin:auto;
      width:16px;
      height:16px;
      pointer-events:none;
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M10.54 1.75h2.92l1.57 2.36c.11.17.32.25.53.21l2.53-.59 2.17 2.17-.58 2.54c-.05.2.04.41.21.53l2.36 1.57v2.92l-2.36 1.57c-.17.12-.26.33-.21.53l.58 2.54-2.17 2.17-2.53-.59c-.21-.04-.42.04-.53.21l-1.57 2.36h-2.92l-1.58-2.36c-.11-.17-.32-.25-.52-.21l-2.54.59-2.17-2.17.58-2.54c.05-.2-.03-.41-.21-.53l-2.35-1.57v-2.92L4.1 8.97c.18-.12.26-.33.21-.53L3.73 5.9 5.9 3.73l2.54.59c.2.04.41-.04.52-.21l1.58-2.36zm1.07 2l-.98 1.47C10.05 6.08 9 6.5 7.99 6.27l-1.46-.34-.6.6.33 1.46c.24 1.01-.18 2.07-1.05 2.64l-1.46.98v.78l1.46.98c.87.57 1.29 1.63 1.05 2.64l-.33 1.46.6.6 1.46-.34c1.01-.23 2.06.19 2.64 1.05l.98 1.47h.78l.97-1.47c.58-.86 1.63-1.28 2.65-1.05l1.45.34.61-.6-.34-1.46c-.23-1.01.18-2.07 1.05-2.64l1.47-.98v-.78l-1.47-.98c-.87-.57-1.28-1.63-1.05-2.64l.34-1.46-.61-.6-1.45.34c-1.02.23-2.07-.19-2.65-1.05l-.97-1.47h-.78zM12 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zM8.5 12c0-1.93 1.56-3.5 3.5-3.5 1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5c-1.94 0-3.5-1.57-3.5-3.5z'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    }
    .p-thumb:has(.mux-wrap){border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,0.07),0 24px 48px rgba(0,0,0,0.4);}
    .p-sub{font-size:12px;color:var(--muted2);font-weight:300;line-height:1.5;margin-top:-7px;}
    .mux-wrap{position:relative;width:100%;height:100%;}.mux-poster{display:block;width:100%;height:100%;object-fit:cover}
    .mux-settings-menu{display:none;position:absolute;bottom:44px;background:rgba(18,18,18,0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0.5px solid rgba(255,255,255,0.12);border-radius:12px;padding:6px;min-width:210px;max-width:min(280px,calc(100% - 16px));z-index:20;box-shadow:0 16px 40px rgba(0,0,0,0.55);}
    .mux-settings-menu.open{display:block;}
    .mux-settings-row{display:flex;align-items:center;width:100%;gap:8px;padding:9px 10px;border-radius:8px;background:none;border:none;color:#e8e5df;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;text-align:left;}
    .mux-settings-row:hover{background:rgba(255,255,255,0.08);}
    .mux-settings-row .msr-val{margin-left:auto;color:#888;font-weight:400;font-size:12px;}
    .mux-settings-row.msr-active .msr-val{color:#fff;}
    /* options render as wrapping pills rather than a long list - a vertical list of
       7 speeds is taller than a short card, which forced an ugly scrollbar */
    .mux-settings-head{display:flex;align-items:center;width:100%;padding:6px 10px 8px;background:none;border:none;color:#aaa;font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;text-align:left;}
    .mux-settings-head:hover{color:#fff;}
    .mux-settings-opts{display:grid;gap:5px;padding:0 4px 4px;}
    .mux-settings-pill{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.08);border:none;color:#e8e5df;font-size:12px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;text-align:center;transition:background .15s,color .15s;}
    .mux-settings-pill:hover{background:rgba(255,255,255,0.18);}
    .mux-settings-pill.active{background:#fff;color:#111;}
    .mux-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;}
    /* symmetric 0.2s fade both ways, no delay - crossfades with the control bar */
    .mux-duration-badge{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,0.75);color:#fff;font-size:11px;font-weight:600;letter-spacing:0.02em;padding:3px 7px;border-radius:4px;z-index:6;pointer-events:none;opacity:0;transition:opacity .2s ease;}
    #cs-mux .mux-duration-badge.visible{opacity:1;}
    /* card-only runtime badge: lives on .p-thumb, so it stays behind when the player moves into the modal */
    .card-duration-badge{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,0.75);color:#fff;font-size:11px;font-weight:600;letter-spacing:0.02em;padding:3px 7px;border-radius:4px;z-index:6;pointer-events:none;}
    /* the case study modal hosts the real <mux-wrap> node, moved in from the card
       and moved back on close, so every handler bound to it at load still works */
    #cs-mux{position:absolute;inset:0;display:none;}
    .cs-video.is-mux #cs-mux{display:block;}
    .cs-video.is-mux #cs-iframe{display:none;}
    .cs-video{position:relative;}
    /* Same skeleton palette and motion as the Hero cards. */
    .cs-video.mux-loading::after{
      content:'';position:absolute;inset:0;z-index:20;
      background:linear-gradient(90deg,#1a1a1a 0%,#1a1a1a 30%,#2a2a2a 50%,#1a1a1a 70%,#1a1a1a 100%);
      background-size:200% 100%;animation:fm-shimmer 1.6s ease-in-out infinite;
    }
    .cs-video.mux-loading #cs-mux{opacity:0;pointer-events:none;}
    @keyframes fm-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
    @media(prefers-reduced-motion:reduce){.cs-video.mux-loading::after{animation:none;}}

    .cs-x{font-size:13px;color:#999;line-height:1.65;font-weight:300;margin-top:24px;padding-top:20px;border-top:0.5px solid #2a2a2a;}
    .cs-x a{color:#e8e5df;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#555;transition:text-decoration-color .2s;}
    .cs-x a:hover{text-decoration-color:#e8e5df;}