.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#000000;--e-global-color-text:#FFFFFF;--e-global-color-accent:#DD1F4C;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Noto Serif";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Noto Serif";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Grotesk";--e-global-typography-accent-font-weight:bold;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-5c32b63-font-family:"Noto Sans";--e-global-typography-5c32b63-font-size:32px;--e-global-typography-5c32b63-font-weight:700;background-color:var( --e-global-color-secondary );font-family:"Noto Serif", Sans-serif;font-size:15px;font-weight:400;letter-spacing:-0.5px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#FFFFFF00;font-family:"Noto Serif", Sans-serif;font-size:20px;font-weight:400;text-transform:none;font-style:normal;color:var( --e-global-color-primary );}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-accent );font-family:"Space Grotesk", Sans-serif;font-weight:bold;}.elementor-kit-6 a:hover{font-weight:900;}.elementor-kit-6 h1{color:var( --e-global-color-primary );font-family:"Space Grotesk", Sans-serif;font-size:68px;font-weight:700;line-height:72px;letter-spacing:-1px;}.elementor-kit-6 h2{color:var( --e-global-color-primary );font-family:"Space Grotesk", Sans-serif;font-size:44px;font-weight:800;line-height:50px;}.elementor-kit-6 h3{color:var( --e-global-color-primary );font-family:"Space Grotesk", Sans-serif;font-size:28px;font-weight:600;line-height:34px;}.elementor-kit-6 h4{color:var( --e-global-color-primary );font-family:"Noto Serif", Sans-serif;font-size:22px;font-weight:400;}.elementor-kit-6 h5{color:var( --e-global-color-primary );font-family:"Noto Serif", Sans-serif;font-size:14px;font-weight:400;}.elementor-kit-6 h6{color:var( --e-global-color-accent );font-family:"Space Grotesk", Sans-serif;font-size:14px;font-weight:bold;text-transform:uppercase;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1368px){.elementor-kit-6 h1{font-size:54px;}.elementor-kit-6 h2{font-size:36px;line-height:38px;}.elementor-kit-6 h3{font-size:20px;line-height:24px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:18px;}}@media(max-width:1024px){.elementor-kit-6{font-size:14px;line-height:20px;}.elementor-kit-6 h1{font-size:36px;line-height:40px;}.elementor-kit-6 h2{font-size:24px;line-height:28px;}.elementor-kit-6 h4{font-size:16px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h2{font-size:22px;line-height:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */body {
    overflow-x: hidden;
}

/* ===============================================
   KEYFRAME – Job Grid
   =============================================== */

.job-loop:hover .job-item {
  filter: blur(6px);
  transition: filter 0.3s ease;
}

.job-loop:hover .job-item:hover {
  filter: blur(0);
}

.art-loop:hover .art-item {
  filter: blur(6px);
  transition: filter 0.3s ease;
}

.art-loop:hover .art-item:hover {
  filter: blur(0);
}

.home-video-hero .elementor-background-video-container iframe {
    transform: scale(1.33); /* zoom in - adjust value */
    width: 120%; /* slightly bigger than section */
    height: 120%;
    left: 0%;
    top: 0%;
    position: absolute;
}

.elementor-kit-6 .elementor-background-video-container {
    overflow: hidden; /* hide edges after zoom */
}


/* ===============================================
   KEYFRAME – Portfolio Section “Cinematic” Engine
   =============================================== */

/* 1 ─── Scope & stacking context */
.portfolio-section{
  position:relative;     /* anchors the absolute layers        */
  overflow:hidden;      /* prevents layers overflowing page   */
}

/* 2 ─── Background-layer stack (inserted via HTML widget) */
.bg-stack, .bg-img, .blackout{
  position:absolute;
  inset:0;               /* full-bleed */
  pointer-events:none;   /* never steals clicks / hovers       */
}

/* two interchangeable image layers */
.bg-img{
  background-size:cover;
  background-position:center;
   /* NEW ↓ – lets us animate blur smoothly */
  filter:blur(0);                 /* default sharp */
  will-change:opacity, filter, transform;
  opacity:0;             /* default hidden                     */
  transform:none; /* subtle push-in for depth           */
  transition: none;
}
.bg-img.current{opacity:1;}   /* the one that’s currently visible   */

/* fade-to-black overlay */
.blackout{
  background:#000;
  opacity:0;
}

/* 3 ─── Optional: blur + dim *non-hover* items (kept from v1) */
@media (hover){
  .portfolio-grid:hover .portfolio-item:not(:hover){
    filter:blur(6px);
    opacity:.35;
    transition:filter .35s, opacity .35s;
  }
}

/* 4 ─── Swap short ↔ long taglines (kept from v1) */
.portfolio-item .long{display:none;}
.portfolio-item.is-active .long{display:block;}


/* 6 ─── Mobile / touch battery-save */
@media (hover:none){
  .portfolio-section:hover .portfolio-item:not(:hover){
    filter:none!important;
    opacity:1!important;
  }
}

/* ===============  Services hover blur  =============== */
.services-list{
  list-style:none;
  margin:0;
  padding:0;
  cursor:pointer;
}

.services-list li{
  transition:filter .35s ease, opacity .35s ease;
}

.services-list a{
  text-decoration:none;
  color:inherit;       /* keep your white/pink palette */
}

/* --- magic: when hovering a list, blur non-hover siblings --- */
@media (hover){
  .services-list:hover li:not(:hover){
    filter:blur(1px);
    opacity:.6;
  }
}

/* touch devices: turn blur off so taps don’t hide content */
@media (hover:none){
  .services-list li{ filter:none!important; opacity:1!important; }
}


/*──────────────────────────────────────────────
  Glass-morph look ON the .portfolio-item itself
  (.blur-tile is now applied to the grid item)
──────────────────────────────────────────────*/

/* 0. Base card */
.portfolio-item.blur-tile{
  position:relative;
  overflow:hidden;            /* contain pseudo-layer      */
  isolation:isolate;          /* keep blend local          */
  background:transparent;     /* invisible until hover     */
  border-radius:16px;
  transition:
    background .35s ease,
    box-shadow  .35s ease;
    cursor: pointer;
}

/* 1. Back-drop blur layer */
.portfolio-item.blur-tile::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:rgba(255,255,255,0.06);        /* faint grey tint        */
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  opacity:0;                                /* off by default         */
  transition:opacity .35s ease;
  pointer-events:none;                      /* keep clicks on content */
}

/* 2. Keep the real content above the blur */
.portfolio-item.blur-tile > *{ position:relative; z-index:1; }

/*───────── A. Desktop / mouse — show on hover —────────*/
@media (hover){
  .portfolio-item.blur-tile:hover,
  .portfolio-item.blur-tile.is-active{
    background:rgba(210,221,200,0.0);      /* stronger tint          */
    /* box-shadow:0 4px 6px rgba(0,0,0,0.10); */
    border: 1px solid rgba(210, 200, 202, 0.4);
  }
  .portfolio-item.blur-tile:hover::before,
  .portfolio-item.blur-tile.is-active::before{
    opacity:1;                              /* blur fades in          */
  }
}

/*───────── B. Touch devices — show only while is-active —────────*/
@media (hover:none){
  .portfolio-item.blur-tile.is-active{
    background:rgba(255,255,255,0.025);
  }
  .portfolio-item.blur-tile.is-active::before{
    opacity:1;
  }
}

.full-media-section {
      width: 100vw;              /* full viewport width */
  max-width: 100vw;  
    margin-left: calc(-50vw + 50%); /* center it while breaking out */
  object-fit: cover; 
}/* End custom CSS */