.elementor-kit-4{--e-global-color-primary:#0B1620;--e-global-color-secondary:#142635;--e-global-color-text:#0F1B24;--e-global-color-accent:#E07A3F;--e-global-color-5c058b7:#FF9900;--e-global-color-62ae2f5:#11202B;--e-global-color-03eaa72:#DDDDDD;--e-global-color-a5306c0:#11202BB5;--e-global-color-52824f0:#EE4A1E;--e-global-color-fc96bdc:#E7ECF0;--e-global-color-1208331:#8F9AA3;--e-global-color-9afdaee:#3B4A56;--e-global-color-6b288fc:#FFB35C;--e-global-color-8d393ef:#E6482E;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-size:1rem;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.4;--e-global-typography-primary-letter-spacing:0em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:1.125rem;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.6;--e-global-typography-secondary-letter-spacing:0;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:1.0625rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6;--e-global-typography-text-letter-spacing:0;--e-global-typography-text-word-spacing:0;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:0.8125rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.06em;--e-global-typography-accent-word-spacing:0;--e-global-typography-00849b3-font-family:"Rock Salt";--e-global-typography-00849b3-font-size:36px;--e-global-typography-00849b3-font-weight:600;--e-global-typography-00849b3-line-height:50px;--e-global-typography-00849b3-letter-spacing:1px;--e-global-typography-dc5dcc0-font-family:"Rock Salt";--e-global-typography-dc5dcc0-font-size:36px;--e-global-typography-dc5dcc0-font-weight:600;--e-global-typography-dc5dcc0-line-height:57px;--e-global-typography-dc5dcc0-letter-spacing:8.8px;color:#000000;font-family:"Raleway", Sans-serif;font-size:1em;font-weight:600;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-5c058b7 );color:var( --e-global-color-62ae2f5 );border-style:none;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-5c058b7 );}.elementor-kit-4 a:hover{color:var( --e-global-color-62ae2f5 );}.elementor-kit-4 h1{color:var( --e-global-color-primary );font-family:"Inter", Sans-serif;font-size:clamp(2.75rem, 4.8vw, 4.25rem);font-weight:600;font-style:normal;line-height:1.1;letter-spacing:0.02em;}.elementor-kit-4 h2{color:var( --e-global-color-primary );font-family:"Inter Tight", Sans-serif;font-size:clamp(1.875rem, 3vw, 2.625rem);font-weight:600;line-height:1.15;letter-spacing:-0.015em;}.elementor-kit-4 h3{color:var( --e-global-color-primary );font-family:"Inter Tight", Sans-serif;font-size:1.5rem;font-weight:500;line-height:1.2;letter-spacing:-0.01em;}.elementor-kit-4 h4{color:var( --e-global-color-secondary );font-family:"Inter Tight", Sans-serif;font-size:1.125rem;font-weight:500;line-height:1.3;letter-spacing:0;}.elementor-kit-4 h5{color:var( --e-global-color-secondary );font-family:"Inter", Sans-serif;font-size:0.95rem;font-weight:600;text-transform:uppercase;line-height:1.35;letter-spacing:0.02em;}.elementor-kit-4 h6{color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:0.8125rem;font-weight:600;text-transform:uppercase;line-height:1.2;letter-spacing:0.06em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */:root{
  --lx-font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --lx-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* FN — Films.Solutions dark sections */
  --fn-stage:        #0B1620;
  --fn-stage-2:      #0A141D;
  --fn-ink:          rgba(243,246,248,.92);
  --fn-muted:        rgba(243,246,248,.68);
  --fn-dim:          rgba(243,246,248,.52);
  --fn-orange:       #F28A1A;
  --fn-orange-2:     #FFB04A;
  --fn-line:         rgba(255,255,255,.10);
  --fn-max:          1280px;
  --fn-pad-x:        clamp(16px, 3vw, 28px);
  --fn-radius:       26px;
  --fn-radius-sm:    18px;
  --fn-shadow:       0 20px 70px rgba(0,0,0,.45);
  --fn-shadow-soft:  0 18px 55px rgba(0,0,0,.35);
  --fn-glass:        rgba(255,255,255,.06);
  --fn-glass-border: rgba(255,255,255,.12);
}


/* Global site background */
body{
  background-color: #F4F3F1;
  color: #0F1720;
}

/* Header + footer stay dark */
header,
footer{
  background-color: #0F1E2A;
  color: #F3F6F8;
}


/* ==========================================================
   [00] FS — HERO NAVIGATION (KICKER + GRID)
   Scoped + safe (doesn’t affect the rest of the site)
   ========================================================== */


/* ==========================================================
   [01] OUTER WRAP — spacing + max width (ONLY here)
   Put class on the parent container: .fs-hero-navigation
   ========================================================== */
.fs-hero-navigation{
  width: 100%;
  max-width: 1280px; /* change if your site container is different */
  margin-inline: auto;

  /* ✅ the ONLY place controlling side spacing */
  padding-inline: clamp(1rem, 4vw, 3.5rem);

  /* vertical breathing room for the whole block */
  padding-block: clamp(1.25rem, 3vw, 2.75rem);
}


/* ==========================================================
   [02] HERO KICKER (title above grid)
   Put class on the kicker container: .fs-hero-kicker
   (Optional: add .fs-hero-subtitle on a text widget under it)
   ========================================================== */
.fs-hero-kicker{
  margin: 0 0 clamp(1rem, 2.2vw, 2rem) 0 !important;
}

.fs-hero-kicker .elementor-heading-title{
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem) !important;
  color: #0F1720 !important;
  margin: 0 !important;
}

.fs-hero-subtitle{
  margin: .55rem 0 0 0 !important;
  max-width: 56ch;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  color: rgba(15,23,32,.70) !important;
}


/* ==========================================================
   [03] TOKENS — hero-only variables (scoped on .fs-grid-hero)
   ========================================================== */
.fs-grid-hero{
  --fs-gap: 18px;
  --fs-radius: 22px;
  --fs-border: rgba(255,255,255,.14);
  --fs-shadow: 0 18px 55px rgba(0,0,0,.22);

  --fs-hero-h: clamp(560px, 68vh, 860px);
  --fs-card-pad: clamp(16px, 2vw, 26px);

  --fs-title-size: clamp(2.0rem, 3.2vw, 2.7rem);
  --fs-subtitle-size: clamp(1.05rem, 1.4vw, 1.2rem);

  --fs-text-on-media: #F3F6F8;
}


/* ==========================================================
   [04] GRID LAYOUT — NO padding/margins here
   Main container: .fs-grid-hero
   ========================================================== */
.fs-hero-navigation .fs-grid-hero{
  width: 100% !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: 4fr 6fr !important; /* LEFT ≈ 40% */
  gap: var(--fs-gap) !important;
  align-items: stretch !important;

  /* ✅ remove any spacing responsibility */
  margin: 0 !important;
  padding: 0 !important;
}

/* Elementor wrapper fix */
.fs-grid-hero > .e-con-inner{ display: contents !important; }

/* Desktop: lock height */
@media (min-width: 1025px){
  .fs-hero-navigation .fs-grid-hero{
    height: var(--fs-hero-h) !important;
  }
}


/* ==========================================================
   [05] TILE BASE — same rules for all tiles
   Classes on containers:
   .fs-tile.fs-left, .fs-right-top, .fs-right-bot-a, .fs-right-bot-b
   ========================================================== */
.fs-grid-hero .fs-tile,
.fs-grid-hero .fs-right-top,
.fs-grid-hero .fs-right-bot-a,
.fs-grid-hero .fs-right-bot-b{
  position: relative !important;
  overflow: hidden !important;

  border-radius: var(--fs-radius) !important;
  border: 1px solid var(--fs-border) !important;
  box-shadow: var(--fs-shadow) !important;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: var(--fs-card-pad) !important;
}

/* If you use Image widget inside tile */
.fs-grid-hero .fs-tile .elementor-widget-image img,
.fs-grid-hero .fs-right-top .elementor-widget-image img,
.fs-grid-hero .fs-right-bot-a .elementor-widget-image img,
.fs-grid-hero .fs-right-bot-b .elementor-widget-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Optional: desat ONLY images wrapped in .fs-media */
.fs-grid-hero .fs-media img{
  filter: saturate(.80) contrast(1.03);
}


/* ==========================================================
   [06] LAYERS — veil + hover overlay (soft)
   ========================================================== */

/* Readability veil (always on) */
.fs-grid-hero .fs-tile::before,
.fs-grid-hero .fs-right-top::before,
.fs-grid-hero .fs-right-bot-a::before,
.fs-grid-hero .fs-right-bot-b::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.04) 0%,
    rgba(0,0,0,.16) 55%,
    rgba(0,0,0,.46) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Hover overlay image (dissolve only) */
.fs-grid-hero .fs-tile::after,
.fs-grid-hero .fs-right-top::after,
.fs-grid-hero .fs-right-bot-a::after,
.fs-grid-hero .fs-right-bot-b::after{
  content:"";
  position:absolute;
  inset:0;

  background-image: url("/wp-content/uploads/overlay-hover.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transition: opacity 700ms ease;
  z-index: 2;
  pointer-events: none;
}


/* ==========================================================
   [07] TEXT (title + subtitle) — forced white and big
   Add classes to widgets:
   Heading widget: .fs-card-title
   Text widget: .fs-card-subtitle
   ========================================================== */
.fs-grid-hero .fs-card-title,
.fs-grid-hero .fs-card-title *,
.fs-grid-hero .fs-card-subtitle,
.fs-grid-hero .fs-card-subtitle *{
  position: relative !important;
  z-index: 3 !important;
}

/* Title */
.fs-grid-hero .fs-card-title,
.fs-grid-hero .fs-card-title *,
.fs-grid-hero .elementor-heading-title.fs-card-title{
  color: var(--fs-text-on-media) !important;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: var(--fs-title-size) !important;
  line-height: 1.05 !important;
  font-weight: 650 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 .12rem 0 !important; /* ✅ closer */
  text-shadow: 0 10px 26px rgba(0,0,0,.38);
}

/* Subtitle (same colour family) */
.fs-grid-hero .fs-card-subtitle,
.fs-grid-hero .fs-card-subtitle *{
  color: var(--fs-text-on-media) !important;
  opacity: .92 !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: var(--fs-subtitle-size) !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  max-width: 46ch !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.30);
}


/* ==========================================================
   [08] ARROW (always visible)
   Element class: .fs-card-arrow
   ========================================================== */
.fs-grid-hero .fs-card-arrow{
  position: absolute !important;
  right: clamp(14px, 1.6vw, 20px) !important;
  bottom: clamp(14px, 1.6vw, 20px) !important;
  z-index: 4 !important;

  color: rgba(243,246,248,.94) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  opacity: .95 !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.30);
}


/* ==========================================================
   [09] DESKTOP PROPORTIONS (right column layout)
   ========================================================== */
@media (min-width: 1025px){

  .fs-grid-hero .fs-left{ height: 100% !important; }

  .fs-grid-hero .fs-right-wrap{
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 58fr 42fr !important;
    gap: var(--fs-gap) !important;
  }

  .fs-grid-hero .fs-right-bot-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--fs-gap) !important;
  }

  .fs-grid-hero .fs-right-top,
  .fs-grid-hero .fs-right-bot-a,
  .fs-grid-hero .fs-right-bot-b{
    height: 100% !important;
  }
}


/* ==========================================================
   [10] TABLET
   ========================================================== */
@media (max-width: 1024px){

  .fs-hero-navigation .fs-grid-hero{
    grid-template-columns: 1fr !important;
    height: auto !important;
    --fs-gap: 16px;
  }

  .fs-grid-hero .fs-left{ min-height: 360px !important; }
  .fs-grid-hero .fs-right-top{ min-height: 300px !important; }

  .fs-grid-hero .fs-right-bot-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--fs-gap) !important;
  }

  .fs-grid-hero .fs-right-bot-a,
  .fs-grid-hero .fs-right-bot-b{
    min-height: 240px !important;
  }
}


/* ==========================================================
   [11] MOBILE
   ========================================================== */
@media (max-width: 767px){

  .fs-hero-navigation .fs-grid-hero{ --fs-gap: 14px; }

  .fs-grid-hero .fs-right-bot-row{
    grid-template-columns: 1fr !important;
  }

  .fs-grid-hero .fs-left,
  .fs-grid-hero .fs-right-top,
  .fs-grid-hero .fs-right-bot-a,
  .fs-grid-hero .fs-right-bot-b{
    min-height: 240px !important;
  }
}


/* ==========================================================
   [12] HOVER — calm overlay + underline line (left → right)
   ========================================================== */

/* The underline uses a REAL pseudo-element. We attach it to the tile itself. */
.fs-grid-hero .fs-tile i,
.fs-grid-hero .fs-right-top i,
.fs-grid-hero .fs-right-bot-a i,
.fs-grid-hero .fs-right-bot-b i{ display:none; } /* safety */

.fs-grid-hero .fs-tile .fs-hoverline,
.fs-grid-hero .fs-right-top .fs-hoverline,
.fs-grid-hero .fs-right-bot-a .fs-hoverline,
.fs-grid-hero .fs-right-bot-b .fs-hoverline{ display:none; } /* no markup needed */

.fs-grid-hero .fs-tile::before{
  /* keep your veil here; line is added as ::after of a separate element below */
}

/* Create underline as an extra pseudo-element using background trick:
   we use the tile's ::after for overlay image already,
   so we create the line on a child .elementor-kit-4 via box-shadow is unreliable.
   Best: use an extra pseudo-element on a wrapper class inside each tile:
   Add a small empty container inside each tile with class "fs-card-line".
*/

/* If you add ONE empty inner container per tile: <div class="fs-card-line"></div> */
.fs-grid-hero .fs-card-line{
  position: absolute;
  left: var(--fs-card-pad);
  right: var(--fs-card-pad);
  bottom: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(243,246,248,.85), rgba(243,246,248,.25));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms ease;
  z-index: 3;
  pointer-events: none;
}

@media (hover:hover){
  .fs-grid-hero .fs-tile:hover::after,
  .fs-grid-hero .fs-right-top:hover::after,
  .fs-grid-hero .fs-right-bot-a:hover::after,
  .fs-grid-hero .fs-right-bot-b:hover::after{
    opacity: 1;
  }

  .fs-grid-hero .fs-tile:hover .fs-card-line,
  .fs-grid-hero .fs-right-top:hover .fs-card-line,
  .fs-grid-hero .fs-right-bot-a:hover .fs-card-line,
  .fs-grid-hero .fs-right-bot-b:hover .fs-card-line{
    transform: scaleX(1);
  }
}

/* ==========================================================
   [HS-01] HERO SERVICES — WRAP + TOKENS (scoped)
   ========================================================== */
.fs-hero-services{
  width: 100% !important;
  max-width: 1400px !important;          /* ✅ boxed width */
  margin-left: auto !important;
  margin-right: auto !important;

  /* ✅ only this controls side padding */
  padding-left: clamp(1rem, 4vw, 3.5rem) !important;
  padding-right: clamp(1rem, 4vw, 3.5rem) !important;
  padding-top: clamp(1.5rem, 3vw, 3rem) !important;
  padding-bottom: clamp(1.5rem, 3vw, 3rem) !important;

  /* tokens */
  --hs-gap: clamp(16px, 2vw, 22px);
  --hs-radius: 22px;

  --hs-ink: #0F1720;
  --hs-muted: rgba(15,23,32,.70);

  --hs-on-media: #F3F6F8;
  --hs-on-media-muted: rgba(243,246,248,.90);

  --hs-veil: linear-gradient(
    180deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,.45) 100%
  );

  --hs-card-pad: clamp(16px, 2vw, 22px);

  --hs-font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --hs-title: clamp(2.2rem, 3.4vw, 3.1rem);
  --hs-kicker: clamp(.95rem, 1.1vw, 1.05rem);
  --hs-body: clamp(1.02rem, 1.2vw, 1.12rem);

  --hs-card-title: clamp(1.25rem, 1.6vw, 1.55rem);
  --hs-card-sub: clamp(.98rem, 1.05vw, 1.05rem);
}


/* ==========================================================
   [HS-02] LAYOUT — 2 columns: left text + right 2x2 grid
   ========================================================== */
.fs-hero-services{
  display: grid !important;
  grid-template-columns: 1.05fr 1.95fr !important;
  gap: clamp(20px, 3vw, 40px) !important;
  align-items: start !important;
}

/* Elementor wrappers */
.fs-hero-services > .e-con-inner{ display: contents !important; }

/* left column container */
.fs-hero-services .fs-services-left{
  max-width: 46ch;
  align-self: center;                 /* vertical centering vs grid */
}

/* right grid container */
.fs-hero-services .fs-services-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--hs-gap) !important;
  align-items: stretch !important;
}
.fs-hero-services .fs-services-grid > .e-con-inner{ display: contents !important; }

/* responsive */
@media (max-width: 1024px){
  .fs-hero-services{ grid-template-columns: 1fr !important; }
}
@media (max-width: 767px){
  .fs-hero-services .fs-services-grid{ grid-template-columns: 1fr !important; }
}

/* ==========================================================
   [HS-03] LEFT TYPO — FORCE Elementor headings/text
   ========================================================== */
.fs-hero-services .fs-services-kicker,
.fs-hero-services .fs-services-kicker .elementor-heading-title{
  font-family: var(--hs-font-body) !important;
  font-size: var(--hs-kicker) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: var(--hs-muted) !important;
  margin: 0 0 .65rem 0 !important;
}

.fs-hero-services .fs-services-title,
.fs-hero-services .fs-services-title .elementor-heading-title{
  font-family: var(--hs-font-display) !important;
  font-size: var(--hs-title) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--hs-ink) !important;
  margin: 0 0 .9rem 0 !important;
}

.fs-hero-services .fs-services-text,
.fs-hero-services .fs-services-text .elementor-widget-container{
  font-family: var(--hs-font-body) !important;
  font-size: var(--hs-body) !important;
  line-height: 1.55 !important;
  color: var(--hs-muted) !important;
  margin: 0 !important;
}

/* Optional: if you want the left block centered horizontally */
.fs-hero-services .fs-services-left{
  text-align: left; /* change to center if you really want */
}

/* ==========================================================
   [HS-04] CARD — image now, video later (safe)
   ========================================================== */
.fs-hero-services .fs-services-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--hs-radius) !important;
  min-height: unset !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: var(--hs-card-pad) !important;
  aspect-ratio: 5 / 7;        /* 🔒 vertical ratio */
}

/* media layer (recommended container) */
.fs-hero-services .fs-services-media{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.fs-hero-services .fs-services-media img,
.fs-hero-services .fs-services-media video,
.fs-hero-services .fs-services-media iframe{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* veil */
.fs-hero-services .fs-services-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hs-veil);
  z-index: 1;
  pointer-events:none;
}

/* content on top */
.fs-hero-services .fs-services-card-title,
.fs-hero-services .fs-services-card-sub{
  position: relative !important;
  z-index: 2 !important;
}

.fs-hero-services .fs-services-card-title,
.fs-hero-services .fs-services-card-title .elementor-heading-title{
  font-family: var(--hs-font-display) !important;
  font-size: var(--hs-card-title) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  font-weight: 650 !important;
  color: var(--hs-on-media) !important;
  margin: 0 0 .2rem 0 !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.fs-hero-services .fs-services-card-sub,
.fs-hero-services .fs-services-card-sub .elementor-widget-container{
  font-family: var(--hs-font-body) !important;
  font-size: var(--hs-card-sub) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: var(--hs-on-media-muted) !important;
  margin: 0 !important;
  max-width: 38ch;
  text-shadow: 0 10px 20px rgba(0,0,0,.28);
}

/* ==========================================================
   [HS-05] HOVER — calm overlay dissolve + underline line
   ========================================================== */
.fs-hero-services .fs-services-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/wp-content/uploads/overlay-hover.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 700ms ease;
  z-index: 1; /* between veil and text */
  pointer-events:none;
}

.fs-hero-services .fs-services-card .hs-underline{
  position:absolute;
  left: var(--hs-card-pad);
  right: var(--hs-card-pad);
  bottom: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(243,246,248,.90), rgba(243,246,248,.20));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms ease;
  z-index: 2;
  pointer-events:none;
}

@media (hover:hover){
  .fs-hero-services .fs-services-card:hover::after{ opacity: .45; }
  .fs-hero-services .fs-services-card:hover .hs-underline{ transform: scaleX(1); }
}

/* ===============================
   LEXLUX / FILMS — TIMELINE STORY
   =============================== */
.lx-timeline{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 3.2rem);
  color: #0F1720;
}

.lx-tl-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: clamp(14px, 2vw, 20px);
}

/* ==========================================================
   [LX-TL v2] OUR STORY / TIMELINE — BOXED STORY + FULL-WIDTH YEARS
   What happens:
   - "Our Story" header + card stay BOXED (max width)
   - Years navigation bar goes FULL WIDTH (100vw breakout)
   - Years content stays visually aligned with the boxed layout
   - Elementor-safe: buttons are neutralized and re-skinned
   - Premium, subtle cinematic UI (no loud effects)
   ========================================================== */


/* ==========================================================
   [01] ROOT WRAP + TOKENS (scoped)
   Put this class on the main section/container: .lx-timeline
   ========================================================== */
.lx-timeline{
  /* layout tokens */
  --tl-max: 1280px;
  --tl-pad-x: clamp(1rem, 4vw, 3.5rem);
  --tl-pad-y: clamp(1.25rem, 3vw, 2.75rem);

  /* colours */
  --tl-ink: #0F1720;
  --tl-muted: rgba(15,23,32,.72);
  --tl-border: rgba(15,23,32,.10);

  /* brand accent (Films.Solutions orange) */
  --tl-accent: #D48752;

  /* surfaces */
  --tl-section-bg: rgba(15,23,32,.03);
  --tl-card-bg: rgba(255,255,255,.62);
  --tl-years-bg: rgba(255,255,255,.55);

  /* shape + spacing */
  --tl-radius: 24px;
  --tl-card-radius: 22px;
  --tl-gap: clamp(18px, 2.5vw, 28px);

  /* type scale */
  --tl-title: clamp(2.1rem, 4vw, 3.2rem);
  --tl-h2: clamp(1.6rem, 2.2vw, 2.15rem);
  --tl-sub: clamp(1.05rem, 1.35vw, 1.2rem);
  --tl-body: clamp(1rem, 1.1vw, 1.08rem);

  /* arrows */
  --tl-btn-size: 52px;
  --tl-btn-radius: 999px;

  /* section appearance */
  width: 100%;
  background: var(--tl-section-bg);
  border-radius: var(--tl-radius);
  padding-block: var(--tl-pad-y);
}

/* Elementor wrapper helper */
.lx-timeline > .e-con-inner{ display: contents !important; }


/* ==========================================================
   [02] BOXED FRAME (applies to the "story" area only)
   What happens:
   - Creates a centered boxed column for top + card
   ========================================================== */
.lx-timeline .lx-tl-top,
.lx-timeline .lx-tl-card{
  width: min(var(--tl-max), 100%) !important;
  margin-inline: auto !important;
  padding-inline: var(--tl-pad-x) !important;
}


/* ==========================================================
   [03] TOP BAR (title + arrows) — BOXED
   ========================================================== */
.lx-timeline .lx-tl-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: clamp(14px, 2vw, 20px) !important;
}
.lx-timeline .lx-tl-top > .e-con-inner{ display: contents !important; }

/* Title: inherits global font from theme (no forced family) */
.lx-timeline .lx-tl-section-title .elementor-heading-title,
.lx-timeline .lx-tl-top .elementor-heading-title{
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  font-size: var(--tl-title) !important;
  color: var(--tl-ink) !important;
  margin: 0 !important;
}


/* ==========================================================
   [04] ARROWS — Version 1 (EDITORIAL MINIMAL)
   What happens:
   - Keeps Elementor buttons neutralized
   - Removes circle / background / border
   - Turns arrows into discreet editorial chevrons
   - Hover is subtle (opacity + tiny nudge)
   Classes:
   - Wrap: .lx-tl-arrows
   - Button widgets: add class .lx-tl-btn to each
   Optional:
   - Add class .is-prev to left arrow, .is-next to right arrow
   ========================================================== */

.lx-timeline .lx-tl-arrows{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}
.lx-timeline .lx-tl-arrows > .e-con-inner{ display: contents !important; }

/* Reset Elementor button (ONLY inside timeline arrows) */
.lx-timeline .lx-tl-arrows .elementor-button,
.lx-timeline .lx-tl-arrows .elementor-button-link{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}
.lx-timeline .lx-tl-arrows .elementor-button::before,
.lx-timeline .lx-tl-arrows .elementor-button::after{
  display: none !important;
}

/* Visible arrow "button" — editorial style (no circle) */
.lx-timeline .lx-tl-btn{
  /* ignore old tokens (size/radius) on purpose */
  width: auto !important;
  height: auto !important;

  display: inline-grid !important;
  place-items: center !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  padding: 6px 8px !important;  /* tiny click target */
  cursor: pointer !important;

  opacity: .42 !important;
  transition: opacity .20s ease, transform .22s ease !important;
}

/* Chevron glyph bigger + centered */
.lx-timeline .lx-tl-btn .elementor-button-content-wrapper,
.lx-timeline .lx-tl-btn .elementor-button-text{
  display: grid !important;
  place-items: center !important;

  width: auto !important;
  height: auto !important;

  line-height: 1 !important;
  font-size: 1.45rem !important; /* clean editorial chevron size */
  font-weight: 650 !important;
  color: var(--tl-ink) !important;
}

/* Hover (desktop) */
@media (hover:hover){
  .lx-timeline .lx-tl-btn:hover{
    opacity: .92 !important;
  }

  /* Optional micro-nudge if you add helper classes */
  .lx-timeline .lx-tl-btn.is-prev:hover{ transform: translateX(-2px) !important; }
  .lx-timeline .lx-tl-btn.is-next:hover{ transform: translateX( 2px) !important; }
}

/* Keyboard focus (important but invisible until used) */
.lx-timeline .lx-tl-btn:focus-visible{
  outline: 2px solid rgba(212,135,82,.55) !important; /* Films.Solutions orange vibe */
  outline-offset: 3px !important;
  border-radius: 10px !important;
  opacity: .95 !important;
}

/* ==========================================================
   [04] Footer notes
   - This version intentionally ignores --tl-btn-size / radius.
   - Use simple text arrows in Elementor button text: “‹” and “›”
   - Optional: add classes on the button widgets: is-prev / is-next
   ========================================================== */


/* ==========================================================
   [05] STORY CARD — BOXED (image flush, no outer border)
   ========================================================== */
.lx-timeline .lx-tl-card{
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: var(--tl-gap) !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;

  /* remove side padding here; children manage their own surfaces */
  padding-inline: 0 !important;
}
.lx-timeline .lx-tl-card > .e-con-inner{ display: contents !important; }

/* Media panel (boxed within the card) */
.lx-timeline .lx-tl-media{
  width: 100%;
  aspect-ratio: 5 / 6;
  min-height: clamp(320px, 30vw, 480px) !important; /* capped so it doesn’t explode */

  overflow: hidden !important;
  border-radius: var(--tl-card-radius) !important;

  background: #0F1E2A !important;
  box-shadow: 0 14px 46px rgba(0,0,0,.10);
  position: relative;
}

/* Media fills the mask */
.lx-timeline .lx-tl-media img,
.lx-timeline .lx-tl-media video,
.lx-timeline .lx-tl-media iframe{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Content panel (separate surface) */
.lx-timeline .lx-tl-content{
  align-self: center !important;

  background: var(--tl-card-bg) !important;
  border: 1px solid rgba(15,23,32,.08) !important;
  border-radius: var(--tl-card-radius) !important;

  padding: clamp(18px, 2.4vw, 30px) !important;
  box-shadow: 0 14px 46px rgba(0,0,0,.08);
}
.lx-timeline .lx-tl-content > .e-con-inner{ display: contents !important; }

/* Year */
.lx-timeline .lx-tl-year{
  opacity: .55 !important;
  font-weight: 650 !important;
  color: var(--tl-ink) !important;
  margin: 0 0 6px 0 !important;
  font-size: clamp(.95rem, 1vw, 1.05rem) !important;
}

/* Card title */
.lx-timeline .lx-tl-title{
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--tl-ink) !important;
  margin: 0 0 .65rem 0 !important;
  font-size: var(--tl-h2) !important;
}

/* Subtitle */
.lx-timeline .lx-tl-subtitle{
  opacity: .80 !important;
  font-weight: 650 !important;
  color: var(--tl-ink) !important;
  margin: 0 0 1rem 0 !important;
  font-size: var(--tl-sub) !important;
}

/* Body */
.lx-timeline .lx-tl-body{
  opacity: .78 !important;
  color: var(--tl-ink) !important;
  line-height: 1.6 !important;
  font-size: var(--tl-body) !important;
  max-width: 52ch !important;
  margin: 0 !important;
}


/* ==========================================================
   [06] YEARS NAV — FULL WIDTH breakout (but aligned to boxed grid)
   Classes:
   .lx-tl-years contains year buttons (HTML widget or container)
   ========================================================== */
.lx-timeline .lx-tl-years{
  /* full width breakout */
  width: 100vw !important;
  max-width: none !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  /* premium bar */
  background: var(--tl-years-bg) !important;
  border-top: 1px solid var(--tl-border) !important;

  /* align content to the same boxed padding */
  padding-block: 12px !important;
  padding-inline: var(--tl-pad-x) !important;

  /* scroll */
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lx-timeline .lx-tl-years::-webkit-scrollbar{ display:none; }

/* Inner track behaviour */
.lx-timeline .lx-tl-years{
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Optional subtle accent line (cinema-grade) */
.lx-timeline .lx-tl-years::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(212,135,82,.0), rgba(212,135,82,.75), rgba(212,135,82,.0));
  opacity: .55;
  pointer-events: none;
}

/* Year buttons */
.lx-timeline .lx-tl-years button{
  background: transparent !important;
  border: 0 !important;
  padding: 10px 10px !important;

  opacity: .35 !important;
  color: var(--tl-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  cursor: pointer !important;
  white-space: nowrap !important;

  border-radius: 999px !important;
  transition: opacity .2s ease, background .2s ease !important;
}

.lx-timeline .lx-tl-years button:hover{
  opacity: .62 !important;
  background: rgba(255,255,255,.55) !important;
}

.lx-timeline .lx-tl-years button.is-active{
  opacity: 1 !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}


/* ==========================================================
   [07] FADE TRANSITION (optional)
   ========================================================== */
.lx-timeline .lx-tl-fade{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.lx-timeline .lx-tl-fade.is-show{
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================
   [08] RESPONSIVE
   ========================================================== */
@media (max-width: 1024px){
  .lx-timeline .lx-tl-card{
    grid-template-columns: 1fr !important;
  }
  .lx-timeline .lx-tl-media{
    min-height: 320px !important;
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 767px){
  .lx-timeline{
    padding-block: clamp(1.1rem, 3vw, 2rem);
  }
  .lx-timeline .lx-tl-top,
  .lx-timeline .lx-tl-card{
    padding-inline: clamp(1rem, 4vw, 1.4rem) !important;
  }
  .lx-timeline .lx-tl-years{
    padding-inline: clamp(1rem, 4vw, 1.4rem) !important;
    justify-content: flex-start !important; /* better on small screens */
  }
}


/* ==========================================================
   [LX-TL] Footer
   - Keep .lx-tl-top and .lx-tl-card boxed for premium readability
   - Break out ONLY .lx-tl-years to full width (100vw) for the timeline feel
   - Media is capped on ultra-wide to avoid "too big" visuals
   ========================================================== */


/* ==========================================================
   [LX-TEAM] The Team — Premium Cinematic Reveal (Global)
   Classes required:
   .lx-team (section wrap)
   .lx-team-grid (horizontal track)
   .lx-team-card (each card)
   .lx-team-front (front media layer)
   .lx-team-back (bio overlay)
   .lx-team-toggle (Elementor Button overlay)
   Inside back (optional but recommended):
   .lx-team-name .lx-team-role .lx-team-bio .lx-team-links
   ========================================================== */


/* ==========================================================
   [1] WRAP + TOKENS
   ========================================================== */
.lx-team{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3.5rem);
  padding-block: clamp(1.6rem, 3vw, 3.2rem);

  --lx-ink: #0F1720;
  --lx-muted: rgba(15,23,32,.72);

  --lx-orange: #D48752;            /* Films.Solutions accent */
  --lx-radius: 26px;

  --lx-shadow: 0 12px 30px rgba(0,0,0,.10);
  --lx-shadow-hover: 0 18px 58px rgba(0,0,0,.14);

  --lx-card-w: clamp(260px, 26vw, 340px);
  --lx-gap: clamp(14px, 1.8vw, 22px);

  --lx-ease: cubic-bezier(.22,.61,.36,1);
}

/* Optional section background (subtle, premium) */
.lx-team{
  background: linear-gradient(180deg, #F6F4F1 0%, #F2F0ED 100%);
  border-radius: 24px;
}

/* Elementor wrapper helper */
.lx-team > .e-con-inner{ display: contents !important; }


/* ==========================================================
   [2] HEADER (optional)
   ========================================================== */
.lx-team .lx-team-title .elementor-heading-title{
  font-family: var(--lx-font-display, "Inter Tight"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  font-size: clamp(2.1rem, 3.8vw, 3.1rem) !important;
  color: var(--lx-ink) !important;
  margin: 0 !important;
}
.lx-team .lx-team-kicker{
  color: var(--lx-muted);
  line-height: 1.6;
  max-width: 70ch;
  margin-top: .6rem;
}


/* ==========================================================
   [3] TRACK (horizontal reel)
   ========================================================== */
.lx-team .lx-team-grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--lx-card-w);
  gap: var(--lx-gap);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* bleed outside container (cinema reel vibe) */
  padding-inline: clamp(1rem, 4vw, 3.5rem);
  margin-inline: calc(clamp(1rem, 4vw, 3.5rem) * -1);

  padding-bottom: 12px;
  scrollbar-width: none;
}
.lx-team .lx-team-grid::-webkit-scrollbar{ display:none; }


/* ==========================================================
   [4] CARD BASE (mask + ratio)
   ========================================================== */
.lx-team-card{
  scroll-snap-align: start;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;

  border-radius: var(--lx-radius) !important;

  /* IMPORTANT: keep background transparent so image is truly full-bleed */
  background: transparent !important;

  box-shadow: var(--lx-shadow), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  transform: translateZ(0);
  will-change: transform, opacity;
  transition: transform 220ms var(--lx-ease), box-shadow 260ms var(--lx-ease);

  /* Ratio belongs to the card, NOT the image */
  aspect-ratio: 5 / 7;
}

/* Subtle orange accent line (premium, not loud) */
.lx-team-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--lx-orange), rgba(212,135,82,0));
  opacity: .95;
  z-index: 6;
  pointer-events:none;
}

/* Hover lift (desktop only) */
@media (hover:hover){
  .lx-team-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--lx-shadow-hover), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  }
}


/* ==========================================================
   [5] CLICK OVERLAY (Elementor Button)
   ========================================================== */
.lx-team-card .lx-team-toggle .elementor-button,
.lx-team-card .lx-team-toggle .elementor-button-link{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  z-index: 10 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* ==========================================================
   [6] FRONT (FULL-BLEED IMAGE LAYER)
   ========================================================== */
.lx-team-front{
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;

  transition: transform 820ms var(--lx-ease), opacity 820ms var(--lx-ease);
}

/* Image fills the card */
.lx-team-front img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;

  /* slight filmic treatment (subtle) */
  filter: saturate(.92) contrast(1.03);
}


/* ==========================================================
   [7] BACK (BIO OVERLAY)
   ========================================================== */
.lx-team-back{
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--lx-radius);
  padding: 18px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  opacity: 0;
  transform: translateX(14px);
  transition: opacity 780ms ease, transform 820ms var(--lx-ease);
  z-index: 7;
}

/* Readability veil */
.lx-team-back::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.06) 0%,
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,.55) 100%
  );
  z-index: 0;
  pointer-events:none;
}

/* BONUS: soft grain (upload a subtle grain image) */
.lx-team-back::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("/wp-content/uploads/grain-soft.png");
  background-size: cover;
  background-position: center;
  opacity: .07;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events:none;
}

/* Text on back */
.lx-team-back > *{
  position: relative;
  z-index: 2;
  color: #F3F6F8;
}


/* ==========================================================
   [8] TYPOGRAPHY INSIDE BACK
   ========================================================== */
.lx-team-name{
  font-family: var(--lx-font-display, "Inter Tight"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin: 0 0 .25rem 0;
  font-size: 1.18rem;
}

.lx-team-role{
  margin: 0 0 .65rem 0;
  font-weight: 650;
  opacity: .92;
}
.lx-team-role::before{
  content:"";
  display:inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--lx-orange);
  margin-right: 10px;
  transform: translateY(-1px);
}

.lx-team-bio{
  margin: 0;
  line-height: 1.55;
  opacity: .92;
  max-width: 44ch;
  font-size: .98rem;
}

/* Links */
.lx-team-links a,
.lx-team-back a{
  color: #F3F6F8;
  text-decoration: none;
}
.lx-team-links a:hover,
.lx-team-back a:hover{
  text-decoration: underline;
}


/* ==========================================================
   [9] OPEN STATE (cinematic reveal)
   ========================================================== */
.lx-team-card.is-open .lx-team-front{
  transform: translateX(-22%);
  opacity: .08;
}
.lx-team-card.is-open .lx-team-back{
  opacity: 1;
  transform: translateX(0);
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.25));
}


/* ==========================================================
   [10] MOBILE BREATHING
   ========================================================== */
@media (max-width: 767px){
  .lx-team{
    padding-inline: clamp(1rem, 4vw, 1.4rem);
  }
  .lx-team .lx-team-grid{
    padding-inline: clamp(1rem, 4vw, 1.4rem);
    margin-inline: calc(clamp(1rem, 4vw, 1.4rem) * -1);
  }
}

/* --- FIX: remove the right white gutter / match left & right bleed --- */
.lx-team{
  overflow: hidden; /* coupe le surplus + évite un blanc de parent */
}

.lx-team .lx-team-grid{
  /* assure que la track prend au moins la largeur dispo */
  width: calc(100% + (clamp(1rem, 4vw, 3.5rem) * 2));
  margin-inline: calc(clamp(1rem, 4vw, 3.5rem) * -1);
  padding-inline: clamp(1rem, 4vw, 3.5rem);
}

/* petit bonus: un “fade” cinéma sur les bords (optionnel mais beau) */
.lx-team{
  position: relative;
}
.lx-team::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width: clamp(60px, 9vw, 180px);
  pointer-events:none;
  z-index: 20;

  background: linear-gradient(
    90deg,
    rgba(246,244,241,0) 0%,
    rgba(246,244,241,.65) 60%,
    rgba(246,244,241,1) 100%
  );
  filter: blur(.2px);
}
.lx-team .lx-team-grid{
  padding-right: clamp(80px, 10vw, 200px); /* laisse respirer avant le fade */
}



.lx-team{
  /* background pilotable */
  --lx-team-bg: transparent; /* change ici si besoin */
  background: var(--lx-team-bg);
}

/* ==========================================================
   [LX-HERO v6 MOBILE-FIX] Full-width stage + BOXED hero frame
   Fixes:
   - Mobile: hide right character column (.lx-hero-right)
   - Mobile: force left-bottom text to sit at the very bottom
   Notes:
   - Works with Elementor background VIDEO OR SLIDER images
   Layer order (inside frame):
   Z0  .lx-hero-media
   Z2  .lx-hero-overlay (PNG wave + opaque white bottom)
   Z3  .lx-hero-content (text + character PNG)
   ========================================================== */


/* ----------------------------------------------------------
   [LH-01] FULL WIDTH STAGE (brand background only)
   ---------------------------------------------------------- */
.lx-hero{
  position: relative;
  width: 100%;
  padding: 0 !important;

  /* tokens */
  --lx-max: 1400px;
  --lx-pad-x: clamp(1rem, 4vw, 3.5rem);
  --lx-radius-top: clamp(22px, 2.2vw, 36px);

  /* IMPORTANT: define white zone globally (was missing) */
  --lx-white-zone: clamp(160px, 22vh, 260px);

  --lx-hero-minh: clamp(540px, 70vh, 860px);

  /* Brand colors */
  --lx-top-gap: 10%;
  --lx-bottom-gap: 5%;
  --lx-stage-main: #F28A1A; /* Films.Solutions orange */

  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent var(--lx-top-gap),

    var(--lx-stage-main) var(--lx-top-gap),
    var(--lx-stage-main) calc(100% - var(--lx-bottom-gap)),

    transparent calc(100% - var(--lx-bottom-gap)),
    transparent 100%
  );
}

.lx-hero > .e-con-inner{
  display: contents !important;
}


/* ----------------------------------------------------------
   [LH-02] BOXED FRAME (visible hero)
   ---------------------------------------------------------- */
.lx-hero-frame{
  position: relative;
  max-width: var(--lx-max);
  margin-inline: auto;

  min-height: var(--lx-hero-minh);
  height: var(--lx-hero-minh);

  border-radius: var(--lx-radius-top) var(--lx-radius-top) 0 0;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 60px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(0,0,0,.10);

  background: rgba(0,0,0,.18);
}

.lx-hero-frame > .e-con-inner{ display: contents !important; }


/* ----------------------------------------------------------
   [LH-03] VIDEO LAYER (Z0)
   IMPORTANT:
   - Put the Elementor background video on THIS container: .lx-hero-video
   - Elementor: Style > Background > Video
   ---------------------------------------------------------- */
.lx-hero-video{
  position: absolute;
  inset: 0;
  z-index: 0;

  /* Ensure it can fill the forced frame height */
  width: 100%;
  height: 100%;
}

/* If Elementor injects internal wrappers, keep cover behaviour */
.lx-hero-video,
.lx-hero-video *{
  background-size: cover !important;
  background-position: center center !important;
}

/* Optional readability veil (subtle, cinematic) */
.lx-hero-video::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.28) 55%,
    rgba(0,0,0,.34) 100%
  );
  z-index: 1;
  pointer-events:none;
}

/* ----------------------------------------------------------
   [LH-04] OVERLAY PNG (Z2) — wave + opaque white bottom
   ---------------------------------------------------------- */
.lx-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lx-hero-overlay .lx-hero-overlay-img img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}


/* ----------------------------------------------------------
   [LH-05] CONTENT (Z3)
   ---------------------------------------------------------- */
.lx-hero-content{
  position: relative;
  z-index: 3;

  height: 100%;
  min-height: 100%;

  padding-inline: var(--lx-pad-x);
  padding-top: clamp(2.4rem, 5vw, 5.2rem);
  padding-bottom: clamp(1.2rem, 2.8vw, 2.4rem);
}

.lx-hero-content > .e-con-inner{ display: contents !important; }


/* ----------------------------------------------------------
   [LH-06] ROW — 50/50 layout
   ---------------------------------------------------------- */
.lx-hero-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 44px);
  align-items: stretch;
  height: 100%;
  min-height: 100%;
}

/* ----------------------------------------------------------
   [LH-06 LEFT] LEFT COLUMN — FLEX (NO GRID)
   - Bottom block is pinned to the bottom (white zone)
   - Top block fills the rest and can be vertically centered
   ---------------------------------------------------------- */
.lx-hero-left{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
}

/* TOP: takes remaining height above the white zone */
.lx-hero-left-top{
  flex: 1 1 auto;                 /* fills available space */
  display: flex;
  flex-direction: column;
  justify-content: center;         /* ✅ vertical centering */
  align-items: flex-start;         /* keep left aligned */
  text-align: left;

  padding-bottom: clamp(18px, 2vw, 28px); /* keep breathing room */
}

/* BOTTOM: pinned at the bottom, always visible */
.lx-hero-left-bottom{
  flex: 0 0 auto;
  align-self: flex-start;
  max-width: 60ch;

  padding-top: clamp(14px, 2vw, 18px);
  padding-bottom: clamp(10px, 2vw, 18px);

  /* optional: small safety spacing from the wave line */
  margin-bottom: clamp(6px, 1.5vw, 14px);
}


.lx-hero-left-bottom::before{
  content:"";
  position:absolute;
  left: 0;
  right: clamp(10px, 2vw, 24px);
  top: 0;
  height: 1px;
  background: rgba(15,23,32,.10);
}

/* Right column for character PNG */
.lx-hero-right{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 100%;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 80%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 80%,
    rgba(0,0,0,0) 100%
  );
}


/* ----------------------------------------------------------
   [LH-07] TYPE (premium)
   ---------------------------------------------------------- */
.lx-hero-left-top .elementor-heading-title{
  color: #F3F6F8 !important;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 760 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.02 !important;
  font-size: clamp(2.4rem, 4.8vw, 4.05rem) !important;
  margin: 0 0 .75rem 0 !important;
  text-shadow: 0 16px 42px rgba(0,0,0,.32);
}

.lx-hero-left-top .elementor-widget-text-editor{
  color: rgba(243,246,248,.86);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  line-height: 1.45;
  text-shadow: 0 12px 28px rgba(0,0,0,.28);
}


/* ----------------------------------------------------------
   [LH-08] CHARACTER PNG
   ---------------------------------------------------------- */
.lx-hero-figure img{
  width: min(560px, 42vw);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.35));
  transform: translateZ(0);
}


/* ----------------------------------------------------------
   [LH-09] RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 1024px){
  .lx-hero-frame{
    height: auto;
    min-height: var(--lx-hero-minh);
  }

  .lx-hero-row{
    grid-template-columns: 1fr; /* stack */
  }

  /* Keep right visible on tablets if you want (optional):
     If you want it hidden already on tablet, uncomment:
     .lx-hero-right{ display:none; }
  */

  .lx-hero-right{
    justify-content: flex-start;
    padding-top: 10px;
  }

  .lx-hero-figure img{
    width: min(620px, 86vw);
  }
}

/* ==========================================================
   MOBILE (<768px) — NEW CONFIG (slideshow on .lx-hero-video)
   Goals:
   - Hide right character
   - Make left-bottom sit at the absolute bottom
   - Keep title vertically centered
   - Fix Elementor slideshow showing as a thin line
   ========================================================== */

@media (max-width: 767px){

  /* ==========================================================
     1) FORCE HERO HEIGHT (no collapse on mobile)
     ========================================================== */
  .lx-hero-frame{
    min-height: var(--lx-hero-minh) !important;
  }

  /* ==========================================================
     2) FORCE HEIGHT CHAIN (Elementor wrappers)
     ========================================================== */
  .lx-hero-frame,
  .lx-hero-frame > .e-con-inner,
  .lx-hero-content,
  .lx-hero-content > .e-con-inner,
  .lx-hero-row,
  .lx-hero-row > .e-con-inner{
    height: 100% !important;
    min-height: 100% !important;
  }

  /* ==========================================================
     3) ONE COLUMN + HIDE CHARACTER
     ========================================================== */
  .lx-hero-row{
    display: flex !important;
    flex-direction: column !important;
  }

  .lx-hero-right{
    display: none !important;
  }

  /* ==========================================================
     4) PREMIUM TRANSLUCENT CARD (LEFT COLUMN)
     ========================================================== */
  .lx-hero-left{
    height: 100% !important;
    min-height: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    /* 🎨 Premium Films.Solutions translucent tone */
    background:
      linear-gradient(
        180deg,
        rgba(18,22,26,0.58) 0%,
        rgba(18,22,26,0.64) 55%,
        rgba(242,138,26,0.12) 100%
      );

    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.14);

    box-shadow:
      0 22px 60px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.06);

    padding-inline: clamp(1rem, 4vw, 1.3rem);
  }

  /* ==========================================================
     5) TITLE BLOCK — TRUE VERTICAL CENTER
     ========================================================== */
  .lx-hero-left-top{
    flex: 1 1 auto !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding-top: clamp(2.2rem, 6vw, 3.2rem);
    padding-bottom: clamp(1.6rem, 4vw, 2.2rem);
  }

  /* ==========================================================
     6) BOTTOM TEXT — HARD PIN TO BOTTOM
     ========================================================== */
  .lx-hero-left-bottom{
    margin-top: auto !important;

    padding-top: clamp(1rem, 3vw, 1.4rem);
    padding-bottom: clamp(1rem, 3vw, 1.6rem);

    position: relative;
  }

  /* Subtle divider (cinematic, not UI-ish) */
  .lx-hero-left-bottom::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 20%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.05)
    );
  }
}


/* ==========================================================
   Usage reminder:
   - Stage colour: .lx-hero
   - Boxed hero:   .lx-hero-frame
   - Background:   set Elementor BG (video OR slideshow) on .lx-hero-media
   - Wave overlay: PNG Image widget inside .lx-hero-overlay
   - Content:      .lx-hero-content (left text + optional right character)
   ========================================================== */

/* ==========================================================
   FIELD NOTES v2 — Films.Solutions (CLEAN / DEDUPED)
   Blocks:
   - [FN-00] Tokens
   - [FN-10] Stage (global background)
   - [FN-20] Hero (bg + premium overlay + 16:9 frame behind grid)
   - [FN-30] Nav (Magazine grid, different tile sizes)
   - [FN-40] Content Stage (sections)
   - [FN-50] Posts Grid (apply class "fn-posts" on widget)
   - [FN-60] Footer (optional)
   ========================================================== */


/* [FN-00] TOKENS → merged in :root at top of file */


/* ---------------------------
   [FN-10] STAGE (page background)
   Apply on the TOP container: .fn-stage
--------------------------- */
.fn-stage{
  position: relative;
  width: 100%;
  background:
    radial-gradient(1100px 600px at 30% -10%, rgba(242,138,26,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(100,170,255,.12), transparent 65%),
    linear-gradient(180deg, var(--fn-stage) 0%, var(--fn-stage-2) 100%);
  color: var(--fn-ink);
  overflow: hidden;
  padding: 0 !important;
}

/* Elementor wrapper safety */
.fn-stage > .e-con-inner{
  max-width: none !important;
  padding: 0 !important;
}

/* blurred background vibe (uses stage bg) */
.fn-stage::before{
  content:"";
  position:absolute;
  inset:-40px;
  background: inherit;
  filter: blur(18px) saturate(1.05);
  transform: scale(1.06);
  opacity: .55;
  pointer-events:none;
  z-index: 0;
}

/* readability veil */
.fn-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.52) 45%,
    rgba(0,0,0,.66) 100%
  );
  pointer-events:none;
  z-index: 1;
}

/* keep content above overlays */
.fn-stage *{ position: relative; z-index: 2; }


/* =========================================================
   FN HERO — FULL FINAL (A/B/C/D/E/F/G/H)
   5 Loop Grids (1 post each)
   Option 1: B is clamped to A height (medium tiles fill height, no overflow)
========================================================= */

/* ---------------------------
   HERO STAGE
--------------------------- */
.fn-hero{
  position: relative;
  padding-block: clamp(22px, 4.5vw, 64px);
  background: var(--fn-stage, #0b1620);
  overflow: hidden;
}

/* soft blurred perimeter (uses Elementor BG on fn-hero) */
.fn-hero::before{
  content:"";
  position:absolute;
  inset:-42px;
  background: inherit;
  background-position:center;
  background-size:cover;
  transform: scale(1.06);
  filter: blur(18px) saturate(1.03) contrast(1.03);
  opacity: .40;
  pointer-events:none;
}

/* light cinematic overlay */
.fn-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 420px at 12% 18%, rgba(255,126,0,.12), transparent 60%),
    radial-gradient(900px 380px at 88% 24%, rgba(255,126,0,.08), transparent 60%),
    linear-gradient(to bottom,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.03) 38%,
      rgba(11,22,32,.18) 78%,
      rgba(11,22,32,.26) 100%
    );
  pointer-events:none;
}

/* ---------------------------
   FRAME (glass)
--------------------------- */
.fn-hero__frame{
  width: min(var(--fn-max, 1280px), 100%);
  margin-inline: auto;
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  position: relative;
  isolation: isolate;
}

/* subtle inner plate */
.fn-hero__frame::after{
  content:"";
  position:absolute;
  left:50%;
  top:54%;
  transform: translate(-50%, -50%);
  width: min(1180px, 100%);
  aspect-ratio: 16 / 9;
  background: inherit;
  background-position:center;
  background-size:cover;
  border-radius: 18px;
  opacity: .14;
  filter: saturate(1.04) contrast(1.05);
  box-shadow:
    0 26px 90px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.10);
  z-index: -1;
  pointer-events:none;
}

/* =========================================================
   LAYOUT — A (60%) + B (40%)
   We force the parent of A & B to be a flex row.
   (If you have a dedicated parent class like .fn-hero__columns,
    replace the .elementor-kit-4 below with that class.)
========================================================= */

/* parent that holds A and B */
.fn-hero__frame > .e-con{
  display:flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: clamp(12px, 2vw, 22px) !important;
  min-height: 0;
}

/* columns */
.fnA, .fnB{ min-width: 0; min-height: 0; }

.fnA{
  flex: 0 0 60% !important;
  max-width: 60% !important;
  display:flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}

.fnB{
  flex: 0 0 40% !important;
  max-width: 40% !important;
  display:flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
  align-items: stretch;
  align-self: stretch; /* follow A height */
  min-height: 0;
}

/* A internals: C (master) then D (row for small tiles) */
.fnC{ min-width:0; min-height:0; }

/* Master tile: give breathing room to content */
.fnC .fn-tile .elementor-post__content{
  padding-top: clamp(16px, 2vw, 28px);
}

.fnD{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.6vw, 18px);
  min-width:0;
  min-height:0;
}

.fnE, .fnF{
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

/* B internals: G and H split available height (clamped to A) */
.fnG, .fnH{
  flex: 1 1 0 !important;
  min-width:0;
  min-height:0 !important;
}

/* Medium tiles MUST fill their half */
.fnB .fnG,
.fnB .fnH{
  display: flex;
}

.fnB .fnG > *,
.fnB .fnH > *{
  flex: 1 1 0;
}

.fnB .fn-tile--medium .elementor-loop-container,
.fnB .fn-tile--medium .e-loop-item{
  height: 100% !important;
}


/* =========================================================
   TILE SYSTEM — Loop Grid outputs 1 item
========================================================= */

.fn-tile .elementor-loop-container{
  display:block !important;
}

/* kill Elementor card look */
.fn-tile .e-loop-item{
  position: relative;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* prevent “tiny slices” by forcing height down the tree */
.fn-tile .e-loop-item > *,
.fn-tile .e-loop-item .e-con,
.fn-tile .e-loop-item .elementor-element,
.fn-tile .e-loop-item .elementor-widget-wrap,
.fn-tile .e-loop-item .elementor-widget-container{
  height: 100% !important;
  min-height: 0 !important;
}

/* image cover */
.fn-tile img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display:block !important;
}

/* ratios */
.fn-tile--master .e-loop-item{ aspect-ratio: 16 / 9; }
.fn-tile--small  .e-loop-item{ aspect-ratio: 4 / 5; }
.fn-tile--medium .e-loop-item{ aspect-ratio: 5 / 7; }

/* Medium tiles: fill their half height, no ratio forcing */
.fnB .fn-tile--medium .e-loop-item{
  aspect-ratio: auto !important;
  height: 100% !important;
}

/* overlay for text readability */
.fn-tile .e-loop-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 58%);
  pointer-events:none;
}

/* text pinned bottom */
.fn-tile .elementor-post__text,
.fn-tile .elementor-post__content{
  position:absolute !important;
  left: clamp(12px, 1.2vw, 16px);
  right: clamp(12px, 1.2vw, 16px);
  bottom: clamp(12px, 1.2vw, 16px);
  z-index: 2;
  margin: 0 !important;
}

/* title (kills inherited H2/H3 huge sizes) */
.fn-tile .elementor-post__title,
.fn-tile .elementor-post__title a,
.fn-tile h1, .fn-tile h2, .fn-tile h3{
  font-size: clamp(14px, 1.15vw, 18px) !important;
  line-height: 1.12 !important;
  margin: 0 0 6px 0 !important;
  color: #fff !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}

/* CTA styling (link/button) */
.fn-tile a.fn-cta,
.fn-tile .fn-cta,
.fn-tile .elementor-button{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding: 0 0 2px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* hide clutter */
.fn-tile .elementor-post__excerpt,
.fn-tile .elementor-post__meta-data{
  display:none !important;
}

/* Ensure title/text stays visible above a full-tile link overlay */
.fn-tile .elementor-post__text,
.fn-tile .elementor-post__content{
  position: absolute !important;
  z-index: 5 !important;
}

.fn-tile .elementor-post__title,
.fn-tile .elementor-post__title a{
  position: relative;
  z-index: 6 !important;
}

.fn-tile img{ position: relative; z-index: 1; }
.fn-tile .e-loop-item::after{ z-index: 2; }

/* Full-tile link overlay must not visually cover content */
.fn-tile .e-loop-item a{
  position: relative;
  z-index: 3;
}

/* If there is an absolute overlay link inside the card */
.fn-tile .e-loop-item a[href]{
  color: inherit !important;
}

/* If your tile uses an overlay link: keep it clickable but behind text */
.fn-tile .e-loop-item a.elementor-post__thumbnail__link,
.fn-tile .e-loop-item a.e-link,
.fn-tile .e-loop-item a.elementor-clickable{
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}

/* Keep text above it (still visible) */
.fn-tile .elementor-post__content,
.fn-tile .elementor-post__text{
  z-index: 6 !important;
  pointer-events: none; /* IMPORTANT: lets clicks pass through to the overlay link */
}

/* But allow selecting/clicking the title if you want (optional) */
.fn-tile .elementor-post__title a{
  pointer-events: auto;
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .fn-hero__frame > .e-con{
    flex-direction: column !important;
  }
  .fnA, .fnB{
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  /* on tablet, medium tiles can use a nicer ratio again if desired */
  .fnB .fn-tile--medium .e-loop-item{
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}

@media (max-width: 767px){
  .fnD{
    flex-direction: column;
  }
  .fn-tile--master .e-loop-item,
  .fn-tile--small .e-loop-item,
  .fn-tile--medium .e-loop-item{
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   FN HERO — TITLE FINAL (premium)
========================================================= */

.fn-hero__title{
  position: relative;
  z-index: 10; /* always above overlays */
  max-width: 20ch;
  margin: 0 0 clamp(14px, 2vw, 20px) 0;
}

/* Main H1 */
.fn-hero__title .elementor-heading-title{
  color: rgba(255,255,255,.96) !important;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  font-size: clamp(34px, 4.6vw, 64px) !important;
  margin: 0 !important;

  text-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.25) !important;
}

/* Signature orange underline (like your nav tiles, but hero-grade) */
.fn-hero__title .elementor-heading-title::after{
  content:"";
  display:block;
  width: clamp(74px, 7vw, 118px);
  height: clamp(5px, .6vw, 8px);
  border-radius: 999px;
  margin-top: clamp(10px, 1.3vw, 16px);
  background: rgba(242,138,26,.82);
  box-shadow:
    0 10px 26px rgba(242,138,26,.22),
    0 0 0 4px rgba(242,138,26,.14);
}

/* Optional: a subtle “plate” behind the title for readability */
.fn-hero__title::before{
  content:"";
  position:absolute;
  left: clamp(-10px, -1vw, -16px);
  top: clamp(-10px, -1vw, -14px);
  right: clamp(-10px, -1vw, -16px);
  bottom: clamp(-8px, -1vw, -12px);
  border-radius: 18px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.30),
    rgba(0,0,0,.12)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  z-index: -1;
  opacity: .85;
}

/* On mobile: keep it punchy but not huge */
@media (max-width: 767px){
  .fn-hero__title{
    max-width: 24ch;
  }
}


/* =========================================================
   FN NAV — POLISH LAYER
========================================================= */

/* Make sure content sits above overlays */
.fn-nav__item > *{
  position: relative;
  z-index: 2;
}

/* Add a darker base for text contrast (like the mockup) */
.fn-nav__item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 14% 18%, rgba(255,126,0,.22), transparent 55%),
    radial-gradient(900px 260px at 86% 22%, rgba(255,126,0,.12), transparent 60%),
    linear-gradient(to bottom,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.18) 42%,
      rgba(0,0,0,.55) 100%
    );
}

/* Slight inner rim + depth */
.fn-nav__item::after{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  opacity: .9;
  pointer-events:none;
  z-index: 1;
}

/* Improve title readability, even on lighter tiles */
.fn-nav__tile-title .elementor-heading-title{
 color:#fff !important;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 860 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 0 0 10px 0 !important;
  font-size: clamp(20px, 1.8vw, 28px) !important;
  text-shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* signature orange underline — ON GARDE */
.fn-nav__tile-title .elementor-heading-title::after{
  content:"";
  display:block;
  width: 54px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(242,138,26,.75);
  box-shadow: 0 0 0 3px rgba(242,138,26,.16);
}

/* Subtext: off-white + a touch more contrast */
.fn-nav__tile-sub{
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.42);
}

/* Optional: tighter vertical rhythm (more “magazine”) */
.fn-nav__item{
  padding: clamp(18px, 2.2vw, 26px) !important;
}

/* Optional: make the whole tile feel clickable */
.fn-nav__item{
  cursor: pointer;
}

/* If you place a link inside the tile (recommended), make it look premium */
.fn-nav__item a{
  color: inherit;
  text-decoration: none;
}
.fn-nav__item a:hover{
  text-decoration: none;
}

/* Add a subtle hover sheen */
.fn-nav__item:hover{
  transform: translateY(-2px);
}

/* If your theme forces dark text somewhere inside, hard-fix it */
.fn-nav .fn-nav__item,
.fn-nav .fn-nav__item *{
  color: inherit;
}

/* =========================================================
   FN NAV — TITLE SAFETY PATCH
   Keeps original color + orange underline
========================================================= */

/* Ensure title sits above overlays */
.fn-nav__tile-title{
  position: relative;
  z-index: 3;
}

/* Protect title color from any inherited dimming */
.fn-nav__tile-title .elementor-heading-title{
  color: #fff !important;
  opacity: 1 !important;
}

/* Make sure underline stays vivid */
.fn-nav__tile-title .elementor-heading-title::after{
  opacity: 1;
  filter: none;
}


/* ---------------------------
   [FN-40] CONTENT STAGE (sections inside fn-stage)
   Structure per your screenshot:
   .fn-stage
     .production-journal (section wrapper)
       .fn-section
         .fn-section__head
           .fn-section__title (Heading)
           .fn-section__desc (Text)
         .fn-section__rule
         .fn-section__posts (Posts widget)
--------------------------- */
.fn-section{
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.05) 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--fn-radius);
  box-shadow: var(--fn-shadow);
  overflow: hidden;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.fn-section > .e-con-inner{
  padding: clamp(1.2rem, 2.6vw, 2rem) !important;
}

.fn-section__head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.fn-section__title .elementor-heading-title{
  color: var(--fn-ink) !important;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 820 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem) !important;
  margin: 0 !important;
}

.fn-section__desc{
  margin-top: 8px;
  color: var(--fn-muted);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(.98rem, 1.35vw, 1.08rem);
  line-height: 1.6;
  max-width: 78ch;
}

.fn-section__rule{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .95;
  margin: clamp(10px, 1.8vw, 16px) 0;
}

/* anchor offset if you use IDs + sticky header */
.fn-anchor{ scroll-margin-top: 110px; }

@media (max-width: 1024px){
  .fn-section__head{ grid-template-columns: 1fr; }
}


/* ---------------------------
   [FN-50] POSTS GRID (apply class "fn-posts" on the Posts widget)
   - forces 4 columns desktop
   - 16:9 thumbnails
   - hides meta/date/comments
--------------------------- */
.fn-posts{
  --fn-card-bg: rgba(10,20,29,.62);
  --fn-card-border: rgba(255,255,255,.12);
  --fn-card-border-hover: rgba(242,138,26,.40);
  --fn-card-radius: 18px;
  --fn-card-pad: 14px;
  --fn-title: rgba(243,246,248,.96);
  --fn-text: rgba(243,246,248,.72);
}

/* grid wrapper */
.fn-posts .elementor-posts-container,
.fn-posts .e-loop-container{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.6vw, 18px) !important;
}

@media (max-width: 1024px){
  .fn-posts .elementor-posts-container,
  .fn-posts .e-loop-container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px){
  .fn-posts .elementor-posts-container,
  .fn-posts .e-loop-container{
    grid-template-columns: 1fr !important;
  }
}

/* card */
.fn-posts .elementor-post,
.fn-posts .e-loop-item{
  background: var(--fn-card-bg) !important;
  border: 1px solid var(--fn-card-border) !important;
  border-radius: var(--fn-card-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--fn-shadow-soft) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}
.fn-posts .elementor-post:hover,
.fn-posts .e-loop-item:hover{
  transform: translateY(-4px);
  border-color: var(--fn-card-border-hover) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.48) !important;
}

/* 16:9 thumb */
.fn-posts img{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(1.04) contrast(1.02);
}

/* padding common wrappers */
.fn-posts .elementor-post__text,
.fn-posts .elementor-post__content,
.fn-posts .e-loop-item__content,
.fn-posts .elementor-widget-wrap{
  padding: var(--fn-card-pad) !important;
}

/* title */
.fn-posts .elementor-post__title,
.fn-posts .elementor-post__title a{
  color: var(--fn-title) !important;
  font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 820 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  font-size: clamp(1.02rem, 1.15vw, 1.20rem) !important;
  text-decoration: none !important;
  margin: 0 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}
.fn-posts .elementor-post__title a:hover{ color:#fff !important; }

/* excerpt */
.fn-posts .elementor-post__excerpt{
  color: var(--fn-text) !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .96rem !important;
  line-height: 1.45 !important;
  margin-top: .55rem !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

/* hide meta/date/comments/badges */
.fn-posts .elementor-post__meta-data,
.fn-posts .elementor-post-info,
.fn-posts .elementor-post-date,
.fn-posts .elementor-post-author,
.fn-posts .elementor-post__comments,
.fn-posts .elementor-post__badge,
.fn-posts .elementor-post__avatar{
  display: none !important;
}


/* =========================================================
   [FN-60] FOOTER CTA — Premium, clean, conversion-friendly
   Structure:
   .fn-footer
     .fn-footer__frame
       .fn-footer__title (Heading)
       .fn-footer__sub   (Text)
       .fn-footer__actions
         .fn-footer__btn (Button)
         .fn-footer__link (optional link)
========================================================= */

.fn-footer{
  padding-block: clamp(22px, 3vw, 44px);
}

/* frame */
.fn-footer__frame{
  width: 100%;
  max-width: var(--fn-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--fn-pad-x, clamp(16px, 3.2vw, 40px));
  padding-block: clamp(18px, 2.4vw, 28px);

  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 70px rgba(0,0,0,.34);

  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 22px);
}

/* warm accent + darker base (for readability) */
.fn-footer__frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 16% 20%, rgba(242,138,26,.22), transparent 56%),
    radial-gradient(700px 260px at 88% 30%, rgba(242,138,26,.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.44));
}

/* subtle inner rim */
.fn-footer__frame::after{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  opacity: .9;
  pointer-events:none;
}

/* left block (title + sub) */
.fn-footer__title{
  margin: 0;
  min-width: 0;
}
.fn-footer__title .elementor-heading-title{
  color: rgba(255,255,255,.96) !important;
  font-family:"Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 880 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  font-size: clamp(20px, 2.2vw, 34px) !important;
  margin: 0 !important;
  text-shadow: 0 18px 46px rgba(0,0,0,.45);
}

/* small orange underline */
.fn-footer__title .elementor-heading-title::after{
  content:"";
  display:block;
  width: clamp(64px, 6vw, 96px);
  height: 6px;
  border-radius: 999px;
  margin-top: 12px;
  background: rgba(242,138,26,.82);
  box-shadow:
    0 10px 26px rgba(242,138,26,.20),
    0 0 0 4px rgba(242,138,26,.12);
}

/* FN FOOTER — force readable subtext */
.fn-footer__sub,
.fn-footer__sub *{
  color: rgba(255,255,255,.80) !important;
}

.fn-footer__sub{
  margin-top: 10px !important;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
  line-height: 1.55 !important;
  max-width: 68ch !important;
  text-shadow: 0 12px 30px rgba(0,0,0,.40) !important;
  opacity: 1 !important;
}


/* actions row */
.fn-footer__actions{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* button */
.fn-footer__btn .elementor-button{
  background: rgba(242,138,26,.92) !important;
  color: #0b1620 !important;
  border: 0 !important;
  border-radius: 999px !important;

  padding: 14px 18px !important;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 780 !important;
  letter-spacing: .02em !important;

  box-shadow:
    0 16px 42px rgba(242,138,26,.22),
    0 12px 34px rgba(0,0,0,.22) !important;

  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.fn-footer__btn .elementor-button:hover{
  transform: translateY(-1px);
  filter: saturate(1.06) contrast(1.03);
  box-shadow:
    0 22px 56px rgba(242,138,26,.26),
    0 18px 44px rgba(0,0,0,.28) !important;
}

.fn-footer__btn .elementor-button:focus{
  outline: 2px solid rgba(242,138,26,.45) !important;
  outline-offset: 3px;
}


/* secondary link (optional) */
.fn-footer__link a{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.90) !important;
  text-decoration:none !important;
  font-size: 12px !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
}

/* responsive */
@media (max-width: 1024px){
  .fn-footer__frame{
    flex-direction: column;
    align-items: flex-start;
  }
  .fn-footer__actions{
    width: 100%;
    justify-content: flex-start;
  }
}

  
  /* =========================================================
   LOOP ITEM FN HERO BACKGROUND — HARD LOCK (no refresh drift)
========================================================= */

.fn-hero-bg{
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;

  /* prevents layout jumps on load */
  min-height: 100%;
}

/* If blur perimeter uses inherit, lock it too */
.fn-hero-bg::before{
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Safety: never let child elements redefine bg */
.fn-hero-bg *{
  background-size: inherit;
  background-position: inherit;
}/* End custom CSS */