.cfp-portfolio{--cfp-gap:1.5rem;background:#000;color:#fff;width:100%}.cfp-tabs{display:flex;gap:.75rem;overflow-x:auto;padding:0 0 1.25rem;scrollbar-width:none}.cfp-tabs::-webkit-scrollbar{display:none}.cfp-tab{appearance:none;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.7);padding:.7rem 1rem;white-space:nowrap;cursor:pointer;font:inherit}.cfp-tab:hover,.cfp-tab.is-active{background:#fff;color:#000;border-color:#fff}.cfp-grid{display:grid;grid-template-columns:repeat(var(--cfp-columns),minmax(0,1fr));gap:var(--cfp-gap)}.cfp-card{position:relative;overflow:hidden;background:#080808;color:#fff;cursor:default;aspect-ratio:16/9;min-width:0}.cfp-card[hidden]{display:none!important}.cfp-preview,.cfp-hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease,transform .6s ease,filter .4s ease}.cfp-hover-video{opacity:0;filter:blur(8px)}.cfp-card.is-playing .cfp-hover-video{opacity:1;filter:blur(0);transform:scale(1.04)}.cfp-card.is-playing .cfp-preview{opacity:0;transform:scale(1.04)}.cfp-placeholder{background:linear-gradient(135deg,#111,#222)}.cfp-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.12),rgba(0,0,0,.72));z-index:1}.cfp-left{position:absolute;top:1rem;left:1rem;z-index:2;max-width:65%;transform-origin:top left;transition:transform .32s ease,opacity .32s ease}.cfp-card.is-playing .cfp-left{transform:scale(.72);opacity:.82}.cfp-left h2{color:#fff!important;font-size:clamp(1.05rem,2vw,1.7rem);line-height:1.05;margin:.25rem 0}.cfp-left p{margin:0;color:rgba(255,255,255,.82);font-size:.85rem}.cfp-categories{text-transform:uppercase;letter-spacing:.12em;font-size:.62rem!important}.cfp-right{position:absolute;right:1rem;bottom:1rem;text-align:right;z-index:2;opacity:0;transform:translateX(24px);transition:.3s}.cfp-card:hover .cfp-right,.cfp-card:focus-within .cfp-right{opacity:1;transform:none}.cfp-right span{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}.cfp-right p{font-size:.8rem;margin:.08rem 0 .45rem;color:#fff}.cfp-actions{position:absolute;left:1rem;bottom:1rem;z-index:3;display:flex;gap:.55rem;flex-wrap:wrap;opacity:0;transform:translateY(8px);transition:.25s}.cfp-card:hover .cfp-actions,.cfp-card:focus-within .cfp-actions{opacity:1;transform:none}.cfp-action{appearance:none;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.45);color:#fff!important;text-decoration:none!important;padding:.55rem .75rem;font:600 .68rem/1 sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s ease,color .2s ease,border-color .2s ease}.cfp-action:hover,.cfp-action:focus-visible{background:#fff;color:#000!important;border-color:#fff}.cfp-modal{position:fixed!important;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.96);z-index:2147483647!important;padding:4rem 2rem}.cfp-modal.is-open{display:flex}.cfp-modal-video{width:min(94vw,1100px);max-height:85vh}.cfp-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:2.5rem;cursor:pointer}.cfp-empty,.cfp-error{padding:1rem;background:#111;color:#fff}.cfp-error{border-left:4px solid #ff3b30}@media(max-width:980px){.cfp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.cfp-grid{grid-template-columns:1fr}.cfp-card{aspect-ratio:16/10}.cfp-right{display:none}.cfp-actions{opacity:1;transform:none}.cfp-card.is-playing .cfp-left{transform:scale(.82)}}@media(hover:none){.cfp-hover-video{display:none}.cfp-card.is-playing .cfp-preview{opacity:1;transform:none}.cfp-card.is-playing .cfp-left{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.cfp-preview,.cfp-hover-video,.cfp-left,.cfp-right,.cfp-actions{transition:none!important}}


/* v1.4 responsive app UI */
.cfp-portfolio{
  --cfp-app-edge:clamp(14px,4vw,24px);
  -webkit-tap-highlight-color:transparent;
}
.cfp-tab,.cfp-action,.cfp-close{min-height:44px;touch-action:manipulation}
.cfp-tab:focus-visible,.cfp-action:focus-visible,.cfp-close:focus-visible{
  outline:2px solid #fff;outline-offset:3px
}
@media(max-width:980px){
  .cfp-tabs{
    gap:.55rem;
    margin-inline:calc(var(--cfp-app-edge) * -1);
    padding:0 var(--cfp-app-edge) 1rem;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .cfp-tab{
    scroll-snap-align:start;
    border-radius:999px;
    padding:.65rem .95rem;
    font-size:.82rem;
  }
  .cfp-grid{gap:clamp(12px,2.8vw,18px)}
  .cfp-card{border-radius:12px;overflow:hidden}
  .cfp-actions{
    opacity:1;
    transform:none;
    left:12px;
    right:12px;
    bottom:12px;
    gap:8px;
  }
  .cfp-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    border-radius:999px;
    padding:.7rem .9rem;
    background:rgba(0,0,0,.62);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .cfp-left{top:12px;left:12px;max-width:78%}
  .cfp-left h2{font-size:clamp(1rem,4vw,1.35rem)}
}
@media(max-width:620px){
  .cfp-grid{grid-template-columns:1fr}
  .cfp-card{aspect-ratio:16/10}
  .cfp-left{max-width:75%}
  .cfp-right{display:none}
  .cfp-actions{flex-wrap:nowrap}
  .cfp-action{flex:1}
  .cfp-modal{
    padding:0!important;
    align-items:center;
    background:#000;
  }
  .cfp-modal-video{
    width:100vw;
    max-width:none;
    max-height:100dvh;
  }
  .cfp-close{
    top:max(12px,env(safe-area-inset-top));
    right:max(12px,env(safe-area-inset-right));
    width:48px;height:48px;
    border-radius:50%;
    background:rgba(0,0,0,.52)!important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    z-index:10;
  }
}


/* =========================================================
   v1.4.1 Mobile layout correction
   Fixes constrained Divi rows, oversized project cards,
   excessive empty vertical space, and mobile action density.
   ========================================================= */

@media (max-width: 620px) {
  /* Break the portfolio cleanly out of a constrained Divi row */
  .cfp-portfolio {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: 0 !important;
    padding: 0 14px 24px !important;
    overflow: hidden;
  }

  /* One clean swipeable tab rail */
  .cfp-tabs {
    width: calc(100% + 28px);
    margin: 0 -14px !important;
    padding: 10px 14px 14px !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cfp-tabs::-webkit-scrollbar {
    display: none;
  }

  .cfp-tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 42px !important;
    scroll-snap-align: start;
  }

  /* True cinematic cards instead of tall panels */
  .cfp-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .cfp-card {
    position: relative;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #090909;
  }

  .cfp-preview,
  .cfp-hover-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Darker lower gradient so title/actions stay readable */
  .cfp-shade {
    background:
      linear-gradient(
        to top,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.48) 34%,
        rgba(0,0,0,.05) 68%
      ) !important;
  }

  /* Compact top-left label/title */
  .cfp-left {
    top: auto !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 64px !important;
    max-width: calc(100% - 28px) !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .cfp-left h2 {
    margin: 3px 0 0 !important;
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
    line-height: 1.05 !important;
    max-width: 90%;
  }

  .cfp-categories {
    margin: 0 !important;
    font-size: 10px !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Metadata is intentionally hidden on phones */
  .cfp-right {
    display: none !important;
  }

  /* Compact, thumb-friendly bottom actions */
  .cfp-actions {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cfp-action {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 40px !important;
    letter-spacing: .05em !important;
    white-space: nowrap;
    background: rgba(0,0,0,.60) !important;
    border-color: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Touch devices should never create desktop playing transforms */
  .cfp-card.is-playing .cfp-left {
    transform: none !important;
    opacity: 1 !important;
  }

  /* Full-screen video modal feels like a native viewer */
  .cfp-modal {
    padding: 0 !important;
    background: #000 !important;
  }

  .cfp-modal-video {
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    max-height: 100dvh !important;
    object-fit: contain;
  }

  .cfp-close {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center;
    border-radius: 50% !important;
    background: rgba(20,20,20,.72) !important;
    color: #fff !important;
    font-size: 34px !important;
    line-height: 1 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Extra narrow phones */
@media (max-width: 390px) {
  .cfp-portfolio {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .cfp-tabs {
    width: calc(100% + 20px);
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .cfp-action {
    padding-inline: 11px !important;
    font-size: 9px !important;
  }
}


/* =========================================================
   v1.4.3 FINAL MOBILE ENFORCEMENT
   High-specificity rules to defeat Divi/theme module sizing.
   ========================================================= */
@media screen and (max-width: 620px) {
  html body .cfp-portfolio {
    box-sizing: border-box !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: calc(50% - 50vw) !important;
    margin: 0 !important;
    padding: 0 12px 24px !important;
    overflow-x: clip !important;
  }

  html body .cfp-portfolio .cfp-tabs {
    box-sizing: border-box !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 10px 12px 14px !important;
  }

  html body .cfp-portfolio .cfp-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 12px !important;
  }

  html body .cfp-portfolio .cfp-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body .cfp-portfolio .cfp-preview,
  html body .cfp-portfolio .cfp-hover-video,
  html body .cfp-portfolio .cfp-placeholder {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  html body .cfp-portfolio .cfp-left {
    position: absolute !important;
    top: auto !important;
    bottom: 60px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }

  html body .cfp-portfolio .cfp-actions {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
  }
}

/* Force global mobile menu to actual viewport width, even inside Divi global-header rows. */
@media screen and (max-width: 980px) {
  html body .cfnh-menu-only {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: calc(50% - 50vw) !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v1.4.4 Mobile Portfolio Polish
   ========================================================= */
@media screen and (max-width:620px){

  /* Keep the portfolio safely INSIDE the visual viewport.
     This replaces the earlier hard 100vw breakout that could
     overshoot Safari's visible width. */
  html body .cfp-portfolio{
    box-sizing:border-box!important;
    position:relative!important;
    left:50%!important;
    width:calc(100vw - 20px)!important;
    min-width:0!important;
    max-width:calc(100vw - 20px)!important;
    margin-left:calc(-50vw + 10px)!important;
    margin-right:0!important;
    padding:0 10px 24px!important;
    overflow:hidden!important;
  }

  html body .cfp-portfolio .cfp-tabs{
    box-sizing:border-box!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding:10px 10px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }

  html body .cfp-portfolio .cfp-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Critical: filtered cards MUST remain hidden.
     This wins over the general mobile .cfp-card display rule. */
  html body .cfp-portfolio .cfp-card[hidden]{
    display:none!important;
  }

  html body .cfp-portfolio .cfp-card:not([hidden]){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    aspect-ratio:16/9!important;
  }
}

@media screen and (max-width:390px){
  html body .cfp-portfolio{
    width:calc(100vw - 14px)!important;
    max-width:calc(100vw - 14px)!important;
    margin-left:calc(-50vw + 7px)!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
  html body .cfp-portfolio .cfp-tabs{
    width:calc(100% + 14px)!important;
    margin-left:-7px!important;
    margin-right:-7px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }
}


/* v1.21.0 cinematic token alignment */
.cfpt-wrap{--cfpt-bg:var(--cf-black,#0A0A0A)!important;background:var(--cf-black,#0A0A0A)!important;color:var(--cf-text,#F5F5F5)!important}
.cfpt-tab{font-family:var(--cf-font-ui,"Montserrat",Arial,sans-serif)!important}
.cfpt-tab[aria-selected="true"],.cfpt-tab.is-active{background:var(--cf-text,#F5F5F5)!important;color:var(--cf-black,#0A0A0A)!important}
.cfpt-card{background:var(--cf-surface-2,#181818)!important;border-color:var(--cf-border,rgba(255,255,255,.10))!important}
.cfpt-card h3,.cfpt-title{color:var(--cf-text,#F5F5F5)!important}