/* ==========================================================
   SANS FRONTIÈRES DESIGN — PHONE VERSION
   Desktop is intentionally untouched.
   Everything in this file is scoped to phone widths only.
   ========================================================== */

@media (max-width: 760px){

  :root{
    --sfd-mobile-pad:20px;
    --sfd-mobile-header-h:104px;
    --sfd-mobile-radius:18px;
  }

  html{
    scroll-behavior:smooth;
    overflow-x:hidden !important;
  }

  body{
    width:100%;
    max-width:100vw;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100%;
  }

  img, video, canvas, svg{
    max-width:100%;
  }

  #about,
  #services,
  #capabilities,
  #software-development,
  #contact,
  #sfd-section-two,
  #sfd-section-three,
  #sfd-nav-network-target,
  #sfd-nav-hfc-target,
  #sfd-nav-design-target,
  #sfd-nav-fttx-target,
  #sfd-nav-software-target{
    scroll-margin-top:calc(var(--sfd-mobile-header-h) + 12px);
  }


  /* =========================
     FIXED HEADER
     ========================= */

  .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:20000 !important;
  }

  .site-header .top-ribbon{
    height:34px !important;
    min-height:34px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    overflow:hidden !important;
  }

  .site-header .top-ribbon__contact{
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
  }

  .site-header .top-ribbon__contact > span{
    display:block !important;
    white-space:nowrap !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }

  /* Contact details remain available later in the page.
     Hiding them here prevents the ribbon from overflowing on a phone. */
  .site-header .top-ribbon__contact > a{
    display:none !important;
  }

  .site-header .language-menu{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
  }

  .site-header .language-menu a{
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    padding:4px !important;
  }

  .site-header .language-menu img{
    width:19px !important;
    height:14px !important;
  }

  .site-header .main-nav{
    height:70px !important;
    min-height:70px !important;
    padding:7px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .site-header .main-nav .brand--sfd-wordmark{
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:2px !important;
    overflow:visible !important;
  }

  .site-header .main-nav .brand__sfd-symbol{
    width:auto !important;
    height:51px !important;
    max-height:51px !important;
    flex:0 0 auto !important;
    margin:0 !important;
    transform:none !important;
  }

  .site-header .main-nav .brand__sfd-wordmark{
    width:auto !important;
    height:42px !important;
    max-height:42px !important;
    flex:0 1 auto !important;
    margin-left:-8px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .site-header .primary-menu{
    display:none !important;
  }

  .site-header .nav-actions{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }

  .site-header .login-link{
    display:none !important;
  }

  .site-header .nav-button,
  .site-header .nav-button--light,
  .site-header .nav-button--outline{
    min-width:0 !important;
    min-height:42px !important;
    height:42px !important;
    padding:0 13px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
  }


  /* =========================
     HERO / FIRST SCREEN
     ========================= */

  .sfd-lcp-hero{
    min-height:100svh !important;
    height:100svh !important;
    padding-top:var(--sfd-mobile-header-h) !important;
    overflow:hidden !important;
  }

  .sfd-lcp-hero .sfd-hero-slides,
  .sfd-lcp-hero .sfd-slide{
    top:var(--sfd-mobile-header-h) !important;
    height:calc(100svh - var(--sfd-mobile-header-h)) !important;
    min-height:0 !important;
  }

  .sfd-lcp-hero .sfd-slide > img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  .sfd-lcp-hero .sfd-slide__shade{
    background:
      linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.48) 68%,rgba(0,0,0,.88) 100%) !important;
  }

  .sfd-lcp-hero .sfd-hero-brand{
    top:calc(var(--sfd-mobile-header-h) + 18px) !important;
    left:18px !important;
    right:auto !important;
    width:auto !important;
    max-width:69vw !important;
    gap:0 !important;
    transform:none !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    width:63px !important;
    height:63px !important;
    flex:0 0 63px !important;
    margin:0 !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    width:162px !important;
    max-width:calc(69vw - 56px) !important;
    height:auto !important;
    margin-left:-8px !important;
    top:0 !important;
    transform:none !important;
  }

  .sfd-lcp-hero .sfd-hero-actions{
    position:absolute !important;
    z-index:30 !important;
    top:calc(var(--sfd-mobile-header-h) + 18px) !important;
    right:14px !important;
    left:auto !important;
    width:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:7px !important;
  }

  .sfd-lcp-hero .sfd-hero-menu-trigger{
    min-height:38px !important;
    padding:6px 0 !important;
    font-size:10px !important;
    gap:8px !important;
  }

  .sfd-lcp-hero .sfd-menu-icon,
  .sfd-lcp-hero .sfd-menu-icon i{
    width:20px !important;
  }

  .sfd-lcp-hero .sfd-control-flowing-top{
    min-height:38px !important;
    height:38px !important;
    padding:0 12px !important;
    font-size:9px !important;
    white-space:nowrap !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    left:var(--sfd-mobile-pad) !important;
    right:var(--sfd-mobile-pad) !important;
    top:auto !important;
    bottom:156px !important;
    width:auto !important;
    max-width:88vw !important;
    transform:none !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    margin:0 0 10px !important;
    max-width:100% !important;
    font-size:clamp(36px,10.8vw,48px) !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    margin:0 0 13px !important;
    max-width:85vw !important;
    font-size:14px !important;
    line-height:1.35 !important;
  }

  .sfd-lcp-hero .sfd-hero-link{
    min-height:40px !important;
    padding:8px 0 !important;
    font-size:10px !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:132px !important;
    padding:10px 12px 14px !important;
    background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.76) 30%,rgba(0,0,0,.94) 100%) !important;
    transform:none !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:12px !important;
    right:52px !important;
    top:10px !important;
    width:auto !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:3px !important;
    right:12px !important;
    width:38px !important;
    height:38px !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:12px !important;
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    gap:2px !important;
    padding:0 12px 2px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity !important;
    overscroll-behavior-x:contain !important;
    scrollbar-width:none !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs::-webkit-scrollbar{
    display:none !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 76px !important;
    min-width:76px !important;
    height:76px !important;
    padding:6px 4px !important;
    scroll-snap-align:start !important;
  }

  .sfd-lcp-hero .sfd-hero-tab__icon{
    width:29px !important;
    height:29px !important;
    margin-bottom:4px !important;
  }

  .sfd-lcp-hero .sfd-hero-tab b{
    font-size:7.8px !important;
    line-height:1.12 !important;
    letter-spacing:.08em !important;
  }

  .sfd-hero-menu-sheet{
    width:min(88vw,390px) !important;
    padding:66px 26px 30px !important;
  }

  .sfd-hero-menu-nav button{
    min-height:54px !important;
    padding:12px 0 !important;
  }


  /* =========================
     PROJECT SHOWCASE
     ========================= */

  .sfd-project-showcase{
    padding:18px 0 20px !important;
  }

  .sfd-project-showcase__frame{
    width:calc(100vw - 24px) !important;
  }

  .sfd-project-showcase__viewport{
    height:620px !important;
    min-height:620px !important;
    border-radius:16px !important;
  }

  .sfd-project-showcase__media{
    left:12px !important;
    right:12px !important;
    top:16px !important;
    width:auto !important;
    height:51% !important;
    transform:none !important;
  }

  .sfd-project-showcase__copy{
    left:22px !important;
    right:22px !important;
    bottom:30px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
  }

  .sfd-project-showcase__copy h2{
    max-width:100% !important;
    font-size:18px !important;
  }

  .sfd-project-showcase__copy p{
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.4 !important;
  }

  .sfd-project-showcase__arrow{
    top:28% !important;
    width:38px !important;
    height:44px !important;
  }

  .sfd-project-showcase__arrow--prev{
    left:4px !important;
  }

  .sfd-project-showcase__arrow--next{
    right:4px !important;
  }

  .sfd-project-showcase__footer-label{
    margin-top:12px !important;
    font-size:9px !important;
    letter-spacing:.20em !important;
  }


  /* =========================
     WHO WE ARE
     ========================= */

  .sfd-section-three,
  .sfd-section-three > .hero{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

  .sfd-section-three > .hero{
    padding:44px var(--sfd-mobile-pad) 26px !important;
  }

  .sfd-about-layout{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .sfd-about-title{
    position:static !important;
    margin:0 0 30px !important;
    text-align:left !important;
    font-size:40px !important;
    line-height:1 !important;
  }

  .sfd-about-column{
    position:static !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 34px !important;
    padding:0 !important;
    transform:none !important;
    text-align:left !important;
  }

  .sfd-about-column h3{
    margin-bottom:15px !important;
    font-size:13px !important;
    line-height:1.25 !important;
    letter-spacing:.14em !important;
  }

  .sfd-about-column p{
    font-size:15px !important;
    line-height:1.58 !important;
    text-align:left !important;
  }

  .sfd-about-signature{
    margin-top:12px !important;
  }

  .sfd-section-three .stage{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:280px !important;
    min-height:280px !important;
    margin:6px auto 6px !important;
    transform:none !important;
  }

  .sfd-section-three .stage .logo{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) scale(.72) !important;
    transform-origin:center center !important;
  }

  .sfd-section-three .box-cloud{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) scale(.70) !important;
  }


  /* =========================
     PARTNER LOGOS
     ========================= */

  .partner-strip,
  .partner-strip.sfd-strip-persist,
  .partner-strip.sfd-strip-flowing,
  body > .partner-strip.sfd-strip-persist,
  body > .partner-strip.sfd-strip-flowing{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:92px !important;
    min-height:92px !important;
    margin:0 !important;
    padding:10px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    scrollbar-width:none !important;
  }

  .partner-strip::-webkit-scrollbar{
    display:none !important;
  }

  .partner-strip .partner-card,
  .partner-strip.sfd-strip-persist .partner-card,
  .partner-strip.sfd-strip-flowing .partner-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    flex:0 0 118px !important;
    width:118px !important;
    min-width:118px !important;
    height:70px !important;
    min-height:70px !important;
    margin:0 !important;
    padding:7px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    transform:none !important;
  }

  .partner-strip .partner-card img{
    position:static !important;
    display:block !important;
    width:auto !important;
    height:27px !important;
    max-height:27px !important;
    margin:0 auto !important;
    transform:none !important;
    object-fit:contain !important;
  }

  .partner-strip .partner-card span{
    position:static !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    text-align:center !important;
    white-space:normal !important;
    font-size:8px !important;
    line-height:1.15 !important;
  }


  /* =========================
     LIGHT CONTENT
     ========================= */

  .site-content,
  .content-shell{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .content-shell{
    padding:0 var(--sfd-mobile-pad) !important;
  }

  .content-intro{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:26px !important;
    padding:52px 0 40px !important;
  }

  .content-intro__copy{
    width:100% !important;
    max-width:none !important;
  }

  .content-intro__copy h2{
    font-size:clamp(38px,11vw,50px) !important;
    line-height:.98 !important;
    letter-spacing:-.035em !important;
  }

  .content-intro__copy p{
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .intro-fiber-visual{
    width:100% !important;
    min-width:0 !important;
    min-height:360px !important;
    height:360px !important;
    margin:0 !important;
    animation:none !important;
  }

  .intro-fiber-visual__frame{
    inset:0 0 66px 0 !important;
    border-radius:16px !important;
  }

  .intro-fiber-visual__badge{
    left:8px !important;
    right:8px !important;
    bottom:0 !important;
  }

  .content-section{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .section-heading{
    display:block !important;
    margin-bottom:26px !important;
  }

  .section-heading > span{
    display:block !important;
    margin-bottom:8px !important;
  }

  .section-heading h3,
  .experience-heading h3,
  .programming-section__intro h3{
    font-size:clamp(34px,10vw,46px) !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;
  }

  .service-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .service-card{
    width:100% !important;
    min-height:0 !important;
    padding:18px !important;
    border-radius:var(--sfd-mobile-radius) !important;
  }

  .service-card__image{
    width:100% !important;
    height:210px !important;
    object-fit:cover !important;
    border-radius:12px !important;
  }


  /* =========================
     CUBE SECTION
     ========================= */

  .sfd-dark-feature{
    min-height:0 !important;
    height:auto !important;
    padding:52px var(--sfd-mobile-pad) 40px !important;
    overflow:hidden !important;
  }

  .sfd-dark-feature__inner{
    width:100% !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
    padding:0 !important;
  }

  .sfd-dark-feature__copy{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
  }

  .sfd-dark-feature__badge{
    font-size:10px !important;
  }

  .sfd-dark-feature__copy h2{
    margin:20px 0 18px !important;
    font-size:clamp(48px,14vw,62px) !important;
    line-height:.91 !important;
    letter-spacing:-.045em !important;
  }

  .sfd-dark-feature__copy p{
    max-width:none !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .sfd-dark-feature__actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .sfd-dark-feature__button,
  .sfd-dark-feature__link{
    min-height:44px !important;
    padding:0 16px !important;
  }

  .sfd-dark-feature__visual{
    position:relative !important;
    width:100% !important;
    height:360px !important;
    min-height:360px !important;
    margin:0 !important;
    inset:auto !important;
    overflow:visible !important;
  }

  #sfd-photo-cube{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(82vw,340px) !important;
    height:min(82vw,340px) !important;
  }

  .sfd-cube-controls{
    right:2px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    gap:10px !important;
  }

  .sfd-cube-control{
    width:44px !important;
    height:44px !important;
  }


  /* =========================
     EXPERIENCE / CARDS
     ========================= */

  .experience-section{
    padding-top:52px !important;
  }

  .experience-heading{
    margin-bottom:26px !important;
  }

  .experience-heading p{
    font-size:18px !important;
  }

  .experience-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .experience-card{
    min-height:0 !important;
    padding:20px !important;
    border-radius:var(--sfd-mobile-radius) !important;
  }

  .experience-card img{
    max-width:150px !important;
    max-height:72px !important;
    margin:0 auto 18px !important;
  }


  /* =========================
     PHONE SHOWCASE
     ========================= */

  .programming-phone-band-wrap{
    padding-top:42px !important;
  }

  .programming-phone-band{
    margin-left:calc(var(--sfd-mobile-pad) * -1) !important;
    margin-right:calc(var(--sfd-mobile-pad) * -1) !important;
    padding:36px var(--sfd-mobile-pad) !important;
  }

  .programming-phone-band__inner{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .programming-phone-band__copy{
    width:100% !important;
    max-width:none !important;
  }

  .programming-gallery__phone--band{
    width:min(76vw,300px) !important;
    margin:0 auto !important;
  }


  /* =========================
     SOFTWARE
     ========================= */

  .programming-section{
    display:flex !important;
    flex-direction:column !important;
    gap:28px !important;
    padding-top:48px !important;
  }

  .programming-section__intro{
    width:100% !important;
    max-width:none !important;
  }

  .programming-section__intro > p{
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .programming-services{
    gap:0 !important;
  }

  .programming-services article{
    grid-template-columns:38px 1fr !important;
    gap:12px !important;
    padding:16px 0 !important;
  }

  .programming-gallery{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .programming-gallery figure{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  .programming-gallery img{
    width:100% !important;
    height:auto !important;
    object-fit:cover !important;
    border-radius:14px !important;
  }


  /* =========================
     FINAL / CONTACT
     ========================= */

  .sfd-final-stage{
    padding:28px 12px 0 !important;
  }

  .sfd-closing{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:0 !important;
  }

  .sfd-closing__intro,
  .sfd-closing__trust{
    width:100% !important;
    padding:28px 20px !important;
    border-radius:18px !important;
  }

  .sfd-closing__build-title{
    display:block !important;
    font-size:clamp(38px,11vw,48px) !important;
    line-height:.97 !important;
    letter-spacing:-.035em !important;
  }

  .sfd-closing__intro > p{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .sfd-closing__contact-links{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  .sfd-closing__mail,
  .sfd-closing__phone{
    width:100% !important;
    max-width:100% !important;
    min-height:44px !important;
    overflow-wrap:anywhere !important;
  }

  .sfd-closing__trust-grid{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }

  .sfd-closing__trust-item{
    min-height:72px !important;
  }

  .sfd-final-brand{
    margin:28px 0 20px !important;
  }


  /* =========================
     MODALS / TOUCH
     ========================= */

  button,
  a,
  [role="button"]{
    touch-action:manipulation;
  }

  .autocad-project-modal__dialog,
  .sfd-modal__dialog{
    width:calc(100vw - 24px) !important;
    max-width:none !important;
    max-height:88svh !important;
    margin:6svh auto !important;
  }
}


/* Very small phones */
@media (max-width: 390px){

  :root{
    --sfd-mobile-pad:16px;
  }

  .site-header .main-nav{
    padding-left:9px !important;
    padding-right:9px !important;
  }

  .site-header .main-nav .brand__sfd-symbol{
    height:46px !important;
    max-height:46px !important;
  }

  .site-header .main-nav .brand__sfd-wordmark{
    height:36px !important;
    max-height:36px !important;
    margin-left:-7px !important;
  }

  .site-header .nav-button,
  .site-header .nav-button--light,
  .site-header .nav-button--outline{
    padding:0 10px !important;
    font-size:9px !important;
  }

  .sfd-lcp-hero .sfd-hero-brand{
    max-width:66vw !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    width:56px !important;
    height:56px !important;
    flex-basis:56px !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    width:145px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    bottom:150px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-size:34px !important;
  }

  .sfd-dark-feature__copy h2{
    font-size:46px !important;
  }

  .sfd-dark-feature__visual{
    height:330px !important;
    min-height:330px !important;
  }
}


/* Landscape phone */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape){

  :root{
    --sfd-mobile-header-h:84px;
  }

  .site-header .top-ribbon{
    height:28px !important;
    min-height:28px !important;
  }

  .site-header .main-nav{
    height:56px !important;
    min-height:56px !important;
  }

  .site-header .main-nav .brand__sfd-symbol{
    height:43px !important;
    max-height:43px !important;
  }

  .site-header .main-nav .brand__sfd-wordmark{
    height:35px !important;
    max-height:35px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    left:24px !important;
    right:auto !important;
    bottom:88px !important;
    max-width:55vw !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-size:34px !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    height:82px !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:4px !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex-basis:68px !important;
    min-width:68px !important;
    height:58px !important;
  }
}


/* ==========================================================
   MOBILE — INITIAL HERO OVERLAY -> NORMAL SCROLL HEADER
   Phone only. Desktop is untouched.

   AT TOP:
   - no black menu strip
   - hero logo sits over the image, upper-left
   - MENU + Control Flowing App sit on the same upper image area

   AFTER A SMALL SCROLL:
   - those hero overlay elements disappear
   - the existing normal header/menu strip appears and takes over
   ========================================================== */
@media (max-width:760px){

  :root{
    --sfd-mobile-top-ribbon-h:34px !important;
    --sfd-mobile-header-h:34px !important;
  }

  /* The site header only reserves the thin contact/language ribbon at page top. */
  .site-header{
    height:var(--sfd-mobile-top-ribbon-h) !important;
    min-height:var(--sfd-mobile-top-ribbon-h) !important;
    max-height:var(--sfd-mobile-top-ribbon-h) !important;
    overflow:visible !important;
    background:transparent !important;
  }

  .site-header .top-ribbon{
    height:var(--sfd-mobile-top-ribbon-h) !important;
    min-height:var(--sfd-mobile-top-ribbon-h) !important;
    max-height:var(--sfd-mobile-top-ribbon-h) !important;
    position:relative !important;
    z-index:20020 !important;
  }

  /*
    NORMAL MENU STRIP:
    hidden at the untouched first screen.
    It becomes visible only after body.sfd-mobile-nav-scrolled is set.
  */
  .site-header .main-nav,
  body.sfd-mercury-global-light .site-header .main-nav,
  body:not(.sfd-mercury-global-light) .site-header .main-nav{
    position:fixed !important;
    top:var(--sfd-mobile-top-ribbon-h) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:70px !important;
    min-height:70px !important;
    margin:0 !important;
    padding:7px 12px !important;
    transform:translate3d(0,-18px,0) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:20010 !important;
    transition:
      opacity .28s ease,
      transform .34s cubic-bezier(.22,.61,.36,1),
      visibility .28s step-end !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav,
  body.sfd-mobile-nav-scrolled.sfd-mercury-global-light .site-header .main-nav,
  body.sfd-mobile-nav-scrolled:not(.sfd-mercury-global-light) .site-header .main-nav{
    transform:translate3d(0,0,0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:
      opacity .28s ease,
      transform .34s cubic-bezier(.22,.61,.36,1),
      visibility 0s !important;
  }

  /* At the top, the hero image begins immediately below the thin ribbon.
     This removes the black empty area completely. */
  .sfd-lcp-hero{
    padding-top:var(--sfd-mobile-top-ribbon-h) !important;
    margin-top:0 !important;
    min-height:100svh !important;
    height:100svh !important;
  }

  .sfd-lcp-hero .sfd-hero-slides,
  .sfd-lcp-hero .sfd-slide{
    top:var(--sfd-mobile-top-ribbon-h) !important;
    height:calc(100svh - var(--sfd-mobile-top-ribbon-h)) !important;
  }

  /* INITIAL HERO LOGO — over the image, upper-left. */
  .sfd-lcp-hero .sfd-hero-brand{
    display:flex !important;
    position:absolute !important;
    top:calc(var(--sfd-mobile-top-ribbon-h) + 11px) !important;
    left:12px !important;
    right:auto !important;
    width:auto !important;
    max-width:48vw !important;
    height:62px !important;
    align-items:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    z-index:35 !important;
    transition:opacity .22s ease, transform .28s ease !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    width:58px !important;
    height:58px !important;
    flex:0 0 58px !important;
    margin:0 !important;
    transform:none !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    width:128px !important;
    max-width:calc(48vw - 50px) !important;
    height:auto !important;
    margin-left:-7px !important;
    top:0 !important;
    transform:none !important;
  }

  /* MENU + Control Flowing App are on the same top row over the photograph. */
  .sfd-lcp-hero .sfd-hero-actions{
    position:absolute !important;
    top:calc(var(--sfd-mobile-top-ribbon-h) + 15px) !important;
    right:10px !important;
    left:auto !important;
    width:auto !important;
    max-width:49vw !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:36 !important;
    transition:opacity .22s ease, transform .28s ease !important;
  }

  .sfd-lcp-hero .sfd-hero-menu-trigger{
    order:2 !important;
    width:34px !important;
    min-width:34px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .sfd-lcp-hero .sfd-hero-menu-trigger > span[data-i18n="hero_menu"]{
    display:none !important;
  }

  .sfd-lcp-hero .sfd-menu-icon,
  .sfd-lcp-hero .sfd-menu-icon i{
    width:21px !important;
  }

  .sfd-lcp-hero .sfd-control-flowing-top{
    order:1 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 11px !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-size:8.6px !important;
  }

  /*
    As soon as the normal strip appears, remove the duplicate hero logo/actions.
    This avoids duplicated logo/reflection/button layers.
  */
  body.sfd-mobile-nav-scrolled .sfd-lcp-hero .sfd-hero-brand,
  body.sfd-mobile-nav-scrolled .sfd-lcp-hero .sfd-hero-actions{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(0,-8px,0) !important;
  }

  /* Keep the existing normal mobile header brand untouched once it appears. */
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand--sfd-wordmark{
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-brand{
    left:9px !important;
    top:calc(var(--sfd-mobile-top-ribbon-h) + 9px) !important;
    max-width:46vw !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }

  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    width:112px !important;
    max-width:calc(46vw - 44px) !important;
    margin-left:-6px !important;
  }

  .sfd-lcp-hero .sfd-hero-actions{
    top:calc(var(--sfd-mobile-top-ribbon-h) + 11px) !important;
    right:7px !important;
    gap:5px !important;
    max-width:51vw !important;
  }

  .sfd-lcp-hero .sfd-control-flowing-top{
    padding:0 9px !important;
    font-size:8px !important;
  }
}


/* ==========================================================
   MOBILE v4 — top hero + scroll header final logic
   ONLY phones. Desktop untouched.
   ========================================================== */
@media (max-width:760px){

  :root{
    --sfd-mobile-ribbon-h:34px !important;
  }

  /* Remove every remaining spacer/band between ribbon and hero image. */
  html, body{
    padding-top:0 !important;
  }

  .site-header{
    height:var(--sfd-mobile-ribbon-h) !important;
    min-height:var(--sfd-mobile-ribbon-h) !important;
    max-height:var(--sfd-mobile-ribbon-h) !important;
    background:transparent !important;
    overflow:visible !important;
  }

  .site-header .top-ribbon{
    height:var(--sfd-mobile-ribbon-h) !important;
    min-height:var(--sfd-mobile-ribbon-h) !important;
    max-height:var(--sfd-mobile-ribbon-h) !important;
    margin:0 !important;
    border:0 !important;
  }

  .sfd-lcp-hero{
    position:relative !important;
    top:0 !important;
    margin:0 !important;
    padding:0 !important;
    height:100svh !important;
    min-height:100svh !important;
  }

  .sfd-lcp-hero .sfd-hero-slides,
  .sfd-lcp-hero .sfd-slide{
    top:var(--sfd-mobile-ribbon-h) !important;
    bottom:auto !important;
    height:calc(100svh - var(--sfd-mobile-ribbon-h)) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* FIRST SCREEN: logo over photograph. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand{
    display:flex !important;
    position:absolute !important;
    top:calc(var(--sfd-mobile-ribbon-h) + 12px) !important;
    left:12px !important;
    right:auto !important;
    height:60px !important;
    max-width:50vw !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:20030 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    width:58px !important;
    height:58px !important;
    flex:0 0 58px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    width:128px !important;
    max-width:calc(50vw - 50px) !important;
    margin-left:-7px !important;
    top:0 !important;
    transform:none !important;
  }

  /* Put MENU and Control Flowing App LOWER, on the same vertical level as logo. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    position:absolute !important;
    top:calc(var(--sfd-mobile-ribbon-h) + 22px) !important;
    right:10px !important;
    left:auto !important;
    width:auto !important;
    max-width:49vw !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:20031 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-menu-trigger{
    order:2 !important;
    width:34px !important;
    min-width:34px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-menu-trigger > span[data-i18n="hero_menu"]{
    display:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-control-flowing-top{
    order:1 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 11px !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-size:8.6px !important;
  }

  /* NORMAL HEADER STRIP:
     completely hidden on first frame, then visible after scroll.
     It keeps its logo + Control App + menu behavior. */
  .site-header .main-nav{
    position:fixed !important;
    top:var(--sfd-mobile-ribbon-h) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:70px !important;
    min-height:70px !important;
    padding:7px 12px !important;
    margin:0 !important;
    z-index:20025 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(0,-10px,0) !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate3d(0,0,0) !important;
    transition:opacity .24s ease, transform .28s ease !important;
  }

  /* Force the existing mobile strip contents visible when scrolled.
     Do NOT hide its logo or nav actions. */
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand--sfd-wordmark,
  body.sfd-mobile-nav-scrolled .site-header .main-nav .nav-actions{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-symbol,
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-wordmark{
    opacity:1 !important;
    visibility:visible !important;
  }

  /* On phone the full desktop icon menu stays hidden, but the normal
     logo/button strip is restored after scroll. */
  body.sfd-mobile-nav-scrolled .site-header .main-nav .primary-menu{
    display:none !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav .nav-actions{
    gap:7px !important;
  }

  /* Hero overlay disappears once normal strip takes over. */
  body.sfd-mobile-nav-scrolled .sfd-lcp-hero .sfd-hero-brand,
  body.sfd-mobile-nav-scrolled .sfd-lcp-hero .sfd-hero-actions{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(0,-8px,0) !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand{
    top:calc(var(--sfd-mobile-ribbon-h) + 10px) !important;
    left:9px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    top:calc(var(--sfd-mobile-ribbon-h) + 20px) !important;
    right:7px !important;
  }
}


/* ==========================================================
   MOBILE v5 — remove the last black gap under Monday-Friday
   Phone only. Desktop untouched.
   The hero image now rises behind the fixed ribbon, so there is
   no separate black band between ribbon and photograph.
   ========================================================== */
@media (max-width:760px){

  .sfd-lcp-hero{
    margin-top:0 !important;
    padding-top:0 !important;
    top:0 !important;
    background:transparent !important;
  }

  .sfd-lcp-hero .sfd-hero-slides,
  .sfd-lcp-hero .sfd-slide{
    top:0 !important;
    margin-top:0 !important;
    padding-top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
  }

  .sfd-lcp-hero .sfd-slide > img{
    top:0 !important;
    margin-top:0 !important;
  }

  /* Keep logo and controls visually below the ribbon while the
     photograph itself reaches all the way to the top. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand{
    top:calc(var(--sfd-mobile-ribbon-h) + 12px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    top:calc(var(--sfd-mobile-ribbon-h) + 22px) !important;
  }
}


/* ==========================================================
   MOBILE v6 — typography/alignment refinement
   Phone only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){

  /* ----------------------------------------------------------
     HERO / MAIN IMAGES
     Main title centered.
     Subtitle/copy 40% smaller than current mobile size and left aligned.
     ---------------------------------------------------------- */
  .sfd-lcp-hero .sfd-slide__copy{
    text-align:left !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    text-align-last:center !important;
    text-justify:auto !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    width:100% !important;
    max-width:100% !important;
    font-size:8.4px !important; /* previous 14px × 0.60 = 40% smaller */
    line-height:1.40 !important;
    text-align:left !important;
    text-align-last:left !important;
  }

  .sfd-lcp-hero .sfd-hero-link{
    text-align:left !important;
    justify-content:flex-start !important;
  }


  /* ----------------------------------------------------------
     LARGE CONTENT SECTIONS
     Main section titles centered.
     Eyebrows / subtitles left aligned.
     General paragraph text justified.
     ---------------------------------------------------------- */

  /* Main titles */
  .sfd-about-title,
  .content-intro__copy h2,
  .section-heading h3,
  .experience-heading h3,
  .programming-section__intro h3,
  .sfd-dark-feature__copy h2,
  .sfd-closing__build-title{
    width:100% !important;
    text-align:center !important;
    text-align-last:center !important;
    text-justify:auto !important;
  }

  /* Subtitles / kickers / small section headings */
  .sfd-about-column h3,
  .section-kicker,
  .section-heading > span,
  .experience-heading > span,
  .programming-section__intro .section-kicker,
  .sfd-dark-feature__badge,
  .sfd-closing__eyebrow{
    text-align:left !important;
    text-align-last:left !important;
  }

  /* General text paragraphs */
  .sfd-about-column p,
  .content-intro__copy p,
  .content-section p,
  .experience-heading p,
  .experience-card p,
  .programming-section__intro > p,
  .programming-services article p,
  .sfd-dark-feature__copy p,
  .sfd-closing__intro > p{
    text-align:justify !important;
    text-align-last:left !important;
    text-justify:inter-word !important;
  }

  /* Preserve natural left alignment for buttons/links. */
  .sfd-dark-feature__actions,
  .sfd-closing__contact-links,
  .programming-services article{
    text-align:left !important;
  }
}


/* ==========================================================
   MOBILE v7 — dedicated portrait hero artwork
   Uses ONLY the original desktop photographs, re-composed/cropped
   for phone. No objects were generated, deleted or replaced.
   Desktop remains untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-slide[data-sfd-index="0"] > img{
    content:url("assets/mobile-hero/sfd-hero-01-mobile.jpg") !important;
    object-position:center center !important;
  }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="1"] > img{
    content:url("assets/mobile-hero/sfd-hero-02-mobile.jpg") !important;
    object-position:center center !important;
  }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"] > img{
    content:url("assets/mobile-hero/sfd-hero-03-mobile.jpg") !important;
    object-position:center center !important;
  }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="3"] > img{
    content:url("assets/mobile-hero/sfd-hero-04-mobile.jpg") !important;
    object-position:center center !important;
  }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="4"] > img{
    content:url("assets/mobile-hero/sfd-hero-05-mobile.jpg") !important;
    object-position:center center !important;
  }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="5"] > img{
    content:url("assets/mobile-hero/sfd-hero-software-mobile.jpg") !important;
    object-position:center center !important;
  }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="6"] > img{
    content:url("assets/mobile-hero/sfd-hero-06-mobile.jpg") !important;
    object-position:center center !important;
  }
}

/* ==========================================================
   MOBILE v9 — hero framing refinement
   Goal:
   - the visual photo area reaches lower before text begins
   - main objects stay inside the upper/middle focus box on phone
   - only mobile is affected; desktop remains untouched
   ========================================================== */
@media (max-width:760px){

  /* Move the copy block lower so the image occupies more vertical space
     before the title/subtitle begin. */
  .sfd-lcp-hero .sfd-slide__copy{
    left:16px !important;
    right:16px !important;
    width:auto !important;
    max-width:none !important;
    bottom:104px !important;
  }

  /* Use the clean original hero images on phone and reframe them only with
     object-position so the important objects sit near the upper-middle area. */
  .sfd-lcp-hero .sfd-slide[data-sfd-index="0"] > img{
    content:url("assets/sfd-hero-01.png") !important;
    object-fit:cover !important;
    object-position:52% 18% !important;
  }

  .sfd-lcp-hero .sfd-slide[data-sfd-index="1"] > img{
    content:url("assets/sfd-hero-02.png") !important;
    object-fit:cover !important;
    object-position:50% 26% !important;
  }

  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"] > img{
    content:url("assets/sfd-hero-03.png") !important;
    object-fit:cover !important;
    object-position:50% 23% !important;
  }

  .sfd-lcp-hero .sfd-slide[data-sfd-index="3"] > img{
    content:url("assets/sfd-hero-04.jpg") !important;
    object-fit:cover !important;
    object-position:50% 22% !important;
  }

  .sfd-lcp-hero .sfd-slide[data-sfd-index="4"] > img{
    content:url("assets/sfd-hero-05.png") !important;
    object-fit:cover !important;
    object-position:50% 28% !important;
  }

  /* The last two mobile-specific replacements stay as they were already approved. */
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide__copy{
    bottom:100px !important;
    left:14px !important;
    right:14px !important;
  }

  .sfd-lcp-hero .sfd-slide[data-sfd-index="0"] > img{ object-position:53% 17% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="1"] > img{ object-position:50% 25% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"] > img{ object-position:50% 22% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="3"] > img{ object-position:50% 21% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="4"] > img{ object-position:50% 27% !important; }
}

/* ==========================================================
   MOBILE v12 — FINAL HERO MOBILE FRAMING
   Only mobile version is affected.
   - Uses dedicated mobile hero images for slides 1 to 5
   - Main title stays INSIDE the image area
   - Bottom icon menu rises to sit right after the image block
   - Desktop remains untouched
   ========================================================== */
@media (max-width:760px){
  /* Dedicated mobile images */
  .sfd-lcp-hero .sfd-slide[data-sfd-index="0"] > img{ content:url("assets/mobile-hero/sfd-hero-01-mobile.jpg") !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="1"] > img{ content:url("assets/mobile-hero/sfd-hero-02-mobile.jpg") !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"] > img{ content:url("assets/mobile-hero/sfd-hero-03-mobile.jpg") !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="3"] > img{ content:url("assets/mobile-hero/sfd-hero-04-mobile.jpg") !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="4"] > img{ content:url("assets/mobile-hero/sfd-hero-05-mobile.jpg") !important; }

  /* Image block height */
  .sfd-lcp-hero .sfd-slide > img{
    height:56.5% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  /* Keep important objects inside the middle focus area */
  .sfd-lcp-hero .sfd-slide[data-sfd-index="0"] > img{ object-position:50% 24% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="1"] > img{ object-position:50% 20% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"] > img{ object-position:50% 20% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="3"] > img{ object-position:50% 18% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="4"] > img{ object-position:50% 18% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="5"] > img{ object-position:50% 18% !important; }
  .sfd-lcp-hero .sfd-slide[data-sfd-index="6"] > img{ object-position:50% 18% !important; }

  /* Darken lower edge of image so title sits inside the image cleanly */
  .sfd-lcp-hero .sfd-slide__shade{
    background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.14) 44%,rgba(0,0,0,.38) 53%,rgba(0,0,0,.82) 63%,rgba(0,0,0,.96) 100%) !important;
  }

  /* Title/subtitle stay inside the image */
  .sfd-lcp-hero .sfd-slide__copy{
    top:46.5svh !important;
    bottom:auto !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;
    max-width:none !important;
    z-index:28 !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    margin:0 0 8px !important;
    font-size:clamp(34px,10.4vw,50px) !important;
    line-height:.95 !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    margin:0 0 9px !important;
    max-width:74vw !important;
    font-size:12px !important;
    line-height:1.3 !important;
  }

  .sfd-lcp-hero .sfd-hero-link{
    min-height:30px !important;
    padding:4px 0 !important;
  }

  /* Controls area sits right after the image block */
  .sfd-lcp-hero .sfd-hero-controls{
    top:61svh !important;
    bottom:auto !important;
    left:0 !important;
    right:0 !important;
    height:108px !important;
    padding:8px 12px 12px !important;
    background:linear-gradient(180deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.98) 100%) !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    top:8px !important;
    left:12px !important;
    right:52px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:1px !important;
    right:12px !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:10px !important;
    padding:0 12px 0 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide > img{
    height:55.5% !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    top:45.5svh !important;
    left:14px !important;
    right:14px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-size:clamp(31px,10vw,44px) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    max-width:72vw !important;
    font-size:11px !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    top:60svh !important;
    height:106px !important;
    padding:8px 10px 10px !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:10px !important;
    right:50px !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:9px !important;
    padding:0 10px 0 !important;
  }
}

/* ==========================================================
   MOBILE v14 — PRESERVE v12 IMAGE CONTAINER EXACTLY
   Only reorganizes title / pause / icon menu.
   IMPORTANT: does NOT change hero image height or container framing.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-slide__copy{
    top:48.2svh !important;
    bottom:auto !important;
    left:16px !important;
    right:16px !important;
    width:auto !important;
    max-width:none !important;
    z-index:38 !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    margin:0 0 6px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    margin:0 0 7px !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    top:58.3svh !important;
    bottom:auto !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:104px !important;
    padding:0 12px 8px !important;
    background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.97) 46%,rgba(0,0,0,1) 100%) !important;
    overflow:visible !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    top:0 !important;
    left:14px !important;
    right:62px !important;
    width:auto !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:-22px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    z-index:42 !important;
    background:rgba(0,0,0,.20) !important;
    backdrop-filter:blur(2px) !important;
    -webkit-backdrop-filter:blur(2px) !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:7px !important;
    width:100% !important;
    padding:0 12px !important;
  }

  .sfd-lcp-hero .sfd-scroll-cue{
    display:none !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide__copy{
    top:47.5svh !important;
    left:14px !important;
    right:14px !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    top:57.5svh !important;
    height:100px !important;
    padding:0 10px 7px !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:12px !important;
    right:58px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:-21px !important;
    right:12px !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:6px !important;
    padding:0 10px !important;
  }
}


/* =========================
   HERO LAYOUT REFINEMENT v15
   Keep image container height, put title/subtitle over the image,
   move pause onto the image, and leave Discover more below.
   ========================= */
@media (max-width:760px){
  .sfd-lcp-hero{
    overflow:hidden !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    left:18px !important;
    right:18px !important;
    bottom:138px !important;
    max-width:none !important;
    z-index:35 !important;
    pointer-events:auto !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    position:relative !important;
    z-index:2 !important;
    margin:0 0 8px !important;
    color:#f4f1eb !important;
    text-shadow:0 2px 12px rgba(0,0,0,.55) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    position:relative !important;
    z-index:2 !important;
    margin:0 !important;
    max-width:74vw !important;
    color:rgba(255,255,255,.88) !important;
    text-shadow:0 2px 10px rgba(0,0,0,.5) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy .sfd-hero-link{
    position:absolute !important;
    left:0 !important;
    top:calc(100% + 16px) !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    min-height:28px !important;
    padding:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    color:rgba(255,255,255,.78) !important;
    text-transform:uppercase !important;
    letter-spacing:.18em !important;
    font-size:10px !important;
    z-index:3 !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    height:122px !important;
    padding:0 12px 14px !important;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.84) 58%,rgba(0,0,0,.96) 100%) !important;
    z-index:36 !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:12px !important;
    right:52px !important;
    top:8px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:-8px !important;
    right:12px !important;
    width:42px !important;
    height:42px !important;
    background:rgba(0,0,0,.14) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:18px !important;
    padding:0 12px 0 !important;
    align-items:flex-start !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    height:64px !important;
    min-width:72px !important;
    flex:0 0 72px !important;
    padding:4px 4px 2px !important;
  }

  .sfd-lcp-hero .sfd-hero-tab__icon{
    margin-bottom:3px !important;
  }
}


/* ==========================================================
   MOBILE v17 — clean hero composition
   Keeps the established image container size.
   Removes the artificial blur band from v16 and uses only a
   soft transparent gradient transition.
   ========================================================== */
@media (max-width:760px){

  /* Dark translucent ribbon only behind the initial logo/actions. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:var(--sfd-mobile-ribbon-h) !important;
    height:78px !important;
    background:linear-gradient(
      180deg,
      rgba(8,12,18,.56) 0%,
      rgba(8,12,18,.40) 68%,
      rgba(8,12,18,.12) 100%
    ) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:29 !important;
    pointer-events:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    z-index:31 !important;
  }

  /* Titles remain over the lower part of the image, but smaller and clean. */
  .sfd-lcp-hero .sfd-slide__copy{
    left:18px !important;
    right:18px !important;
    bottom:164px !important;
    max-width:calc(100% - 36px) !important;
    z-index:35 !important;
    pointer-events:auto !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:clamp(24px,7vw,36px) !important;
    line-height:1.00 !important;
    letter-spacing:-.028em !important;
    font-weight:600 !important;
    margin:0 0 6px !important;
    max-width:92% !important;
    color:#f5f5f2 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.42) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:10px !important;
    line-height:1.28 !important;
    margin:0 !important;
    max-width:72vw !important;
    color:rgba(255,255,255,.88) !important;
    text-shadow:0 2px 8px rgba(0,0,0,.42) !important;
  }

  /* Discover More stays outside the image zone. */
  .sfd-lcp-hero .sfd-slide__copy .sfd-hero-link{
    position:absolute !important;
    left:0 !important;
    top:calc(100% + 24px) !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    min-height:24px !important;
    padding:0 !important;
    color:rgba(255,255,255,.72) !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    text-transform:uppercase !important;
    letter-spacing:.16em !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:9px !important;
    z-index:40 !important;
  }

  /* Controls transition: transparent gradient only, never blurred. */
  .sfd-lcp-hero .sfd-hero-controls{
    height:128px !important;
    padding:0 12px 12px !important;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.16) 18%,
      rgba(0,0,0,.54) 44%,
      rgba(0,0,0,.88) 68%,
      rgba(0,0,0,.98) 100%
    ) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
    z-index:36 !important;
  }

  /* Progress line no longer crosses the title. */
  .sfd-lcp-hero .sfd-controls-topline{
    left:14px !important;
    right:58px !important;
    top:14px !important;
    width:auto !important;
  }

  /* Pause is clearly on the image, lower-right. */
  .sfd-lcp-hero .sfd-hero-pause{
    top:-14px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    background:rgba(0,0,0,.16) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:40 !important;
  }

  /* Icon row sits immediately below the image transition. */
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:14px !important;
    padding:0 10px !important;
    align-items:flex-start !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    height:64px !important;
    min-width:72px !important;
    flex:0 0 72px !important;
    padding:4px 3px 2px !important;
  }

  .sfd-lcp-hero .sfd-hero-tab__icon{
    margin-bottom:3px !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide__copy{
    left:14px !important;
    right:14px !important;
    bottom:160px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-size:clamp(22px,6.8vw,33px) !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    height:124px !important;
  }
}


/* ==========================================================
   MOBILE v18 — anti-overlap cleanup
   - smaller heading
   - clear spacing from progress line and pause button
   - Discover More visible
   - keep dark translucent top ribbon
   - only mobile CSS
   ========================================================== */
@media (max-width:760px){

  /* Keep the image container size already approved */
  .sfd-lcp-hero{
    --sfd-mobile-image-box-h: 400px !important;
  }

  /* Title block: higher, narrower, no collision with pause/line */
  .sfd-lcp-hero .sfd-slide__copy{
    left:18px !important;
    right:88px !important;
    bottom:132px !important;
    max-width:none !important;
    z-index:37 !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:clamp(18px, 4.9vw, 26px) !important;
    line-height:1.04 !important;
    letter-spacing:-0.03em !important;
    font-weight:700 !important;
    margin:0 0 7px !important;
    max-width:100% !important;
    color:#f6f6f3 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.44) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:10px !important;
    line-height:1.32 !important;
    max-width:88% !important;
    margin:0 !important;
    color:rgba(255,255,255,.84) !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35) !important;
  }

  /* Discover More visible below the title and above icon row */
  .sfd-lcp-hero .sfd-slide__copy .sfd-hero-link{
    top:calc(100% + 18px) !important;
    left:0 !important;
    font-size:9px !important;
    letter-spacing:.16em !important;
    color:rgba(255,255,255,.72) !important;
    z-index:38 !important;
  }

  /* Controls: smooth image fade into the lower dark area */
  .sfd-lcp-hero .sfd-hero-controls{
    height:126px !important;
    padding:0 12px 14px !important;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.12) 18%,
      rgba(0,0,0,.48) 42%,
      rgba(0,0,0,.88) 70%,
      rgba(0,0,0,.98) 100%
    ) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:36 !important;
  }

  /* Progress line no longer crosses the heading */
  .sfd-lcp-hero .sfd-controls-topline{
    left:14px !important;
    right:60px !important;
    top:30px !important;
    width:auto !important;
    z-index:39 !important;
  }

  /* Pause button stays on the image edge, not over the title */
  .sfd-lcp-hero .sfd-hero-pause{
    top:8px !important;
    right:14px !important;
    width:42px !important;
    height:42px !important;
    z-index:40 !important;
    background:rgba(0,0,0,.18) !important;
  }

  /* Icon row placed cleanly below the title block */
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:12px !important;
    padding:0 10px !important;
    z-index:37 !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    height:60px !important;
    min-width:72px !important;
    flex:0 0 72px !important;
    padding:3px 3px 1px !important;
  }

  .sfd-lcp-hero .sfd-hero-tab__label{
    font-size:9px !important;
    line-height:1.15 !important;
    letter-spacing:.03em !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide__copy{
    left:16px !important;
    right:82px !important;
    bottom:128px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-size:clamp(17px, 4.7vw, 24px) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    max-width:86% !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    height:122px !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    top:28px !important;
  }
}


/* ==========================================================
   MOBILE v19 — raise progress line and pause button
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-controls-topline{
    top:-2px !important;
    left:14px !important;
    right:60px !important;
    z-index:41 !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:-20px !important;
    right:14px !important;
    z-index:42 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-controls-topline{
    top:-2px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:-20px !important;
  }
}


/* ==========================================================
   MOBILE v20 — WHO WE ARE logo parity with desktop
   The previous mobile rules scaled only the .logo itself while
   the cloud/contour/effects stayed at a different size. That is
   what created the large black silhouette plus a smaller logo.
   Scale the complete logo system together, exactly like desktop.
   ========================================================== */
@media (max-width:760px){
  .sfd-section-three .stage{
    --stage-size:clamp(150px,44vw,188px) !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:var(--stage-size) !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:900 / 1024 !important;
    margin:18px auto 26px !important;
    transform:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  .sfd-section-three .stage .logo{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:var(--stage-size) !important;
    height:auto !important;
    aspect-ratio:900 / 1024 !important;
    transform:none !important;
    scale:1 !important;
    transform-origin:center center !important;
  }

  .sfd-section-three .box-cloud{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:min(92vw,360px) !important;
    height:min(42svh,320px) !important;
    transform:translate(-50%,-50%) !important;
    scale:1 !important;
  }

  .sfd-section-three .edge-smoke,
  .sfd-section-three .contour-light,
  .sfd-section-three .wifi-aura-sequence,
  .sfd-section-three .soft-neon-sequence,
  .sfd-section-three .click-bloom,
  .sfd-section-three .click-wave{
    transform-origin:center center !important;
  }
}

@media (max-width:390px){
  .sfd-section-three .stage{
    --stage-size:clamp(142px,42vw,168px) !important;
  }
}

/* ==========================================================
   V21 — Reordenar bloque inferior del hero en móvil
   - Mantener intacto el tamaño del contenedor de imagen.
   - Reorganizar texto, iconos, discover more y firma.
   - Alinear los títulos de los iconos con sus iconos.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-controls{
    height:150px !important;
    padding:12px 12px 16px !important;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 24%,rgba(0,0,0,.90) 58%,rgba(0,0,0,.97) 100%) !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:18px !important;
    right:72px !important;
    top:12px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:0 !important;
    right:14px !important;
    width:40px !important;
    height:40px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    left:20px !important;
    right:20px !important;
    bottom:112px !important;
    max-width:84vw !important;
    z-index:34 !important;
  }

  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    margin:0 0 7px !important;
    max-width:92% !important;
    font-size:clamp(28px,8.2vw,38px) !important;
    line-height:.95 !important;
    letter-spacing:-.028em !important;
  }

  .sfd-lcp-hero .sfd-slide__copy p{
    margin:0 0 8px !important;
    max-width:76vw !important;
    font-size:12px !important;
    line-height:1.34 !important;
  }

  .sfd-lcp-hero .sfd-hero-link{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    min-height:26px !important;
    padding:4px 0 !important;
    font-size:10px !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    left:0 !important;
    right:0 !important;
    bottom:46px !important;
    padding:0 10px 0 !important;
    gap:4px !important;
    align-items:flex-start !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 68px !important;
    min-width:68px !important;
    max-width:68px !important;
    height:64px !important;
    padding:4px 2px 2px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }

  .sfd-lcp-hero .sfd-hero-tab__icon{
    width:24px !important;
    height:24px !important;
    margin:0 auto 5px !important;
    flex:0 0 24px !important;
  }

  .sfd-lcp-hero .sfd-hero-tab b{
    display:block !important;
    width:100% !important;
    min-height:20px !important;
    margin:0 !important;
    text-align:center !important;
    font-size:8px !important;
    line-height:1.15 !important;
    letter-spacing:.045em !important;
    white-space:normal !important;
    text-wrap:balance !important;
  }

  .page-signature{
    right:50% !important;
    transform:translateX(50%) !important;
    bottom:14px !important;
    max-width:none !important;
    text-align:center !important;
    font-size:8.7px !important;
    line-height:1.25 !important;
    padding:6px 10px !important;
  }
}

@media (max-width:420px){
  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-size:clamp(26px,7.8vw,34px) !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 66px !important;
    min-width:66px !important;
    max-width:66px !important;
  }
}

/* ==========================================================
   V22 — Ajuste fino slide por slide (MÓVIL)
   No cambia el tamaño del contenedor de imágenes.
   Distribuye mejor títulos, subtítulos, iconos, Discover More y firma.
   ========================================================== */
@media (max-width:760px){
  /* Bloque de texto: ligeramente más alto para liberar la parte baja. */
  .sfd-lcp-hero .sfd-slide__copy{
    left:20px !important;
    right:20px !important;
    bottom:126px !important;
    max-width:86vw !important;
  }

  /* Tipografía base más compacta. */
  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-family:Arial, Helvetica, sans-serif !important;
    font-weight:600 !important;
    line-height:.98 !important;
    letter-spacing:-.025em !important;
    margin:0 0 6px !important;
    max-width:94% !important;
  }

  /* Ajuste por slide según longitud del título. */
  .sfd-lcp-hero .sfd-slide[data-sfd-index="0"] .sfd-slide__copy h1{font-size:clamp(29px,7.8vw,36px) !important;}
  .sfd-lcp-hero .sfd-slide[data-sfd-index="1"] .sfd-slide__copy h2{font-size:clamp(31px,8.2vw,38px) !important;}
  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"] .sfd-slide__copy h2{font-size:clamp(22px,6vw,29px) !important;line-height:1.02 !important;}
  .sfd-lcp-hero .sfd-slide[data-sfd-index="3"] .sfd-slide__copy h2{font-size:clamp(27px,7.2vw,34px) !important;}
  .sfd-lcp-hero .sfd-slide[data-sfd-index="4"] .sfd-slide__copy h2{font-size:clamp(30px,8vw,37px) !important;}
  .sfd-lcp-hero .sfd-slide[data-sfd-index="5"] .sfd-slide__copy h2{font-size:clamp(31px,8.4vw,39px) !important;}
  .sfd-lcp-hero .sfd-slide[data-sfd-index="6"] .sfd-slide__copy h2{font-size:clamp(30px,8vw,37px) !important;}

  .sfd-lcp-hero .sfd-slide__copy p{
    font-size:10.5px !important;
    line-height:1.3 !important;
    margin:0 !important;
    max-width:76vw !important;
  }

  /* Discover More queda debajo del bloque principal, sin flotar perdido. */
  .sfd-lcp-hero .sfd-slide__copy .sfd-hero-link{
    position:absolute !important;
    left:0 !important;
    top:calc(100% + 74px) !important;
    min-height:24px !important;
    padding:0 !important;
    font-size:9px !important;
    letter-spacing:.17em !important;
    color:rgba(255,255,255,.72) !important;
  }

  /* Iconos: una fila visualmente uniforme. */
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:48px !important;
    gap:2px !important;
    padding:0 8px !important;
    align-items:flex-start !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 66px !important;
    min-width:66px !important;
    max-width:66px !important;
    height:62px !important;
    padding:3px 2px 2px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }

  .sfd-lcp-hero .sfd-hero-tab__icon{
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    margin:0 auto 4px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .sfd-lcp-hero .sfd-hero-tab b{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    min-height:20px !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
    font-size:7.7px !important;
    line-height:1.12 !important;
    letter-spacing:.035em !important;
    white-space:normal !important;
  }

  /* Firma centrada y separada de Discover More. */
  .page-signature{
    right:50% !important;
    bottom:12px !important;
    transform:translateX(50%) !important;
    padding:5px 9px !important;
    font-size:8px !important;
    line-height:1.2 !important;
    text-align:center !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide__copy{
    left:16px !important;
    right:16px !important;
    bottom:124px !important;
  }

  .sfd-lcp-hero .sfd-slide__copy .sfd-hero-link{
    top:calc(100% + 70px) !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex-basis:64px !important;
    min-width:64px !important;
    max-width:64px !important;
  }
}


/* ==========================================================
   V23 — MOBILE MODERNO: contenedor de imagen redondeado
   + cinta de logos móviles abajo
   SOLO afecta pantallas móviles.
   ========================================================== */
@media (max-width:760px){

  .sfd-lcp-hero{
    background:#050505 !important;
  }

  .sfd-lcp-hero .sfd-hero-slides,
  .sfd-lcp-hero .sfd-slide{
    overflow:visible !important;
  }

  .sfd-lcp-hero .sfd-slide > img{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    top:112px !important;
    width:calc(100% - 24px) !important;
    height:52svh !important;
    max-height:510px !important;
    min-height:320px !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:28px !important;
    overflow:hidden !important;
    clip-path:inset(0 round 28px) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.38),
      0 0 0 1px rgba(255,255,255,.035) inset !important;
  }

  .sfd-lcp-hero .sfd-slide__shade{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    top:112px !important;
    width:calc(100% - 24px) !important;
    height:52svh !important;
    max-height:510px !important;
    min-height:320px !important;
    border-radius:28px !important;
    overflow:hidden !important;
    clip-path:inset(0 round 28px) !important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.02) 52%,
        rgba(0,0,0,.24) 78%,
        rgba(0,0,0,.52) 100%
      ) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand{
    top:calc(var(--sfd-mobile-ribbon-h) + 14px) !important;
    left:14px !important;
    z-index:60 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    top:calc(var(--sfd-mobile-ribbon-h) + 19px) !important;
    right:12px !important;
    z-index:61 !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    left:20px !important;
    right:20px !important;
    bottom:124px !important;
    max-width:86vw !important;
    z-index:40 !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:20px !important;
    right:70px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    right:16px !important;
  }

  .partner-strip,
  .partner-strip.sfd-strip-persist,
  .partner-strip.sfd-strip-flowing,
  .partner-strip.partner-strip--fixed-loop,
  body > .partner-strip.sfd-strip-persist,
  body > .partner-strip.sfd-strip-flowing{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:66px !important;
    min-height:66px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    display:block !important;
    background:rgba(5,5,5,.98) !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .partner-strip .partner-card,
  .partner-strip.sfd-strip-persist .partner-card,
  .partner-strip.sfd-strip-flowing .partner-card,
  .partner-strip.partner-strip--fixed-loop .partner-card{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    transform:translateY(-50%) !important;
  }

  .partner-strip .partner-card img,
  .partner-strip.partner-strip--fixed-loop .partner-card img{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    height:22px !important;
    max-height:22px !important;
    object-fit:contain !important;
  }

  .partner-strip .partner-card span,
  .partner-strip.partner-strip--fixed-loop .partner-card span{
    position:absolute !important;
    left:50% !important;
    top:26px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:130px !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    text-align:center !important;
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
    color:rgba(255,255,255,.72) !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-slide > img,
  .sfd-lcp-hero .sfd-slide__shade{
    left:10px !important;
    right:10px !important;
    width:calc(100% - 20px) !important;
    top:106px !important;
    height:50svh !important;
    min-height:300px !important;
    border-radius:24px !important;
    clip-path:inset(0 round 24px) !important;
  }

  .sfd-lcp-hero .sfd-slide__copy{
    left:16px !important;
    right:16px !important;
  }
}


/* ==========================================================
   V24 — CINTA MOVIBLE ABAJO EN PRIMERA PANTALLA MOBILE
   SOLO MOBILE. NO TOCA PC.
   - En la primera pantalla (sin scroll), la cinta de logos
     queda fija abajo del viewport.
   - Al comenzar a bajar, vuelve a su comportamiento normal.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) body > .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) body > .partner-strip.sfd-strip-flowing{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:max(env(safe-area-inset-bottom, 0px), 0px) !important;
    width:100% !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    display:block !important;
    background:rgba(5,5,5,.98) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    border-bottom:0 !important;
    box-shadow:0 -12px 28px rgba(0,0,0,.28) !important;
    z-index:20030 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist .partner-card,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing .partner-card{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    transform:translateY(-50%) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card img,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card img{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    height:22px !important;
    max-height:22px !important;
    object-fit:contain !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card span,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card span{
    position:absolute !important;
    left:50% !important;
    top:26px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:130px !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    text-align:center !important;
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
    color:rgba(255,255,255,.72) !important;
  }

  /* Deja respirar el primer viewport para que la cinta no tape
     contenido interactivo del hero. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero{
    padding-bottom:68px !important;
  }

  /* En mobile, la franja inferior del primer hero queda reservada
     visualmente para la cinta. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__copy{
    bottom:140px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-controls{
    bottom:74px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero{
    padding-bottom:64px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__copy{
    bottom:132px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-controls{
    bottom:70px !important;
  }
}


/* ==========================================================
   V25 — CINTA MOVIBLE DENTRO DE LA PRIMERA PANTALLA MOBILE
   SOLO MOBILE. NO TOCA PC.
   La cinta queda dentro del primer viewport, en la franja negra
   inferior de la primera pantalla, no debajo de ella.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:62px !important;
    width:100% !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    display:block !important;
    background:transparent !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    box-shadow:none !important;
    z-index:20030 !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist .partner-card,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing .partner-card,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card{
    position:absolute !important;
    top:50% !important;
    bottom:auto !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    transform:translateY(-50%) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card img,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card img{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    height:18px !important;
    max-height:18px !important;
    object-fit:contain !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card span,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card span{
    position:absolute !important;
    left:50% !important;
    top:21px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:108px !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    text-align:center !important;
    font-size:6px !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    color:rgba(255,255,255,.72) !important;
  }

  /* Evita que el contenido del hero choque con la cinta fija. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-controls{
    bottom:120px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__copy{
    bottom:176px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop{
    bottom:58px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card img,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card img{
    height:17px !important;
    max-height:17px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .partner-strip .partner-card span,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop .partner-card span{
    top:20px !important;
    font-size:5.8px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-controls{
    bottom:112px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__copy{
    bottom:168px !important;
  }
}


/* ==========================================================
   V26 — AJUSTE FINO MOBILE
   SOLO MOBILE. NO TOCA PC.
   - Cinta de iconos baja unos px
   - Barra/progreso centrada horizontalmente
   - Botón play/pause arriba a la derecha de la imagen
   - Cinta de logos como pie de página abajo del todo
   - Se sube el contenido inferior para que no sea tapado
   ========================================================== */
@media (max-width:760px){

  /* Cinta de logos al fondo, como pie de página mobile */
  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop{
    bottom:0 !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    background:rgba(0,0,0,.98) !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    border-bottom:0 !important;
    box-shadow:0 -10px 22px rgba(0,0,0,.22) !important;
  }

  /* Subir el contenido que estaba abajo para que no choque con el footer */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__copy{
    bottom:188px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-controls{
    bottom:86px !important;
  }

  .page-signature{
    bottom:72px !important;
  }

  /* Cinta de iconos baja un poco dentro de su bloque */
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:40px !important;
  }

  /* Barra/progreso centrada horizontalmente */
  .sfd-lcp-hero .sfd-controls-topline{
    left:18px !important;
    right:18px !important;
    top:10px !important;
  }

  /* Botón play/pause arriba a la derecha de la imagen */
  .sfd-lcp-hero .sfd-hero-pause{
    position:absolute !important;
    top:124px !important;
    right:22px !important;
    bottom:auto !important;
    left:auto !important;
    z-index:65 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__copy{
    bottom:180px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-controls{
    bottom:82px !important;
  }

  .page-signature{
    bottom:68px !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:38px !important;
  }

  .sfd-lcp-hero .sfd-controls-topline{
    left:16px !important;
    right:16px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:118px !important;
    right:18px !important;
  }
}


/* ==========================================================
   V27 — AJUSTE FINO PLAY + ICONOS (MOBILE)
   SOLO MOBILE. NO TOCA PC.
   - Botón play en la posición marcada por el usuario
   - Cinta de iconos más abajo, separada de la imagen
   ========================================================== */
@media (max-width:760px){

  /* Baja más la cinta de iconos para despegarla de la imagen */
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:32px !important;
  }

  /* Mueve el botón play a la zona baja derecha, como en la referencia */
  .sfd-lcp-hero .sfd-hero-pause{
    top:auto !important;
    bottom:108px !important;
    right:22px !important;
    left:auto !important;
    z-index:65 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:30px !important;
  }

  .sfd-lcp-hero .sfd-hero-pause{
    top:auto !important;
    bottom:104px !important;
    right:18px !important;
  }
}


/* ==========================================================
   V28 — TEXTOS INFERIORES + FIRMA EN UNA SOLA LÍNEA
   SOLO MOBILE. NO TOCA PC.
   - Baja Discover More y la firma hasta la línea superior
     de la cinta de logos.
   - La firma queda en una sola línea para ocupar menos alto.
   ========================================================== */
@media (max-width:760px){

  /* DISCOVER MORE: justo encima de la cinta de logos */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    position:fixed !important;
    left:22px !important;
    right:auto !important;
    top:auto !important;
    bottom:64px !important;
    width:auto !important;
    min-height:18px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20042 !important;
    white-space:nowrap !important;
  }

  /* FIRMA: misma línea visual, a la derecha */
  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    position:fixed !important;
    left:auto !important;
    right:20px !important;
    top:auto !important;
    bottom:61px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:2px 0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:right !important;
    white-space:nowrap !important;
    font-size:7.2px !important;
    line-height:1 !important;
    letter-spacing:-.01em !important;
    z-index:20042 !important;
  }

  /* Evita salto de línea interno en cualquier span del crédito */
  body:not(.sfd-mobile-nav-scrolled) .page-signature,
  body:not(.sfd-mobile-nav-scrolled) .page-signature *{
    white-space:nowrap !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    left:18px !important;
    bottom:60px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    right:16px !important;
    bottom:58px !important;
    font-size:6.5px !important;
  }
}


/* ==========================================================
   V29 — ALINEAR DISCOVER MORE CON FIRMA
   SOLO MOBILE. NO TOCA PC.
   Ambos textos quedan en la misma línea horizontal.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:61px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    bottom:61px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:58px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    bottom:58px !important;
  }
}


/* ==========================================================
   V30 — AJUSTE FINO 2PX: DISCOVER MORE
   SOLO MOBILE. NO TOCA PC.
   Baja Discover More 2px para alinear visualmente con la firma.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:59px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:56px !important;
  }
}


/* ==========================================================
   V31 — FIX DISCOVER MORE DUPLICADO / SALTO ENTRE SLIDES
   SOLO MOBILE. NO TOCA PC.
   - Oculta Discover More de slides inactivos.
   - Solo el slide activo puede mostrar su CTA inferior.
   - Evita el "salto" durante la transición de imágenes.
   ========================================================== */
@media (max-width:760px){

  /* Por defecto, todos los CTA de slides quedan ocultos. */
  .sfd-lcp-hero .sfd-slide .sfd-hero-link{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Solo el slide realmente activo muestra Discover More. */
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Evita que durante la transición el siguiente/anterior aparezca
     momentáneamente en otra posición. */
  .sfd-lcp-hero .sfd-slide:not(.is-active) .sfd-hero-link{
    position:absolute !important;
    left:-9999px !important;
    top:auto !important;
    bottom:auto !important;
  }

  /* Mantiene el CTA activo fijo en la posición final aprobada. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    position:fixed !important;
    left:22px !important;
    right:auto !important;
    top:auto !important;
    bottom:59px !important;
    transform:none !important;
    margin:0 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    left:18px !important;
    bottom:56px !important;
  }
}


/* ==========================================================
   V34 — CINTA MOBILE CON ESPACIADO VISUAL EQUITATIVO
   SOLO MOBILE. NO TOCA PC.
   - Cada logo ocupa un "slot" fijo igual.
   - Se ven 5 logos a la vez.
   - Logo y título se centran dentro de cada slot.
   - La separación visual entre un logo y el siguiente queda
     uniforme porque todos parten de celdas idénticas.
   ========================================================== */
@media (max-width:560px){

  /* Mantiene la cinta como footer mobile, pero ordena cada item
     en slots iguales para que la separación visual sea uniforme. */
  .partner-strip.partner-strip--fixed-loop{
    --partner-strip-height:60px !important;
    height:var(--partner-strip-height) !important;
    min-height:var(--partner-strip-height) !important;
    max-height:var(--partner-strip-height) !important;
    overflow:hidden !important;
  }

  .partner-strip--fixed-loop .partner-card{
    position:absolute !important;
    top:50% !important;
    width:20vw !important;
    min-width:20vw !important;
    max-width:20vw !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 2px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    transform:translateY(-50%) !important;
  }

  .partner-strip--fixed-loop .partner-card img{
    position:absolute !important;
    left:50% !important;
    top:0 !important;
    width:auto !important;
    height:15px !important;
    max-height:15px !important;
    max-width:calc(20vw - 8px) !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:translateX(-50%) !important;
  }

  .partner-strip--fixed-loop .partner-card span{
    position:absolute !important;
    left:50% !important;
    top:17px !important;
    bottom:auto !important;
    width:calc(20vw - 6px) !important;
    min-width:0 !important;
    max-width:calc(20vw - 6px) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:5.9px !important;
    line-height:1.05 !important;
    letter-spacing:0 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    transform:translateX(-50%) !important;
  }

  /* Neutraliza desplazamientos individuales anteriores para que
     todos queden visualmente equilibrados dentro de su slot. */
  .partner-strip--fixed-loop .partner-card--autocad img,
  .partner-strip--fixed-loop .partner-card--lode img,
  .partner-strip--fixed-loop .partner-card--charter img,
  .partner-strip--fixed-loop .partner-card--cox img,
  .partner-strip--fixed-loop .partner-card--bentley img,
  .partner-strip--fixed-loop .partner-card--sfd img,
  .partner-strip--fixed-loop .partner-card--iris img{
    left:50% !important;
    margin-left:0 !important;
  }

  .partner-strip--fixed-loop .partner-card--autocad span,
  .partner-strip--fixed-loop .partner-card--lode span,
  .partner-strip--fixed-loop .partner-card--charter span,
  .partner-strip--fixed-loop .partner-card--cox span,
  .partner-strip--fixed-loop .partner-card--bentley span,
  .partner-strip--fixed-loop .partner-card--sfd span,
  .partner-strip--fixed-loop .partner-card--iris span{
    left:50% !important;
    top:17px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    margin-left:0 !important;
  }
}


/* ==========================================================
   V44 — CINTA PRINCIPAL MOBILE MÁS CLARA / MENOS NEGRA
   SOLO MOBILE. NO TOCA PC.
   Aclara la franja detrás del logo + botón + menú en la primera
   pantalla, manteniendo la transparencia y dependencia del fondo.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero::before{
    top:var(--sfd-mobile-ribbon-h) !important;
    height:82px !important;
    background:
      linear-gradient(
        90deg,
        rgba(18, 28, 36, .58) 0%,
        rgba(28, 42, 54, .46) 36%,
        rgba(24, 35, 46, .34) 68%,
        rgba(15, 22, 30, .22) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.05) 0%,
        rgba(255,255,255,.015) 46%,
        rgba(255,255,255,0) 100%
      ) !important;
    backdrop-filter:blur(7px) saturate(112%) brightness(1.04) !important;
    -webkit-backdrop-filter:blur(7px) saturate(112%) brightness(1.04) !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    box-shadow:none !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero::before{
    height:78px !important;
  }
}


/* ==========================================================
   V47 — CINTA PRINCIPAL MOBILE COMO EN LOS EJEMPLOS APROBADOS
   SOLO MOBILE. NO TOCA PC.
   - La franja logo/botón/menú usa el reflejo desenfocado.
   - Se elimina el "hueco negro" bajo la cinta.
   - La imagen vuelve a iniciar desde arriba; la cinta se ve como
     una capa independiente encima, no como un bloque separado.
   ========================================================== */
@media (max-width:760px){

  :root{
    --sfd-mobile-hero-reflection-h:74px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero{
    background:transparent !important;
  }

  /* La cinta de reflejo vive en la misma zona visual del header mobile */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-mobile-hero-reflection{
    top:var(--sfd-mobile-ribbon-h) !important;
    height:var(--sfd-mobile-hero-reflection-h) !important;
    z-index:20027 !important;
  }

  /* El carrusel vuelve a empezar arriba para que no exista hueco negro */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide{
    top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img{
    top:0 !important;
    margin-top:0 !important;
  }

  /* Mantiene logo y controles sobre la franja-reflejo */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand{
    top:calc(var(--sfd-mobile-ribbon-h) + 12px) !important;
    z-index:20031 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    top:calc(var(--sfd-mobile-ribbon-h) + 14px) !important;
    z-index:20031 !important;
  }

  /* Asegura que el reflejo no quede gris sólido en la 1ra/2da */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-mobile-hero-reflection img{
    width:100% !important;
    height:100svh !important;
    object-fit:cover !important;
    filter:blur(16px) saturate(118%) brightness(.72) !important;
    transform:scale(1.16) translateY(-2px) !important;
    opacity:1 !important;
  }
}

@media (max-width:390px){
  :root{
    --sfd-mobile-hero-reflection-h:70px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    top:calc(var(--sfd-mobile-ribbon-h) + 13px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-mobile-hero-reflection img{
    filter:blur(15px) saturate(116%) brightness(.74) !important;
  }
}


/* ==========================================================
   V48 — CINTA MOBILE: SLIDE 1 Y 2 COMO REFERENCIA APROBADA
   SOLO MOBILE. NO TOCA PC.
   - Mantiene la imagen independiente de la cinta.
   - Evita el hueco negro bajo la cinta.
   - Las slides 1 y 2 toman un reflejo más rico en color.
   Las demás slides quedan como estaban.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide{
    top:0 !important;
    height:100svh !important;
    min-height:100svh !important;
    margin-top:0 !important;
    padding-top:0 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img{
    top:0 !important;
    margin-top:0 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-mobile-hero-reflection{
    top:var(--sfd-mobile-ribbon-h) !important;
    height:74px !important;
    overflow:hidden !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-mobile-hero-reflection img{
    width:100% !important;
    height:100svh !important;
    object-fit:cover !important;
    filter:blur(16px) saturate(118%) brightness(.72) !important;
    transform:scale(1.16) translateY(-2px) !important;
    opacity:1 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-mobile-hero-reflection{
    height:70px !important;
  }
}


/* ==========================================================
   V50 — BAJAR IMAGEN MOBILE HASTA BORDE INFERIOR DE LA CINTA
   SOLO MOBILE. NO TOCA PC.
   Se restaura únicamente la posición vertical aprobada del
   contenedor de imagen (112px), sin modificar tamaño, blur,
   object-fit, contenido ni reflejo de la cinta.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:112px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:106px !important;
  }
}


/* ==========================================================
   V51 — BAJAR UN POCO MÁS LA IMAGEN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Único cambio: aumenta unos píxeles la posición vertical
   de la imagen y su shade para que la cinta no la pise.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:120px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:114px !important;
  }
}


/* ==========================================================
   V52 — BAJAR 10PX MÁS LA IMAGEN MOBILE
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:130px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:124px !important;
  }
}


/* ==========================================================
   V53 — BAJAR 20PX SOLO LA IMAGEN-REFLEJO DEL ENCABEZADO MOBILE
   SOLO MOBILE. NO TOCA PC.
   IMPORTANTE:
   - NO mueve la imagen principal.
   - SOLO desplaza verticalmente la copia desenfocada usada
     como fondo de la cinta de encabezado.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection img{
    transform:scale(1.16) translateY(18px) !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection img{
    transform:scale(1.16) translateY(18px) !important;
  }
}


/* ==========================================================
   V54 — EXTENDER HACIA ABAJO EL REFLEJO DEL ENCABEZADO MOBILE
   SOLO MOBILE. NO TOCA PC.
   - NO mueve la imagen principal.
   - NO cambia logo, botón ni menú.
   - Solo aumenta la altura del fondo/reflejo para que cubra
     toda la cinta hasta su borde inferior.
   ========================================================== */
@media (max-width:760px){
  :root{
    --sfd-mobile-hero-reflection-h:96px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection{
    height:96px !important;
  }
}

@media (max-width:390px){
  :root{
    --sfd-mobile-hero-reflection-h:92px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection{
    height:92px !important;
  }
}


/* ==========================================================
   V55 — EXTENDER 10PX MÁS HACIA ABAJO EL REFLEJO DEL HEADER
   SOLO MOBILE. NO TOCA PC.
   - NO mueve imagen principal.
   - NO mueve logo/botón/menú.
   - Solo extiende 10px más el fondo/reflejo de la cinta.
   ========================================================== */
@media (max-width:760px){
  :root{
    --sfd-mobile-hero-reflection-h:106px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection{
    height:106px !important;
  }
}

@media (max-width:390px){
  :root{
    --sfd-mobile-hero-reflection-h:102px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection{
    height:102px !important;
  }
}


/* ==========================================================
   V62 — SUBIR BOTÓN PAUSE A LA PARTE SUPERIOR DE LA IMAGEN
   SOLO MOBILE. NO TOCA PC.
   Único cambio: posición vertical del botón pause/play.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-pause{
    top:150px !important;
    bottom:auto !important;
    right:22px !important;
    left:auto !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-pause{
    top:144px !important;
    bottom:auto !important;
    right:18px !important;
  }
}


/* ==========================================================
   V63 — PAUSE REALMENTE ARRIBA DE LA IMAGEN
   SOLO MOBILE. NO TOCA PC.
   El botón deja de posicionarse respecto al bloque de controles
   inferior y se ancla al viewport, sobre la esquina superior
   derecha de la imagen.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-pause{
    position:fixed !important;
    top:148px !important;
    right:22px !important;
    bottom:auto !important;
    left:auto !important;
    z-index:20045 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-pause{
    position:fixed !important;
    top:142px !important;
    right:18px !important;
    bottom:auto !important;
    left:auto !important;
  }
}


/* ==========================================================
   V64 — PAUSE DESACOPLADO Y ARRIBA EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Se saca el botón del contenedor inferior de controles para
   que su posición ya no dependa de ese bloque.
   ========================================================== */
@media (max-width:760px){
  #sfdHeroPause.sfd-mobile-pause-detached{
    position:fixed !important;
    top:174px !important;
    right:20px !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 !important;
    transform:none !important;
    z-index:30050 !important;
  }

  body.sfd-mobile-nav-scrolled #sfdHeroPause.sfd-mobile-pause-detached{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

@media (max-width:390px){
  #sfdHeroPause.sfd-mobile-pause-detached{
    top:168px !important;
    right:16px !important;
  }
}


/* ==========================================================
   V65 — BAJAR LA CINTA DE ICONOS INFERIOR EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Único cambio: baja el bloque de iconos/textos inferiores
   unos píxeles para alinearlo mejor con el área marcada.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:-2px !important;
    padding:0 12px 0 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:-2px !important;
    padding:0 10px 0 !important;
  }
}


/* ==========================================================
   V66 — SUBIR TODOS LOS ICONOS INFERIORES HASTA LA LÍNEA
   SOLO MOBILE. NO TOCA PC.
   Único cambio: eleva toda la fila de iconos/textos inferiores
   para que quede más cerca del borde superior del bloque negro.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:22px !important;
    padding:0 12px 0 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:20px !important;
    padding:0 10px 0 !important;
  }
}


/* ==========================================================
   V67 — ALINEAR SOLO EL PRIMER ICONO/TÍTULO CON LOS DEMÁS
   SOLO MOBILE. NO TOCA PC.
   Ajuste fino: sube ligeramente el primer item de la fila
   inferior para que quede alineado con los demás iconos.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"]{
    transform:translateY(-4px) !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"]{
    transform:translateY(-3px) !important;
  }
}


/* ==========================================================
   V68 — BAJAR PRIMER Y SEGUNDO ITEM PARA ALINEAR LA FILA
   SOLO MOBILE. NO TOCA PC.
   Ajuste fino: Who We Are? y Network bajan ligeramente
   para alinear su base con HFC / Design / FTTx / Software.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"],
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="1"]{
    transform:translateY(3px) !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"],
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="1"]{
    transform:translateY(3px) !important;
  }
}


/* ==========================================================
   V69 — SUBIR 2PX PRIMER Y SEGUNDO ITEM
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"],
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="1"]{
    transform:translateY(1px) !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"],
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="1"]{
    transform:translateY(1px) !important;
  }
}


/* ==========================================================
   V70 — CENTRAR HORIZONTALMENTE LA LÍNEA DE DESPLAZAMIENTO
   SOLO MOBILE. NO TOCA PC.
   Único cambio: igualar el margen izquierdo y derecho de la
   línea/progreso para que se vea centrada horizontalmente.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-controls-topline{
    left:22px !important;
    right:22px !important;
    width:auto !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-controls-topline{
    left:18px !important;
    right:18px !important;
    width:auto !important;
  }
}


/* ==========================================================
   V71 — CENTRADO VISUAL EXACTO DE LA LÍNEA DE DESPLAZAMIENTO
   SOLO MOBILE. NO TOCA PC.
   La línea ya no depende de left/right independientes:
   se centra desde el 50% y usa un ancho simétrico.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-controls-topline{
    left:50% !important;
    right:auto !important;
    width:calc(100% - 44px) !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-controls-topline{
    left:50% !important;
    right:auto !important;
    width:calc(100% - 36px) !important;
    transform:translateX(-50%) !important;
  }
}


/* ==========================================================
   V72 — ELIMINAR CORTE BRUSCO BAJO LA FILA DE ICONOS
   SOLO MOBILE. NO TOCA PC.
   Único cambio visual: el fondo del bloque de controles termina
   exactamente en el mismo negro del resto del hero, sin línea.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-controls{
    border-bottom:0 !important;
    box-shadow:none !important;
    background:linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.20) 18%,
      rgba(0,0,0,.58) 42%,
      rgba(0,0,0,.88) 68%,
      #050505 100%
    ) !important;
  }

  .sfd-lcp-hero .sfd-hero-controls::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:-18px !important;
    height:20px !important;
    background:#050505 !important;
    pointer-events:none !important;
    z-index:-1 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-controls::after{
    bottom:-16px !important;
    height:18px !important;
  }
}


/* ==========================================================
   V73 — REALINEAR DISCOVER MORE CON LA FIRMA
   SOLO MOBILE. NO TOCA PC.
   Ajuste fino: Discover More vuelve exactamente a la misma
   línea base visual que la firma.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:61px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:58px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
  }
}


/* ==========================================================
   V74 — BAJAR DISCOVER MORE 2PX
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:59px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:56px !important;
  }
}


/* ==========================================================
   V75 — BAJAR DISCOVER MORE 2PX ADICIONALES
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:57px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link{
    bottom:54px !important;
  }
}


/* ==========================================================
   V76 — REUBICAR TÍTULO Y SUBTÍTULO DEL HERO MOBILE
   SOLO MOBILE. NO TOCA PC.
   - Título grande: arriba de la imagen, a la altura del pause.
   - Subtítulo: en el espacio negro entre iconos y Discover More.
   - Discover More y firma quedan donde estaban.
   ========================================================== */
@media (max-width:760px){

  /* El contenedor deja de imponer la antigua posición inferior
     sobre h/p; cada elemento se ubica de forma independiente. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  /* TÍTULO GRANDE: misma altura visual que el botón pause/play. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    position:fixed !important;
    left:22px !important;
    right:82px !important;
    top:174px !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20044 !important;
    text-align:left !important;
    pointer-events:none !important;
  }

  /* SUBTÍTULO: zona negra libre entre iconos y Discover More. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    top:auto !important;
    bottom:116px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20041 !important;
    text-align:left !important;
    pointer-events:auto !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    left:18px !important;
    right:74px !important;
    top:168px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:108px !important;
  }
}


/* ==========================================================
   V77 — TÍTULO CENTRADO 20% MÁS PEQUEÑO + SUBTÍTULO VISIBLE
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  /* Título siempre centrado y 20% más pequeño */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    left:18px !important;
    right:18px !important;
    width:calc(100% - 36px) !important;
    max-width:none !important;
    text-align:center !important;
    font-size:clamp(14.5px, 3.95vw, 20.8px) !important;
    line-height:1.02 !important;
    letter-spacing:-0.025em !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Subtítulo visible en la zona negra entre iconos y Discover More */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    color:rgba(255,255,255,.72) !important;
    text-shadow:none !important;
    left:22px !important;
    right:22px !important;
    bottom:104px !important;
    width:auto !important;
    max-width:none !important;
    font-size:9px !important;
    line-height:1.28 !important;
    text-align:left !important;
    z-index:20043 !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    left:14px !important;
    right:14px !important;
    width:calc(100% - 28px) !important;
    font-size:clamp(14px, 3.8vw, 19.2px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:98px !important;
    font-size:8.5px !important;
  }
}


/* ==========================================================
   V78 — EVITAR SALTO INICIAL DEL TÍTULO/SUBTÍTULO EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Problema corregido:
   antes de estabilizarse, el título aparecía abajo y pequeño.
   Solución:
   - aplicar la posición/escala final desde el estado base,
     no solo cuando la slide recibe .is-active
   - quitar transición/animación del bloque de copy
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h2,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy p{
    transition:none !important;
    animation:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  /* Aplicar el layout final del título desde el inicio */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h2{
    position:fixed !important;
    left:18px !important;
    right:18px !important;
    top:174px !important;
    bottom:auto !important;
    width:calc(100% - 36px) !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20044 !important;
    text-align:center !important;
    font-size:clamp(14.5px, 3.95vw, 20.8px) !important;
    line-height:1.02 !important;
    letter-spacing:-0.025em !important;
    pointer-events:none !important;
  }

  /* Subtítulo también queda definido desde el inicio */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy p{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    top:auto !important;
    bottom:104px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20043 !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    color:rgba(255,255,255,.72) !important;
    text-shadow:none !important;
    font-size:9px !important;
    line-height:1.28 !important;
    text-align:left !important;
    pointer-events:auto !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h2{
    left:14px !important;
    right:14px !important;
    top:168px !important;
    width:calc(100% - 28px) !important;
    font-size:clamp(14px, 3.8vw, 19.2px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:98px !important;
    font-size:8.5px !important;
  }
}


/* ==========================================================
   V79 — ELIMINAR APARICIÓN DOBLE DEL TÍTULO EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Problema:
   el título aparecía primero grande arriba y luego aparecía
   otra versión "correcta".
   Solución:
   - ocultar por defecto todos los títulos/subtítulos del hero
   - mostrar únicamente los de la slide activa
   - sin transiciones/animaciones
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h2,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy p{
    opacity:0 !important;
    visibility:hidden !important;
    transition:none !important;
    animation:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    opacity:1 !important;
    visibility:visible !important;
    position:fixed !important;
    left:18px !important;
    right:18px !important;
    top:174px !important;
    bottom:auto !important;
    width:calc(100% - 36px) !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20044 !important;
    text-align:center !important;
    font-size:clamp(14.5px, 3.95vw, 20.8px) !important;
    line-height:1.02 !important;
    letter-spacing:-0.025em !important;
    pointer-events:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    top:auto !important;
    bottom:104px !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:20043 !important;
    color:rgba(255,255,255,.72) !important;
    text-shadow:none !important;
    font-size:9px !important;
    line-height:1.28 !important;
    text-align:left !important;
    pointer-events:auto !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    left:14px !important;
    right:14px !important;
    top:168px !important;
    width:calc(100% - 28px) !important;
    font-size:clamp(14px, 3.8vw, 19.2px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:98px !important;
    font-size:8.5px !important;
  }
}


/* ==========================================================
   V80 — TÍTULO +15% Y SUBTÍTULO MÁS VISIBLE
   SOLO MOBILE. NO TOCA PC.
   - título 15% más grande
   - subtítulo más visible: mayor tamaño, mayor contraste y mejor
     ubicado en el área negra entre iconos y Discover More
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    font-size:clamp(16.7px, 4.55vw, 23.9px) !important;
    line-height:1.03 !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:22px !important;
    right:22px !important;
    bottom:126px !important;
    font-size:10.5px !important;
    line-height:1.32 !important;
    color:rgba(255,255,255,.88) !important;
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
    text-shadow:0 1px 4px rgba(0,0,0,.28) !important;
    z-index:20046 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    font-size:clamp(16.1px, 4.37vw, 22.1px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:120px !important;
    font-size:10px !important;
  }
}


/* ==========================================================
   V81 — TÍTULO +5%, CENTRO ENTRE LÍNEAS A ALTURA DEL PAUSE
   SOLO MOBILE. NO TOCA PC.
   - El centro vertical del bloque del título coincide con el
     centro del botón pause.
   - Si son 2 líneas, el espacio entre ambas queda justo a esa altura.
   - Tamaño +5%.
   - Sombra gris desenfocada para mayor realce.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:195px !important;
    transform:translateY(-50%) !important;

    font-size:clamp(17.55px, 4.78vw, 25.10px) !important;
    line-height:1.04 !important;

    text-shadow:
      0 3px 8px rgba(92,92,92,.72),
      0 1px 2px rgba(0,0,0,.90) !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:189px !important;
    transform:translateY(-50%) !important;

    font-size:clamp(16.90px, 4.59vw, 23.20px) !important;
    line-height:1.04 !important;

    text-shadow:
      0 3px 8px rgba(92,92,92,.72),
      0 1px 2px rgba(0,0,0,.90) !important;
  }
}


/* ==========================================================
   V82 — SUBIR TÍTULO 5PX + TAMAÑO 5% + SOMBRA 30% MÁS
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:190px !important;
    transform:translateY(-50%) !important;

    font-size:clamp(18.43px, 5.02vw, 26.36px) !important;
    line-height:1.04 !important;

    text-shadow:
      0 4px 10px rgba(92,92,92,.86),
      0 1px 3px rgba(0,0,0,.96) !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:184px !important;
    transform:translateY(-50%) !important;

    font-size:clamp(17.75px, 4.82vw, 24.36px) !important;
    line-height:1.04 !important;

    text-shadow:
      0 4px 10px rgba(92,92,92,.86),
      0 1px 3px rgba(0,0,0,.96) !important;
  }
}


/* ==========================================================
   V83 — TÍTULO 5PX MÁS ARRIBA + 5% MÁS GRANDE
         + SUBTÍTULO POR ENCIMA DEL ÁREA NEGRA
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  /* Título: 5px más arriba y +5% de tamaño */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:185px !important;
    transform:translateY(-50%) !important;

    font-size:clamp(19.35px, 5.27vw, 27.68px) !important;
    line-height:1.04 !important;
  }

  /* Subtítulo: mantenerlo visible por encima del fondo negro */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    bottom:122px !important;

    display:block !important;
    opacity:1 !important;
    visibility:visible !important;

    color:rgba(255,255,255,.90) !important;
    font-size:10.5px !important;
    line-height:1.32 !important;

    z-index:30060 !important;
    isolation:isolate !important;
    mix-blend-mode:normal !important;
    text-shadow:0 1px 4px rgba(0,0,0,.45) !important;
    pointer-events:none !important;
  }

  /* Evita que el bloque negro/controls tape el subtítulo */
  .sfd-lcp-hero .sfd-hero-controls{
    z-index:36 !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:179px !important;
    transform:translateY(-50%) !important;

    font-size:clamp(18.64px, 5.06vw, 25.58px) !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:116px !important;
    font-size:10px !important;
    z-index:30060 !important;
  }
}


/* ==========================================================
   V84 — SUBTÍTULO REALMENTE AL FRENTE
   SOLO MOBILE. NO TOCA PC.
   El subtítulo sí existía, pero quedaba dentro de un stacking
   context por debajo del bloque negro. Se eleva el contenedor
   de copy activo completo sin mover sus elementos.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100svh !important;
    max-width:none !important;
    z-index:30055 !important;
    pointer-events:none !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    bottom:122px !important;
    z-index:30060 !important;

    display:block !important;
    opacity:1 !important;
    visibility:visible !important;

    color:#f2f2f2 !important;
    -webkit-text-fill-color:#f2f2f2 !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    text-shadow:0 1px 4px rgba(0,0,0,.55) !important;
  }

  /* Mantiene Discover More clickeable aunque su contenedor esté desacoplado */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy .sfd-hero-link{
    pointer-events:auto !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:116px !important;
  }
}


/* ==========================================================
   V85 — HACER VISIBLE EL SUBTÍTULO EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Refuerzo explícito:
   - el slide activo permite overflow visible
   - el subtítulo se coloca claramente en la zona negra
   - color, z-index y contraste reforzados
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active{
    overflow:visible !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    bottom:148px !important;
    width:auto !important;
    max-width:none !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:visible !important;
    clip-path:none !important;
    white-space:normal !important;

    color:#f5f5f5 !important;
    -webkit-text-fill-color:#f5f5f5 !important;
    font-size:11px !important;
    line-height:1.34 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    text-align:left !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.72),
      0 2px 8px rgba(0,0,0,.58) !important;

    z-index:50020 !important;
    pointer-events:none !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:140px !important;
    font-size:10.5px !important;
  }
}


/* ==========================================================
   V86 — SUBTÍTULO DEFINITIVAMENTE AL FRENTE
   SOLO MOBILE. NO TOCA PC.
   - eleva el subtítulo por encima de todos los overlays
   - evita opacidad heredada
   - mejora contraste para que no parezca "detrás"
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    bottom:148px !important;

    z-index:999999 !important;
    opacity:1 !important;
    visibility:visible !important;
    isolation:isolate !important;
    mix-blend-mode:normal !important;
    filter:none !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    font-size:11px !important;
    font-weight:500 !important;
    line-height:1.34 !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.85),
      0 2px 10px rgba(0,0,0,.72) !important;
  }

  /* Garantiza que overlays del hero no tapen el subtítulo */
  .sfd-lcp-hero .sfd-slide__shade{
    z-index:1 !important;
  }

  .sfd-lcp-hero .sfd-hero-controls{
    z-index:20 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy p{
    left:18px !important;
    right:18px !important;
    bottom:140px !important;
    font-size:10.5px !important;
    z-index:999999 !important;
  }
}


/* ==========================================================
   V87 — SUBTÍTULO MOBILE RECONSTRUIDO COMO OVERLAY FIJO
   SOLO MOBILE. NO TOCA PC.
   Solución real:
   - ocultar el <p> original del slide en mobile
   - dibujar un overlay nuevo con ::after solo para la slide activa
   - así el subtítulo queda por delante de todo el bloque negro
   ========================================================== */
@media (max-width:760px){

  /* Oculta el subtítulo original solo en mobile */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide .sfd-slide__copy p{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  /* Base del nuevo subtítulo */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::after{
    content:"";
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    bottom:146px !important;
    z-index:999999 !important;
    display:block !important;
    white-space:pre-line !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    font-size:11px !important;
    line-height:1.34 !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    pointer-events:none !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,.92),
      0 2px 10px rgba(0,0,0,.78) !important;
    mix-blend-mode:normal !important;
    filter:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  /* Texto por slide */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::after{
    content:"Network engineering built for accuracy" !important;
  }
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="1"]::after{
    content:"Coax & Fiber\AField As-Built" !important;
  }
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="2"]::after{
    content:"From field data to documented design" !important;
  }
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="3"]::after{
    content:"Node Splits and Segmentation\ANode Updates and Relocations\ADesigning from zero." !important;
  }
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="4"]::after{
    content:"Fiber networks designed to perform\AFiber drafting and splicing documentation" !important;
  }
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="5"]::after{
    content:"Web Development\ACustom Software & Automation" !important;
  }
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="6"]::after{
    content:"nelsonsqc@sansfrontieres-design.com\A+51 954 199 754" !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::after{
    left:18px !important;
    right:18px !important;
    bottom:138px !important;
    font-size:10.5px !important;
  }
}


/* ==========================================================
   V88 — SUBTÍTULO MOBILE DESACOPLADO DEL SLIDE
   SOLO MOBILE. NO TOCA PC.
   Solución definitiva:
   el subtítulo se copia a un overlay directo de <body>,
   fuera del stacking-context del carrusel y del bloque negro.
   ========================================================== */
.sfd-mobile-subtitle-overlay{
  display:none;
}

@media (max-width:760px){

  /* El subtítulo original se oculta para evitar duplicados. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide .sfd-slide__copy > p{
    display:none !important;
  }

  #sfdMobileSubtitleOverlay{
    position:fixed !important;
    left:22px !important;
    right:22px !important;
    bottom:146px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;

    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:11px !important;
    line-height:1.34 !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    text-align:left !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.92),
      0 2px 10px rgba(0,0,0,.78) !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    filter:none !important;
    mix-blend-mode:normal !important;

    z-index:2147483000 !important;
    pointer-events:none !important;
    white-space:normal !important;
  }

  #sfdMobileSubtitleOverlay.is-visible{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #sfdMobileSubtitleOverlay a{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-decoration:none !important;
    pointer-events:auto !important;
  }
}

@media (max-width:390px){
  #sfdMobileSubtitleOverlay{
    left:18px !important;
    right:18px !important;
    bottom:138px !important;
    font-size:10.5px !important;
  }
}


/* ==========================================================
   V89 — CENTRAR VERTICALMENTE TODO EL SUBTÍTULO
   ENTRE ICONOS Y DISCOVER MORE
   SOLO MOBILE. NO TOCA PC.
   El overlay ocupa exactamente la franja negra disponible y
   centra el bloque completo, tenga 1, 2 o 3 líneas.
   ========================================================== */
@media (max-width:760px){
  #sfdMobileSubtitleOverlay{
    left:22px !important;
    right:22px !important;

    /* Franja vertical entre la fila de iconos y Discover More */
    bottom:80px !important;
    height:108px !important;

    display:none !important;
    align-items:center !important;
    justify-content:flex-start !important;

    margin:0 !important;
    padding:0 !important;

    line-height:1.34 !important;
    text-align:left !important;
  }

  #sfdMobileSubtitleOverlay.is-visible{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media (max-width:390px){
  #sfdMobileSubtitleOverlay{
    left:18px !important;
    right:18px !important;
    bottom:76px !important;
    height:104px !important;
  }
}


/* ==========================================================
   V90 — BAJAR MÁS EL SUBTÍTULO ENTRE ICONOS Y DISCOVER MORE
   SOLO MOBILE. NO TOCA PC.
   Ajuste fino: desplaza el bloque completo del subtítulo hacia
   abajo, manteniéndolo centrado dentro de la zona negra.
   ========================================================== */
@media (max-width:760px){
  #sfdMobileSubtitleOverlay{
    bottom:66px !important;
    height:96px !important;
  }
}

@media (max-width:390px){
  #sfdMobileSubtitleOverlay{
    bottom:62px !important;
    height:92px !important;
  }
}


/* ==========================================================
   V91 — ELIMINAR SUBTÍTULO DUPLICADO ORIGINAL
   SOLO MOBILE. NO TOCA PC.
   Mantiene únicamente el overlay correcto y oculta por completo
   el <p> original dentro de cada slide.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide .sfd-slide__copy > p,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy > p{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
    pointer-events:none !important;
  }

  /* Mantener visible únicamente el overlay desacoplado correcto */
  #sfdMobileSubtitleOverlay.is-visible{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }
}


/* ==========================================================
   V92 — ELIMINAR EL DUPLICADO REAL (::after) DEL SUBTÍTULO
   SOLO MOBILE. NO TOCA PC.
   El texto tenue que seguía apareciendo arriba NO era el <p>
   original: era el pseudo-elemento ::after creado en V87.
   Se elimina por completo y se conserva únicamente el overlay
   correcto #sfdMobileSubtitleOverlay.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="1"]::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="2"]::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="3"]::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="4"]::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="5"]::after,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="6"]::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  #sfdMobileSubtitleOverlay.is-visible{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}


/* ==========================================================
   V93 — SUBIR LIGERAMENTE EL SUBTÍTULO PARA CENTRADO VISUAL
   SOLO MOBILE. NO TOCA PC.
   Ajuste fino: el bloque completo del subtítulo sube unos píxeles
   para quedar centrado entre las dos líneas imaginarias marcadas.
   ========================================================== */
@media (max-width:760px){
  #sfdMobileSubtitleOverlay{
    bottom:72px !important;
    height:96px !important;
  }
}

@media (max-width:390px){
  #sfdMobileSubtitleOverlay{
    bottom:68px !important;
    height:92px !important;
  }
}


/* ==========================================================
   V94 — AJUSTES iPHONE / MOBILE REALES
   SOLO MOBILE. NO TOCA PC.
   1) Baja ligeramente la fila de iconos.
   2) El subtítulo se centra por JS entre iconos y Discover More.
   3) Se deja sin bottom fijo para que JS lo posicione.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:19px !important;
  }

  #sfdMobileSubtitleOverlay{
    position:fixed !important;
    bottom:auto !important;
    height:auto !important;
    min-height:0 !important;
    display:none !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:0 !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.32 !important;
    font-weight:500 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:
      0 1px 2px rgba(0,0,0,.96),
      0 3px 14px rgba(0,0,0,.82) !important;
    z-index:2147483000 !important;
    pointer-events:none !important;
    white-space:normal !important;
  }

  #sfdMobileSubtitleOverlay.is-visible{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-hero-tabs{
    bottom:17px !important;
  }

  #sfdMobileSubtitleOverlay{
    font-size:10.5px !important;
    line-height:1.3 !important;
  }
}

/* Ocultar por completo cualquier subtítulo original dentro del slide en mobile */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide .sfd-slide__copy > p{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    text-shadow:none !important;
    pointer-events:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }
}


/* ==========================================================
   V96 — PROTECCIÓN DE MEMORIA DURANTE PINCH-ZOOM EN IPHONE
   SOLO MOBILE. NO TOCA PC.

   iOS Chrome usa el motor WebKit. Al ampliar una página con
   varias capas blur/backdrop-filter/fixed, WebKit puede tener
   que rasterizar superficies enormes y matar la pestaña por
   memoria. Durante zoom > 1x se simplifican SOLO efectos
   costosos; el contenido y las imágenes permanecen visibles.
   ========================================================== */
@media (max-width:760px){

  body.sfd-mobile-user-zoom .sfd-mobile-hero-reflection img{
    filter:none !important;
    transform:none !important;
  }

  body.sfd-mobile-user-zoom .sfd-mobile-hero-reflection,
  body.sfd-mobile-user-zoom .sfd-lcp-hero::before,
  body.sfd-mobile-user-zoom .sfd-lcp-hero::after,
  body.sfd-mobile-user-zoom .sfd-hero-brand,
  body.sfd-mobile-user-zoom .sfd-hero-actions{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Evita que los elementos fixed generen grandes capas compositadas
     mientras el usuario está ampliando la página. */
  body.sfd-mobile-user-zoom #sfdMobileSubtitleOverlay,
  body.sfd-mobile-user-zoom #sfdHeroPause.sfd-mobile-pause-detached{
    will-change:auto !important;
    transform:none !important;
    filter:none !important;
  }

  /* Pausar efectos visuales continuos mientras hay zoom.
     No cambia el estado ni la slide activa. */
  body.sfd-mobile-user-zoom .partner-strip,
  body.sfd-mobile-user-zoom .partner-track,
  body.sfd-mobile-user-zoom .sfd-mobile-partner-strip,
  body.sfd-mobile-user-zoom .sfd-mobile-partner-track{
    animation-play-state:paused !important;
  }

  body.sfd-mobile-user-zoom *{
    scroll-behavior:auto !important;
  }
}


/* ==========================================================
   V98 — ESTABILIDAD PINCH-ZOOM SIN PERDER CINTA DE LOGOS
   SOLO MOBILE. NO TOCA PC.
   - La cinta de logos permanece visible.
   - Durante pinch-zoom se pausa únicamente su movimiento.
   - No se altera su layout ni se oculta.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-user-zoom .partner-strip,
  body.sfd-mobile-user-zoom .partner-strip *{
    visibility:visible !important;
  }

  body.sfd-mobile-user-zoom .partner-strip{
    opacity:1 !important;
  }
}


/* ==========================================================
   V99 — MODO ESTABLE IPHONE / PINCH-ZOOM
   SOLO MOBILE. NO TOCA PC.

   Objetivo: reducir de forma drástica las superficies GPU que
   WebKit debe volver a rasterizar durante pinch-zoom.

   - Solo la slide activa participa en render.
   - Se elimina el zoom CSS/translateZ/will-change de las fotos.
   - Se elimina blur/backdrop-filter pesado del HERO mobile.
   - El reflejo del header conserva un fondo oscuro elegante,
     pero sin duplicar/rasterizar otra foto desenfocada.
   - Pause y subtítulo ya no usan position:fixed.
   ========================================================== */
@media (max-width:760px){

  /* 1. Renderizar únicamente la slide activa */
  .sfd-lcp-hero .sfd-slide{
    display:none !important;
    opacity:1 !important;
    visibility:hidden !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  .sfd-lcp-hero .sfd-slide.is-active{
    display:block !important;
    visibility:visible !important;
  }

  /* 2. Evitar superficies GPU gigantes durante pinch zoom */
  .sfd-lcp-hero .sfd-slide > img,
  .sfd-lcp-hero .sfd-slide.sfd-hero-zoom-in > img{
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
    backface-visibility:visible !important;
  }

  .sfd-lcp-hero,
  .sfd-lcp-hero *,
  .sfd-lcp-hero *::before,
  .sfd-lcp-hero *::after{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* 3. Header/reflejo sin segunda imagen rasterizada */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection{
    background:
      linear-gradient(90deg,
        rgba(42,50,57,.96) 0%,
        rgba(48,55,62,.94) 42%,
        rgba(37,46,55,.96) 100%) !important;
    filter:none !important;
    box-shadow:0 10px 16px rgba(0,0,0,.32) !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-mobile-hero-reflection img{
    display:none !important;
    visibility:hidden !important;
    filter:none !important;
    transform:none !important;
  }

  /* 4. Pause dentro del HERO, no fixed al viewport */
  #sfdHeroPause.sfd-mobile-pause-detached{
    position:absolute !important;
    top:174px !important;
    right:20px !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 !important;
    transform:none !important;
    will-change:auto !important;
    z-index:30050 !important;
  }

  /* 5. Subtítulo dentro del HERO, no fixed al viewport */
  #sfdMobileSubtitleOverlay{
    position:absolute !important;
    bottom:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    will-change:auto !important;
    filter:none !important;
    z-index:30060 !important;
  }

  /* 6. No promover a GPU elementos del primer hero */
  .sfd-lcp-hero .sfd-hero-controls,
  .sfd-lcp-hero .sfd-hero-tabs,
  .sfd-lcp-hero .sfd-controls-topline,
  .sfd-lcp-hero .sfd-hero-brand,
  .sfd-lcp-hero .sfd-hero-actions{
    will-change:auto !important;
    transform:none !important;
  }

  /* Mantener la cinta de logos visible */
  .partner-strip,
  .partner-track{
    visibility:visible !important;
    opacity:1 !important;
  }
}

@media (max-width:390px){
  #sfdHeroPause.sfd-mobile-pause-detached{
    top:168px !important;
    right:16px !important;
  }
}


/* ==========================================================
   V103 — TIPOGRAFÍA MÁS GRANDE EN PRIMERA PANTALLA MOBILE
   SOLO MOBILE. NO TOCA PC.
   NO modifica los textos de la cinta móvil de logos.

   Reglas:
   - ningún texto visible del HERO baja de 15px
   - título principal de cada imagen = 25px
   - resto de textos del primer hero aumenta proporcionalmente
   ========================================================== */
@media (max-width:760px){

  /* TÍTULO PRINCIPAL DE LAS IMÁGENES */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    font-size:25px !important;
    line-height:1.04 !important;
  }

  /* SUBTÍTULO DESACOPLADO */
  #sfdMobileSubtitleOverlay{
    font-size:15px !important;
    line-height:1.30 !important;
  }

  /* TEXTO DE LOS ICONOS INFERIORES */
  .sfd-lcp-hero .sfd-hero-tab b,
  .sfd-lcp-hero .sfd-hero-tab__label{
    font-size:15px !important;
    line-height:1.08 !important;
  }

  /* BOTÓN CONTROL FLOWING APP */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-control-flowing-top,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-control-flowing-top span{
    font-size:15px !important;
  }

  /* MENU */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-menu-trigger,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-menu-trigger > span[data-i18n="hero_menu"]{
    font-size:15px !important;
  }

  /* DISCOVER MORE */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-hero-link span{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  /* FIRMA */
  body:not(.sfd-mobile-nav-scrolled) .page-signature,
  body:not(.sfd-mobile-nav-scrolled) .page-signature *{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  /* SCROLL TO DISCOVER MORE, si aparece en este viewport */
  .sfd-lcp-hero .sfd-scroll-cue,
  .sfd-lcp-hero .sfd-scroll-cue span{
    font-size:15px !important;
  }

  /* MENÚ DESPLEGABLE DEL HERO */
  .sfd-lcp-hero .sfd-hero-menu-kicker,
  .sfd-lcp-hero .sfd-hero-menu-nav button,
  .sfd-lcp-hero .sfd-hero-menu-nav button span,
  .sfd-lcp-hero .sfd-hero-menu-nav button em{
    font-size:15px !important;
  }
}

/* Mantener explícitamente intacta la tipografía de la cinta móvil de logos */
@media (max-width:760px){
  .partner-strip .partner-card span,
  .partner-strip--fixed-loop .partner-card span,
  .sfd-mobile-partner-strip .sfd-mobile-partner-item span{
    font-size:revert-layer;
  }
}


/* ==========================================================
   V107 — AJUSTE PUNTUAL HERO MOBILE
   SOLO MOBILE. NO TOCA PC.
   1) Logo superior izquierdo +15%
   2) Wordmark Sans Frontières Design +15%
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    transform:scale(1.15) !important;
    transform-origin:left center !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    transform:scale(1.15) !important;
    transform-origin:left center !important;
  }
}


/* ==========================================================
   V108 — BAJAR MENU + FLOWING APP EN HERO MOBILE
   SOLO MOBILE. NO TOCA PC.
   Objetivo: alinear visualmente el texto "Flowing App"
   con la altura de "Sans Frontières Design".
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-menu-trigger{
    top:52px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-control-flowing-top{
    top:52px !important;
  }
}

@media (max-width:390px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-menu-trigger{
    top:50px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-control-flowing-top{
    top:50px !important;
  }
}


/* ==========================================================
   V109 — ALINEACIÓN MENU + FLOWING APP CON SANS FRONTIÈRES
   SOLO MOBILE. NO TOCA PC.
   Corrige el desplazamiento extra de V108.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-menu-trigger,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-control-flowing-top{
    top:0 !important;
  }
}


/* ==========================================================
   V111 — MOVER BOTÓN PAUSE/PLAY DENTRO DE LA IMAGEN
   SOLO MOBILE. NO TOCA PC.
   Posición indicada: dentro de la imagen, parte inferior izquierda.
   ========================================================== */
@media (max-width:760px){

  #sfdHeroPause.sfd-mobile-pause-detached,
  .sfd-lcp-hero #sfdHeroPause{
    position:absolute !important;
    top:auto !important;
    right:auto !important;
    left:34px !important;
    bottom:233px !important;
    margin:0 !important;
    transform:none !important;
    z-index:30080 !important;
  }
}

@media (max-width:390px){
  #sfdHeroPause.sfd-mobile-pause-detached,
  .sfd-lcp-hero #sfdHeroPause{
    left:28px !important;
    bottom:225px !important;
  }
}


/* ==========================================================
   V114 — CENTRAR BARRA DE PROGRESO EN LA IMAGEN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Se centra respecto al viewport/imagen, no respecto al bloque
   de controles que se extiende horizontalmente.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-controls-topline{
    left:50vw !important;
    right:auto !important;
    width:50vw !important;
    max-width:230px !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
  }
}

@media (max-width:390px){
  .sfd-lcp-hero .sfd-controls-topline{
    left:50vw !important;
    width:52vw !important;
    max-width:205px !important;
    transform:translateX(-50%) !important;
  }
}


/* ==========================================================
   V115 — ICONOS HERO: 5 VISIBLES + DESLIZAMIENTO HORIZONTAL
   SOLO MOBILE. NO TOCA PC.
   - Se ven exactamente 5 iconos a la vez.
   - Los iconos restantes aparecen al deslizar horizontalmente.
   - No modifica la cinta móvil de logos.
   ========================================================== */
@media (max-width:760px){

  .sfd-lcp-hero .sfd-hero-tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;

    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:0 !important;
    column-gap:0 !important;
    row-gap:0 !important;

    padding-left:0 !important;
    padding-right:0 !important;

    scroll-snap-type:x mandatory !important;
    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch !important;

    scrollbar-width:none !important;
    overscroll-behavior-x:contain !important;
  }

  .sfd-lcp-hero .sfd-hero-tabs::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 20% !important;
    width:20% !important;
    min-width:20% !important;
    max-width:20% !important;

    margin:0 !important;
    box-sizing:border-box !important;

    scroll-snap-align:start !important;
    scroll-snap-stop:normal !important;
  }
}


/* ==========================================================
   V116 — 5 ICONOS EXACTOS, SIN ASOMAR EL SEXTO
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  .sfd-lcp-hero .sfd-hero-tabs{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-padding-left:0 !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 20% !important;
    width:20% !important;
    min-width:20% !important;
    max-width:20% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* ==========================================================
   V117 — 4 ICONOS EXACTOS, RESTO SOLO AL DESLIZAR
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  .sfd-lcp-hero .sfd-hero-tabs{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-padding-left:0 !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 25% !important;
    width:25% !important;
    min-width:25% !important;
    max-width:25% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* ==========================================================
   V118 — WHO WE ARE? EN UNA SOLA LÍNEA
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"] b,
  .sfd-lcp-hero .sfd-hero-tab[data-sfd-slide="0"] .sfd-hero-tab__label{
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}


/* ==========================================================
   V119 — 3 ICONOS EXACTOS, RESTO SOLO AL DESLIZAR
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  .sfd-lcp-hero .sfd-hero-tabs{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-padding-left:0 !important;
  }

  .sfd-lcp-hero .sfd-hero-tab{
    flex:0 0 33.333333% !important;
    width:33.333333% !important;
    min-width:33.333333% !important;
    max-width:33.333333% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* ==========================================================
   V120 — FIRMA AL TAMAÑO ORIGINAL MOBILE
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    font-size:7.2px !important;
    line-height:1 !important;
    letter-spacing:-.01em !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .page-signature *{
    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    font-size:6.5px !important;
  }
}


/* ==========================================================
   V121 — ELIMINAR "DISCOVER MORE" EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-hero-link,
  .sfd-lcp-hero .sfd-hero-link span,
  .sfd-lcp-hero .sfd-hero-link-wrap{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}


/* ==========================================================
   V123 — LOGO + SANS FRONTIÈRES DESIGN 15% MÁS (TOTAL 30%)
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-symbol{
    transform:scale(1.30) !important;
    transform-origin:left center !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-brand .sfd-hero-wordmark{
    transform:scale(1.30) !important;
    transform-origin:left center !important;
  }
}


/* ==========================================================
   V124 — TÍTULO PRINCIPAL +10%
   SOLO MOBILE. NO TOCA PC.
   25px -> 27.5px
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    font-size:27.5px !important;
  }
}


/* ==========================================================
   V125 — SOLO HFC NETWORK ENGINEERING A 25PX
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide[data-sfd-index="2"].is-active .sfd-slide__copy h2{
    font-size:25px !important;
  }
}


/* ==========================================================
   V126 — VIÑETA EN SUBTÍTULOS + FIRMA 20% MÁS GRANDE
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){

  /* Viñeta para los subtítulos del hero */
  #sfdMobileSubtitleOverlay::before{
    content:"•";
    display:inline-block;
    margin-right:8px;
    font-size:1em;
    line-height:1;
    vertical-align:baseline;
  }

  /* Firma +20% respecto al tamaño original restaurado */
  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    font-size:8.64px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .page-signature *{
    font-size:inherit !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .page-signature{
    font-size:7.8px !important;
  }
}


/* ==========================================================
   V127 — DESACTIVAR ZOOM EN TODA LA PÁGINA MOBILE
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  html, body{
    touch-action:pan-x pan-y !important;
    -ms-touch-action:pan-x pan-y !important;
  }
}


/* ==========================================================
   V128 — MONDAY-FRIDAY ALINEADO A LA IZQUIERDA
   SOLO MOBILE. NO TOCA PC.
   - mantiene la misma cinta superior
   - alinea el texto con el borde izquierdo del logo principal
   - tamaño 15px
   ========================================================== */
@media (max-width:760px){

  .site-header .top-ribbon{
    padding-left:18px !important;
  }

  .site-header .top-ribbon__contact{
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .site-header .top-ribbon__contact > span[data-i18n="hours"]{
    font-size:15px !important;
    line-height:1 !important;
    text-align:left !important;
    margin:0 !important;
    padding:0 !important;
  }
}


/* ==========================================================
   V129 — LOGO NEGRO ESTABLE EN MOBILE
   SOLO MOBILE. NO TOCA PC.
   Desactiva humo/nubes y efectos ambientales animados del logo
   que pueden generar carga gráfica continua en iPhone/WebKit.
   El logo permanece visible y estático.
   ========================================================== */
@media (max-width:760px){

  /* Humo / nube: completamente fuera del render */
  #sfd-section-three .stage .box-cloud,
  #sfd-section-three .stage .edge-smoke,
  #sfd-section-three .stage .edge-smoke *,
  #sfd-section-three .stage .edge-smoke__core,
  #sfd-section-three .stage .edge-smoke__wisp{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    animation:none !important;
    transition:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  /* Efectos ambientales del logo: sin animación continua */
  #sfd-section-three .stage .wifi-aura-sequence,
  #sfd-section-three .stage .wifi-aura,
  #sfd-section-three .stage .soft-neon-sequence,
  #sfd-section-three .stage .soft-neon,
  #sfd-section-three .stage .click-bloom,
  #sfd-section-three .stage .click-wave{
    animation:none !important;
    transition:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    box-shadow:none !important;
  }

  /* Evita que WebKit reserve una capa GPU para todo el escenario */
  #sfd-section-three .stage,
  #sfd-section-three .stage .logo{
    will-change:auto !important;
    backface-visibility:visible !important;
  }
}

/* ==========================================================
   V130 — AJUSTES SOLICITADOS 23-08-2026
   SOLO MOBILE. NO TOCA PC.
   1) Baja la línea de progreso para que no cruce la cinta de logos.
   2) Separa las imágenes de Planning and Network Design de sus textos.
   3) Iguala el ancho de los dos botones del bloque del cubo.
   4) Aumenta el cubo 30%.
   ========================================================== */
@media (max-width:760px){

  /* 1) Línea de progreso: mantener centrado horizontal y bajarla. */
  .sfd-lcp-hero .sfd-controls-topline{
    transform:translate(-50%, 34px) !important;
  }

  /* 2) Planning and Network Design: imagen y textos nunca se pisan. */
  #services .service-card{
    overflow:hidden !important;
  }

  #services .service-card__image{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:210px !important;
    margin:0 0 20px 0 !important;
    object-fit:cover !important;
    z-index:1 !important;
  }

  #services .service-card h4,
  #services .service-card .service-card__subtitle,
  #services .service-card p{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    z-index:2 !important;
  }

  #services .service-card h4{
    margin-top:0 !important;
  }

  /* 3) Los dos CTA del cubo quedan exactamente del mismo ancho. */
  .sfd-dark-feature__actions{
    align-items:stretch !important;
  }

  .sfd-dark-feature__button,
  .sfd-dark-feature__link{
    box-sizing:border-box !important;
    width:154px !important;
    min-width:154px !important;
    max-width:154px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* 4) Cubo 30% más grande que el tamaño mobile anterior (340px -> 442px). */
  .sfd-dark-feature__visual{
    height:455px !important;
    min-height:455px !important;
  }

  #sfd-photo-cube{
    width:min(106.6vw,442px) !important;
    height:min(106.6vw,442px) !important;
  }
}

@media (max-width:390px){
  /* Mantener el +30% también en pantallas más angostas sin cortar el cubo. */
  #sfd-photo-cube{
    width:min(100vw,414px) !important;
    height:min(100vw,414px) !important;
  }
}

/* ==========================================================
   V131 — ELIMINAR LÍNEA SOBRE CINTA DE LOGOS
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-controls-topline{
    display:none !important;
  }
}

/* ==========================================================
   V132 — ELIMINAR DEFINITIVAMENTE LA LÍNEA EN LA CINTA DE LOGOS
   SOLO MOBILE. NO TOCA PC.
   ========================================================== */
@media (max-width:760px){
  /* La línea visible provenía del propio contenedor de partners,
     no de la barra de progreso. Se eliminan todos sus divisores. */
  .partner-strip,
  .partner-strip.sfd-strip-persist,
  .partner-strip.sfd-strip-flowing,
  .partner-strip.partner-strip--fixed-loop,
  body > .partner-strip.sfd-strip-persist,
  body > .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing,
  body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop{
    border-top:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }

  /* Neutraliza cualquier línea decorativa generada por pseudo-elementos. */
  .partner-strip::before,
  .partner-strip::after,
  .partner-track::before,
  .partner-track::after{
    content:none !important;
    display:none !important;
    border:0 !important;
    height:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  /* La antigua línea de progreso también permanece desactivada en mobile. */
  .sfd-lcp-hero .sfd-controls-topline{
    display:none !important;
  }
}

/* ==========================================================
   V133 — ELIMINAR LA LÍNEA REAL DE PROGRESO SOBRE LOS LOGOS
   SOLO MOBILE. NO TOCA PC.
   Oculta el contenedor y también sus dos trazos internos
   (.sfd-controls-track / .sfd-controls-active) y el ID del progreso.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-controls-topline,
  .sfd-lcp-hero .sfd-controls-track,
  .sfd-lcp-hero .sfd-controls-active,
  #sfdHeroProgress{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
  }
}

/* ==========================================================
   V134 — ELIMINAR LA LÍNEA MERCURY REAL SOBRE LA CINTA MOBILE
   SOLO MOBILE. NO TOCA PC.
   La línea está creada en el HTML por #sfd-mercury-guide-line-only-v1
   mediante .partner-strip::before. Se usa mayor especificidad para
   anularla aunque ese <style> aparezca después de este CSS.
   ========================================================== */
@media (max-width:760px){
  html body .partner-strip::before,
  html body .partner-strip.sfd-strip-persist::before,
  html body .partner-strip.sfd-strip-flowing::before,
  html body .partner-strip.partner-strip--fixed-loop::before,
  html body > .partner-strip.sfd-strip-persist::before,
  html body > .partner-strip.sfd-strip-flowing::before,
  html body:not(.sfd-mobile-nav-scrolled) .partner-strip::before,
  html body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-persist::before,
  html body:not(.sfd-mobile-nav-scrolled) .partner-strip.sfd-strip-flowing::before,
  html body:not(.sfd-mobile-nav-scrolled) .partner-strip.partner-strip--fixed-loop::before,
  html body.sfd-mercury-global-light .partner-strip::before,
  html body.sfd-mercury-global-light > .partner-strip.sfd-strip-persist::before,
  html body.sfd-mercury-global-light > .partner-strip.sfd-strip-flowing::before{
    content:none !important;
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    border:0 !important;
    outline:0 !important;
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
  }
}

/* ==========================================================
   FINAL MOBILE HERO LOCK — 2026-08-24
   Desktop untouched.
   Desired state:
   - NO rounded corners
   - NO zoom / NO shrink animation
   - full-width image container
   - fixed size/position during every slide change
   - image starts immediately below the mobile header
   ========================================================== */
@media (max-width:760px){
  /* Keep slide geometry stable. */
  .sfd-lcp-hero .sfd-hero-slides,
  .sfd-lcp-hero .sfd-slide,
  .sfd-lcp-hero .sfd-slide.is-active{
    transform:none !important;
    scale:1 !important;
    transition-property:opacity, visibility !important;
  }

  /* Fixed full-width image surface. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.sfd-hero-zoom-in > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px) !important;
    width:100% !important;
    height:52svh !important;
    max-height:510px !important;
    min-height:320px !important;
    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;

    transform:none !important;
    scale:1 !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.sfd-hero-zoom-in > img{
    object-fit:cover !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    overflow:hidden !important;
    background:linear-gradient(180deg,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,.02) 52%,
      rgba(0,0,0,.22) 78%,
      rgba(0,0,0,.46) 100%) !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.sfd-hero-zoom-in > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    left:0 !important;
    right:0 !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px) !important;
    width:100% !important;
    border-radius:0 !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    transform:none !important;
    scale:1 !important;
    transition:none !important;
    animation:none !important;
  }
}

/* ==========================================================
   FINAL MOBILE HERO — TRANSLUCENT FROSTED STRIP AT IMAGE BOTTOM
   A subtle smoked/glass ribbon over the lower edge of the hero image.
   It softly darkens bright images and gently lifts dark ones.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    height:15px !important;
    margin:0 !important;
    z-index:9 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg,
        rgba(158,168,178,.18) 0%,
        rgba(94,104,114,.26) 48%,
        rgba(48,56,64,.34) 100%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(115%) contrast(1.03) !important;
    backdrop-filter:blur(10px) saturate(115%) contrast(1.03) !important;
    border-top:1px solid rgba(255,255,255,.14) !important;
    border-bottom:1px solid rgba(0,0,0,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.12) !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.08px) !important;
    height:14px !important;
  }
}

/* ==========================================================
   SLIDE 1 — DARK FROSTED BOTTOM STRIP
   Only mobile. Desktop untouched.
   The first hero image uses a darker smoked/frosted ribbon.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    background:
      linear-gradient(180deg,
        rgba(52,60,68,.26) 0%,
        rgba(28,34,40,.42) 48%,
        rgba(12,16,20,.58) 100%) !important;
    -webkit-backdrop-filter:blur(11px) saturate(110%) brightness(.82) !important;
    backdrop-filter:blur(11px) saturate(110%) brightness(.82) !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    border-bottom:1px solid rgba(0,0,0,.30) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -1px 0 rgba(0,0,0,.22) !important;
  }
}

/* ==========================================================
   SLIDE 1 — FINAL TUNING
   20% lighter than previous dark frosted strip
   5% lower height. Other slides unchanged.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.26px) !important;
    height:14.25px !important;
    background:
      linear-gradient(180deg,
        rgba(66,75,84,.23) 0%,
        rgba(39,46,53,.36) 48%,
        rgba(20,25,30,.49) 100%) !important;
    -webkit-backdrop-filter:blur(11px) saturate(110%) brightness(.98) !important;
    backdrop-filter:blur(11px) saturate(110%) brightness(.98) !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 9.576px) !important;
    height:13.3px !important;
  }
}

/* ==========================================================
   MOBILE HERO — 7-STEP FULL-WIDTH PROGRESS BAR
   Full-width frosted track already exists above.
   This active segment occupies exactly 1/7 of the screen width
   and moves with the currently active hero image.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    content:"" !important;
    position:absolute !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    width:14.285714% !important;
    height:15px !important;
    margin:0 !important;
    z-index:12 !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,
      rgba(236,113,119,.88) 0%,
      rgba(237,126,128,.94) 52%,
      rgba(230,143,133,.88) 100%) !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.16) !important;
    border-bottom:1px solid rgba(87,36,39,.18) !important;
    box-shadow:0 0 8px rgba(224,104,111,.14) !important;
    transform:none !important;
    transition:left .42s cubic-bezier(.22,.61,.36,1) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{left:0% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="1"]::before{left:14.285714% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="2"]::before{left:28.571428% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="3"]::before{left:42.857142% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="4"]::before{left:57.142856% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="5"]::before{left:71.428570% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="6"]::before{left:85.714284% !important;}

  /* Match the slightly shorter strip on image 1. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.26px) !important;
    height:14.25px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.08px) !important;
    height:14px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 9.576px) !important;
    height:13.3px !important;
  }
}

/* ==========================================================
   FINAL — PROGRESS SEGMENT SOLID / STRAIGHT / ABOVE FROSTED STRIP
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    z-index:60 !important;
    opacity:1 !important;
    background:#ec777c !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:9 !important;
  }
}


/* ==========================================================
   FINAL POSITION — PROGRESS BAR SITS ABOVE THE FROSTED STRIP
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 24px) !important;
    height:10px !important;
    z-index:80 !important;
    background:#ec777c !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 23px) !important;
    height:9.5px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 22px) !important;
    height:9px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 21px) !important;
    height:8.5px !important;
  }
}

/* ==========================================================
   FINAL REFERENCE BAR — ACTIVE TAB ON FRONT EDGE OF FROSTED STRIP
   Mobile only. Desktop untouched.
   The dark/frosted ribbon stays behind. The solid active segment
   sits on its upper/front edge like the supplied reference.
   ========================================================== */
@media (max-width:760px){
  /* Frosted/dark ribbon remains the background track. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:40 !important;
  }

  /* Solid progress tab: front layer, straddling the ribbon's top edge. */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 18px) !important;
    height:8px !important;
    z-index:100 !important;
    opacity:1 !important;
    background:#ef767d !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    transform:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 17.25px) !important;
    height:7.5px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 16px) !important;
    height:7px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 15.3px) !important;
    height:6.5px !important;
  }
}


/* ==========================================================
   FINAL FRONT TAB FIX — BAR IN FRONT OF THE STRIP EDGE
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide{
    overflow:visible !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:70 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 18px) !important;
    height:8px !important;
    z-index:140 !important;
    background:#ef767d !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 17.25px) !important;
    height:7.5px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide{
    overflow:visible !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 16px) !important;
    height:7px !important;
    z-index:140 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active[data-sfd-index="0"]::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 15.3px) !important;
    height:6.5px !important;
  }
}

/* ==========================================================
   TRUE FRONT PROGRESS TAB — parent layer, not slide layer
   Mobile only. Desktop untouched.
   The pink segment is now drawn by .sfd-hero-slides itself,
   so it sits visibly IN FRONT of the frosted ribbon edge.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
  }

  /* Disable the old progress pseudo-element living inside each slide. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.is-active::before{
    content:none !important;
    display:none !important;
  }

  /* New solid tab on the FRONT layer. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    content:"" !important;
    position:absolute !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 23px) !important;
    left:0 !important;
    width:14.285714% !important;
    height:7px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:9999 !important;
    pointer-events:none !important;
    opacity:1 !important;
    background:#ef767d !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
    transition:left .32s ease !important;
  }

  /* 7 fixed positions. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    left:0% !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 18.25px) !important;
  }
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::before{left:14.285714% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::before{left:28.571428% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::before{left:42.857142% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::before{left:57.142856% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::before{left:71.428570% !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::before{left:85.714284% !important;}

  /* Frosted ribbon stays behind the tab. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:100 !important;
  }
}

/* ==========================================================
   FINAL ALIGNMENT — PINK PROGRESS TAB OVERLAYS THE TOP OF STRIP
   Mobile only. Desktop untouched.
   The pink tab begins exactly at the frosted strip top edge,
   but renders above it (front layer), matching the reference.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    height:7px !important;
    z-index:9999 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.26px) !important;
    height:7px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:100 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.08px) !important;
    height:6.5px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 9.576px) !important;
    height:6.5px !important;
  }
}

/* ==========================================================
   FINAL — PINK PROGRESS SAME THICKNESS AS FROSTED STRIP
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    height:15px !important;
    z-index:9999 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.26px) !important;
    height:14.25px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:100 !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.08px) !important;
    height:14px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 9.576px) !important;
    height:13.3px !important;
  }
}

/* ==========================================================
   FINAL — PINK PROGRESS 20% THINNER
   Mobile only. Desktop untouched.
   Keeps the same position; only reduces the pink bar height.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    height:12px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    height:11.4px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    height:11.2px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    height:10.64px !important;
  }
}

/* ==========================================================
   FINAL — FROSTED STRIP MATCHES PINK BAR HEIGHT
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    height:12px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.26px) !important;
    height:11.4px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.08px) !important;
    height:11.2px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 9.576px) !important;
    height:10.64px !important;
  }
}

/* ==========================================================
   FINAL — STRIP + PINK BAR 10% THINNER
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    height:10.8px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    height:10.26px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    height:10.08px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    height:9.576px !important;
  }
}

/* ==========================================================
   FINAL VISUAL HEIGHT MATCH — FROSTED STRIP = PINK BAR
   The frosted strip had top/bottom borders adding visible pixels
   outside its declared height. Keep the pink bar unchanged and
   reduce only the frosted strip's real rendered height to match.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    box-sizing:border-box !important;
    height:10.8px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    box-sizing:border-box !important;
    height:10.26px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    box-sizing:border-box !important;
    height:10.08px !important;
  }

  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    box-sizing:border-box !important;
    height:9.576px !important;
  }
}

/* ==========================================================
   FINAL — PROGRESS BAR COLORS FOLLOW ACTIVE IMAGE
   Mobile only. Desktop untouched.
   Uses the three pastel marker tones from the reference:
   salmon / powder blue / sage green.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    transition:left .42s cubic-bezier(.22,.61,.36,1), background-color .38s ease !important;
  }

  /* 1 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    background:#ffc6a3 !important;
    background-image:none !important;
  }

  /* 2 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::before{
    background:#b7e8ff !important;
    background-image:none !important;
  }

  /* 3 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::before{
    background:#cdefb3 !important;
    background-image:none !important;
  }

  /* 4 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::before{
    background:#ffc6a3 !important;
    background-image:none !important;
  }

  /* 5 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::before{
    background:#b7e8ff !important;
    background-image:none !important;
  }

  /* 6 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::before{
    background:#cdefb3 !important;
    background-image:none !important;
  }

  /* 7 */
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::before{
    background:#ffc6a3 !important;
    background-image:none !important;
  }
}

/* ==========================================================
   DEFINITIVE LAYER ORDER — FROSTED STRIP BEHIND, COLOR BAR FRONT
   Mobile only. Desktop untouched.
   Uses ::before as the full-width frosted strip and ::after as
   the active 1/7 solid color segment so the active bar is always
   painted in front of the strip.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
  }

  /* BACK LAYER: full-width frosted ribbon */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    width:100% !important;
    height:10.8px !important;
    z-index:100 !important;
    pointer-events:none !important;
    opacity:1 !important;
    background:linear-gradient(180deg,rgba(158,168,178,.18) 0%,rgba(94,104,114,.26) 48%,rgba(48,56,64,.34) 100%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(115%) contrast(1.03) !important;
    backdrop-filter:blur(10px) saturate(115%) contrast(1.03) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
    transition:none !important;
  }

  /* FRONT LAYER: active 1/7 solid segment */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.8px) !important;
    width:14.285714% !important;
    height:10.8px !important;
    z-index:10000 !important;
    pointer-events:none !important;
    opacity:1 !important;
    background:#ffc6a3 !important;
    background-image:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    transform:none !important;
    transition:left .42s cubic-bezier(.22,.61,.36,1), background-color .38s ease !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{left:0% !important;background:#ffc6a3 !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after{left:14.285714% !important;background:#b7e8ff !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after{left:28.571428% !important;background:#cdefb3 !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after{left:42.857142% !important;background:#ffc6a3 !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{left:57.142856% !important;background:#b7e8ff !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{left:71.428570% !important;background:#cdefb3 !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{left:85.714284% !important;background:#ffc6a3 !important;}

  /* Slide 1 keeps the slightly shorter approved height, both layers aligned. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.26px) !important;
    height:10.26px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    background:linear-gradient(180deg,rgba(66,75,84,.23) 0%,rgba(39,46,53,.36) 48%,rgba(20,25,30,.49) 100%) !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 10.08px) !important;
    height:10.08px !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 80px + clamp(320px, 52svh, 510px) - 9.576px) !important;
    height:9.576px !important;
  }
}

/* ==========================================================
   ABSOLUTE FINAL FIX — BACK STRIP NEVER TAKES ACTIVE COLOR
   Mobile only. The full-width ::before is always frosted/dark.
   Only the 1/7 ::after segment changes pastel color.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::before{
    background:linear-gradient(180deg,rgba(66,75,84,.23) 0%,rgba(39,46,53,.36) 48%,rgba(20,25,30,.49) 100%) !important;
    background-image:linear-gradient(180deg,rgba(66,75,84,.23) 0%,rgba(39,46,53,.36) 48%,rgba(20,25,30,.49) 100%) !important;
  }
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::before,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::before{
    background:linear-gradient(180deg,rgba(158,168,178,.18) 0%,rgba(94,104,114,.26) 48%,rgba(48,56,64,.34) 100%) !important;
    background-image:linear-gradient(180deg,rgba(158,168,178,.18) 0%,rgba(94,104,114,.26) 48%,rgba(48,56,64,.34) 100%) !important;
  }

  /* Only the active 1/7 segment receives the pastel color. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{background:#ffc6a3 !important;background-image:none !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after{background:#b7e8ff !important;background-image:none !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after{background:#cdefb3 !important;background-image:none !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after{background:#ffc6a3 !important;background-image:none !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{background:#b7e8ff !important;background-image:none !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{background:#cdefb3 !important;background-image:none !important;}
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{background:#ffc6a3 !important;background-image:none !important;}
}


/* ==========================================================
   FINAL — PAUSE/PLAY MOVE 10PX LEFT AND 7PX UP
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  #sfdHeroPause.sfd-mobile-pause-detached,
  .sfd-lcp-hero #sfdHeroPause{
    left:24px !important;
    bottom:240px !important;
  }
}

@media (max-width:390px){
  #sfdHeroPause.sfd-mobile-pause-detached,
  .sfd-lcp-hero #sfdHeroPause{
    left:18px !important;
    bottom:232px !important;
  }
}


/* ==========================================================
   FINAL — PAUSE/PLAY REPOSITION TO USER MARKED HEIGHT
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  #sfdHeroPause.sfd-mobile-pause-detached,
  .sfd-lcp-hero #sfdHeroPause{
    left:10px !important;
    bottom:252px !important;
  }
}

@media (max-width:390px){
  #sfdHeroPause.sfd-mobile-pause-detached,
  .sfd-lcp-hero #sfdHeroPause{
    left:8px !important;
    bottom:244px !important;
  }
}


/* ==========================================================
   FINAL — SQUARE BULLETS FOR EVERY HERO SUBTITLE/PARAGRAPH
   Mobile only. Desktop untouched.
   Replaces the previous round bullet with a clean square bullet.
   ========================================================== */
@media (max-width:760px){
  #sfdMobileSubtitleOverlay::before{
    content:"" !important;
    display:inline-block !important;
    width:5px !important;
    height:5px !important;
    min-width:5px !important;
    margin-right:9px !important;
    background:#ffffff !important;
    border-radius:0 !important;
    vertical-align:2px !important;
  }
}

@media (max-width:390px){
  #sfdMobileSubtitleOverlay::before{
    width:4px !important;
    height:4px !important;
    min-width:4px !important;
    margin-right:8px !important;
  }
}


/* ==========================================================
   FINAL — ONE SQUARE BULLET PER HERO SUBTITLE LINE
   Mobile only. Desktop untouched.
   Each <br> line is converted by index.html into its own item.
   ========================================================== */
@media (max-width:760px){
  #sfdMobileSubtitleOverlay::before{
    content:none !important;
    display:none !important;
  }

  #sfdMobileSubtitleOverlay{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:3px !important;
  }

  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item{
    display:flex !important;
    align-items:flex-start !important;
    width:100% !important;
    position:relative !important;
    padding-left:16px !important;
    line-height:1.28 !important;
  }

  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:.48em !important;
    width:5px !important;
    height:5px !important;
    background:#fff !important;
    border-radius:0 !important;
  }
}

@media (max-width:390px){
  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item{
    padding-left:14px !important;
  }

  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item::before{
    width:4px !important;
    height:4px !important;
  }
}


/* ==========================================================
   FINAL — MOBILE HERO TYPOGRAPHY MATCH TO REFERENCE
   Condensed, strong sans-serif similar to the supplied sample.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-family:"Oswald","Arial Narrow",Arial,sans-serif !important;
    font-weight:600 !important;
    font-stretch:condensed !important;
    letter-spacing:.025em !important;
  }

  #sfdMobileSubtitleOverlay,
  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item{
    font-family:"Oswald","Arial Narrow",Arial,sans-serif !important;
    font-weight:500 !important;
    font-stretch:condensed !important;
    letter-spacing:.015em !important;
  }
}


/* ==========================================================
   FINAL — MOBILE HERO TYPOGRAPHY REFERENCE 2
   Cleaner narrow sans-serif like the supplied Ferguson / RIP sample.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-lcp-hero .sfd-slide__copy h1,
  .sfd-lcp-hero .sfd-slide__copy h2{
    font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
    font-weight:500 !important;
    font-stretch:condensed !important;
    letter-spacing:.01em !important;
  }

  #sfdMobileSubtitleOverlay,
  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item{
    font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif !important;
    font-weight:500 !important;
    font-stretch:condensed !important;
    letter-spacing:.005em !important;
  }
}

/* ==========================================================
   FINAL — MOBILE SUBTITLES REGULAR WEIGHT
   Remove bold from hero subtitle bullet items only.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  #sfdMobileSubtitleOverlay,
  #sfdMobileSubtitleOverlay .sfd-mobile-subtitle-item{
    font-weight:400 !important;
  }
}

/* ==========================================================
   ABSOLUTE FINAL — BRIGHT HIGHLIGHTER PASTEL PROGRESS COLORS
   Mobile only. Desktop untouched.
   Prevent any darkening/blending of the active 1/7 segment.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides{
    isolation:isolate !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    z-index:2147483000 !important;
    opacity:1 !important;
    mix-blend-mode:normal !important;
    filter:none !important;
    -webkit-filter:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background:#FFD0AE !important;
    background-color:#FFD0AE !important;
    background-image:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{
    background:#C7EEFF !important;
    background-color:#C7EEFF !important;
    background-image:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{
    background:#D5F2BE !important;
    background-color:#D5F2BE !important;
    background-image:none !important;
  }
}


/* ==========================================================
   CACHE-FORCED FINAL BAR COLORS — HIGH-LUMINANCE PASTEL
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background:#FFD7B8 !important;
    background-color:#FFD7B8 !important;
    background-image:none !important;
    opacity:1 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{
    background:#D6F3FF !important;
    background-color:#D6F3FF !important;
    background-image:none !important;
    opacity:1 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{
    background:#DEF6C7 !important;
    background-color:#DEF6C7 !important;
    background-image:none !important;
    opacity:1 !important;
  }
}

/* ==========================================================
   ABSOLUTE FINAL — ACTIVE COLOR BAR 100% OPAQUE
   Mobile only. Desktop untouched.
   The frosted full-width ribbon (::before) keeps transparency.
   The active 1/7 color bar (::after) has ZERO transparency.
   ========================================================== */
@media (max-width:760px){
  /* Transparent/frosted BACK ribbon stays as-is. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::before{
    opacity:1 !important;
    mix-blend-mode:normal !important;
  }

  /* Active color segment: fully opaque, no blending/filtering. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    opacity:1 !important;
    mix-blend-mode:normal !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background-image:none !important;
    box-shadow:none !important;
    border:0 !important;
    isolation:isolate !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background-color:#FFD0AE !important;
    background:#FFD0AE !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{
    background-color:#C7EEFF !important;
    background:#C7EEFF !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{
    background-color:#D5F2BE !important;
    background:#D5F2BE !important;
  }
}


/* ==========================================================
   ABSOLUTE FINAL — USER EXACT HEX COLORS FOR ACTIVE BAR
   Mobile only. Desktop untouched.
   Exact requested colors:
   orange #FFDAC1
   pink   #F5D2D3
   green  #CCE2CB
   blue   #B0E0E6
   Applied in 4-color rotation across the 7 hero images.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides::after{
    opacity:1 !important;
    mix-blend-mode:normal !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background-image:none !important;
    box-shadow:none !important;
    border:0 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{
    background:#FFDAC1 !important;
    background-color:#FFDAC1 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{
    background:#F5D2D3 !important;
    background-color:#F5D2D3 !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background:#CCE2CB !important;
    background-color:#CCE2CB !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after{
    background:#B0E0E6 !important;
    background-color:#B0E0E6 !important;
  }
}


/* ==========================================================
   FINAL OVERRIDE — FIRST ACTIVE BAR COLOR EXACTLY #FF6961
   Only for the first hero image.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    background:#FF6961 !important;
    background-color:#FF6961 !important;
  }
}


/* ==========================================================
   FINAL OVERRIDE — SECOND ACTIVE BAR COLOR EXACTLY #B0F2C2
   Only for the second hero image.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="1"])::after{
    background:#B0F2C2 !important;
    background-color:#B0F2C2 !important;
  }
}


/* ==========================================================
   FINAL OVERRIDE — FIRST ACTIVE BAR COLOR EXACTLY #FCB7AF
   Only for the first hero image.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="0"])::after{
    background:#FCB7AF !important;
    background-color:#FCB7AF !important;
  }
}


/* ==========================================================
   FINAL OVERRIDE — THIRD ACTIVE BAR COLOR EXACTLY #B2E2F2
   Only for the third hero image.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="2"])::after{
    background:#B2E2F2 !important;
    background-color:#B2E2F2 !important;
  }
}


/* ==========================================================
   FINAL OVERRIDES — HERO BAR COLORS 4, 5, 6
   4th #FFCA99 | 5th #F5FAC1 | 6th #D3D3D3
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="3"])::after{
    background:#FFCA99 !important;
    background-color:#FFCA99 !important;
  }
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="4"])::after{
    background:#F5FAC1 !important;
    background-color:#F5FAC1 !important;
  }
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="5"])::after{
    background:#D3D3D3 !important;
    background-color:#D3D3D3 !important;
  }
}


/* ==========================================================
   FINAL OVERRIDE — SEVENTH ACTIVE BAR COLOR EXACTLY #FFA07A
   Only for the seventh hero image.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background:#FFA07A !important;
    background-color:#FFA07A !important;
  }
}


/* FINAL OVERRIDE — 7TH ACTIVE BAR COLOR #B186F1 */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background:#B186F1 !important;
    background-color:#B186F1 !important;
  }
}


/* FINAL OVERRIDE — SEVENTH ACTIVE BAR COLOR EXACTLY #CAACF9 */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-slides:has(.sfd-slide.is-active[data-sfd-index="6"])::after{
    background:#CAACF9 !important;
    background-color:#CAACF9 !important;
  }
}


/* ==========================================================
   FINAL — MOBILE MAIN NAV 30% TRANSPARENCY
   Only the black/nav ribbon below the hours ribbon.
   30% transparency = 70% opacity.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header .main-nav,
  body.sfd-mercury-global-light .site-header .main-nav,
  body:not(.sfd-mercury-global-light) .site-header .main-nav,
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav,
  body.sfd-mobile-nav-scrolled .site-header .main-nav{
    background:rgba(0,0,0,.70) !important;
    background-color:rgba(0,0,0,.70) !important;
  }
}


/* ==========================================================
   FINAL — MOBILE MAIN NAV 70% TRANSPARENCY
   Only the black/nav ribbon below the hours ribbon.
   70% transparency = 30% opacity.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header .main-nav,
  body.sfd-mercury-global-light .site-header .main-nav,
  body:not(.sfd-mercury-global-light) .site-header .main-nav,
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav,
  body.sfd-mobile-nav-scrolled .site-header .main-nav{
    background:rgba(0,0,0,.30) !important;
    background-color:rgba(0,0,0,.30) !important;
  }
}


/* ==========================================================
   FINAL — MOBILE MAIN NAV STYLE LIKE REFERENCE SCREENSHOT
   Only the ribbon below the hours ribbon.
   Dark translucent gray ribbon, softer logo sizing,
   white pill CTA, and clean white menu icon.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header .main-nav,
  body.sfd-mercury-global-light .site-header .main-nav,
  body:not(.sfd-mercury-global-light) .site-header .main-nav,
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav,
  body.sfd-mobile-nav-scrolled .site-header .main-nav{
    background:rgba(74,74,74,.72) !important;
    background-color:rgba(74,74,74,.72) !important;
    -webkit-backdrop-filter:blur(6px) saturate(104%) !important;
    backdrop-filter:blur(6px) saturate(104%) !important;
    height:68px !important;
    min-height:68px !important;
    padding:8px 14px !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .site-header .main-nav .brand--sfd-wordmark{
    gap:0 !important;
  }

  .site-header .main-nav .brand__sfd-symbol{
    height:46px !important;
    max-height:46px !important;
  }

  .site-header .main-nav .brand__sfd-wordmark{
    height:29px !important;
    max-height:29px !important;
    margin-left:-6px !important;
    opacity:.98 !important;
  }

  .site-header .nav-actions{
    gap:10px !important;
  }

  .site-header .nav-button,
  .site-header .nav-button--light,
  .site-header .nav-button--outline{
    min-height:44px !important;
    height:44px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
    box-shadow:none !important;
  }

  .site-header .nav-button--light,
  .site-header .nav-button,
  .site-header .nav-button--outline{
    background:#ffffff !important;
    color:#2f3138 !important;
    border:1px solid rgba(255,255,255,.65) !important;
    text-shadow:none !important;
  }

  .site-header .nav-button--light:hover,
  .site-header .nav-button:hover,
  .site-header .nav-button--outline:hover{
    background:#ffffff !important;
    color:#2f3138 !important;
  }

  .site-header .primary-menu-toggle,
  .site-header .menu-toggle,
  .site-header .sfd-mobile-menu-toggle,
  .site-header button[aria-label*="menu"],
  .site-header button[aria-label*="Menu"]{
    color:#ffffff !important;
  }

  .site-header .primary-menu-toggle svg,
  .site-header .menu-toggle svg,
  .site-header .sfd-mobile-menu-toggle svg{
    stroke:#ffffff !important;
    color:#ffffff !important;
  }
}


/* ==========================================================
   FINAL — MOBILE NAV INDEPENDENT LIVE HERO BACKGROUND
   The nav ribbon has its OWN background layer that mirrors
   the currently active hero image. It does NOT alter the
   hero image or the hero image container.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background:rgba(18,22,26,.20) !important;
    background-color:rgba(18,22,26,.20) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Independent image layer */
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::before{
    content:"" !important;
    position:absolute !important;
    inset:-7px !important;
    z-index:-2 !important;
    pointer-events:none !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    opacity:.72 !important;
    filter:blur(5px) brightness(.62) saturate(.92) !important;
    -webkit-filter:blur(5px) brightness(.62) saturate(.92) !important;
    transform:scale(1.06) !important;
    transition:background-image .32s ease, opacity .32s ease !important;
  }

  /* Independent dark glass layer over the mirrored image */
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;
    background:rgba(18,22,26,.34) !important;
  }

  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="0"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-01.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="1"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-02.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="2"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-03.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="3"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-04.jpg") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="4"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-05.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="5"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-software.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="6"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-06.png") !important;
  }

  /* Keep nav content above both independent background layers */
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav > *{
    position:relative !important;
    z-index:2 !important;
  }
}


/* ==========================================================
   FINAL — INITIAL NAV BACKGROUND MUST NOT START BLACK
   Use first hero image as the default/fallback background from
   the very first paint, then switch to the active slide image.
   Independent ribbon only. Hero image/container untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-01.png") !important;
    opacity:.82 !important;
    filter:blur(4px) brightness(.68) saturate(.96) !important;
    -webkit-filter:blur(4px) brightness(.68) saturate(.96) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::after{
    background:rgba(26,28,32,.22) !important;
  }
}


/* ==========================================================
   FINAL — BRIGHTER INDEPENDENT MOBILE NAV BACKGROUND
   Keep hero image/container untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav{
    background:rgba(0,0,0,.02) !important;
    background-color:rgba(0,0,0,.02) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::before{
    opacity:1 !important;
    filter:blur(3px) brightness(1.18) saturate(1.03) !important;
    -webkit-filter:blur(3px) brightness(1.18) saturate(1.03) !important;
    transform:scale(1.04) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::after{
    background:rgba(0,0,0,.06) !important;
  }
}


/* ==========================================================
   ABSOLUTE FINAL — REMOVE BLACK BASE UNDER MOBILE NAV IMAGE
   Layer order:
   transparent nav base -> active-image bg -> soft neutral veil -> nav content
   Hero image and hero container untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::before{
    content:"" !important;
    position:absolute !important;
    inset:-6px !important;
    z-index:0 !important;
    pointer-events:none !important;
    background-image:url("assets/sfd-hero-01.png") !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    opacity:1 !important;
    filter:blur(3px) brightness(1.08) saturate(1.02) !important;
    -webkit-filter:blur(3px) brightness(1.08) saturate(1.02) !important;
    transform:scale(1.04) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:rgba(255,255,255,.04) !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav > *{
    position:relative !important;
    z-index:2 !important;
  }

  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="0"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-01.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="1"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-02.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="2"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-03.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="3"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-04.jpg") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="4"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-05.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="5"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-software.png") !important;
  }
  body:not(.sfd-mobile-nav-scrolled):has(.sfd-slide.is-active[data-sfd-index="6"]) .site-header .main-nav::before{
    background-image:url("assets/sfd-hero-06.png") !important;
  }
}


/* ==========================================================
   ABSOLUTE FINAL — LIVE NAV BACKGROUND, NO BLACK BASE
   The mobile nav ribbon receives its own real background-image
   from JS according to the currently active hero slide.
   Hero image and hero container are untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav{
    position:relative !important;
    overflow:hidden !important;
    background-color:transparent !important;
    background-image:var(--sfd-nav-live-bg, url("assets/sfd-hero-01.png")) !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /* Disable every previous pseudo background layer so no black can remain. */
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::before,
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }

  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav > *{
    position:relative !important;
    z-index:1 !important;
  }
}


/* ==========================================================
   FINAL — NAV IMAGE IS PAINTED INLINE BY JS
   Remove any residual dark layers. Mobile only.
   ========================================================== */
@media (max-width:760px){
  .site-header .main-nav::before,
  .site-header .main-nav::after{
    content:none !important;
    display:none !important;
    background:none !important;
    box-shadow:none !important;
  }
}


/* ==========================================================
   DEFINITIVE — REAL INDEPENDENT IMAGE LAYER INSIDE MOBILE NAV
   This is an actual child element, not a background/pseudo layer.
   It covers any inherited black nav background without touching
   the hero image or hero image container.
   ========================================================== */
@media (max-width:760px){
  .site-header .main-nav{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
  }

  .site-header .main-nav > .sfd-mobile-nav-live-media{
    display:block !important;
    position:absolute !important;
    inset:-6px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    overflow:hidden !important;
    opacity:1 !important;
    transform:none !important;
  }

  .site-header .main-nav > .sfd-mobile-nav-live-media > img{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:blur(3px) brightness(1.03) saturate(.95) !important;
    -webkit-filter:blur(3px) brightness(1.03) saturate(.95) !important;
    transform:scale(1.06) !important;
  }

  /* Very light neutral veil only; no black layer. */
  .site-header .main-nav > .sfd-mobile-nav-live-media::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:rgba(255,255,255,.04) !important;
    pointer-events:none !important;
  }

  .site-header .main-nav > *:not(.sfd-mobile-nav-live-media){
    position:relative !important;
    z-index:2 !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav > .sfd-mobile-nav-live-media{
    display:none !important;
  }
}


/* ==========================================================
   DEFINITIVE — BRAND-NEW MOBILE NAV RIBBON
   Old nav ribbon backgrounds are fully neutralized.
   A NEW independent sibling ribbon displays the active hero image.
   Hero image/container untouched. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header{
    position:fixed !important;
    isolation:isolate !important;
  }

  /* NEW ribbon: independent from .main-nav */
  .site-header > .sfd-mobile-fresh-ribbon{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:34px !important;
    width:100% !important;
    height:70px !important;
    min-height:70px !important;
    z-index:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    background:#e9e9e7 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > img{
    display:block !important;
    position:absolute !important;
    inset:-6px !important;
    width:calc(100% + 12px) !important;
    height:calc(100% + 12px) !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center 45% !important;
    opacity:1 !important;
    filter:blur(4px) brightness(.94) saturate(.90) !important;
    -webkit-filter:blur(4px) brightness(.94) saturate(.90) !important;
    transform:scale(1.035) !important;
  }

  /* REMOVE/HIDE every prior attempted ribbon layer. */
  .site-header .main-nav > .sfd-mobile-nav-live-media{
    display:none !important;
  }
  .site-header .main-nav::before,
  .site-header .main-nav::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }

  /* Old ribbon itself becomes a transparent content holder only. */
  .site-header .main-nav,
  body.sfd-mercury-global-light .site-header .main-nav,
  body:not(.sfd-mercury-global-light) .site-header .main-nav,
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav,
  body.sfd-mobile-nav-scrolled .site-header .main-nav,
  body.sfd-mobile-nav-scrolled.sfd-mercury-global-light .site-header .main-nav,
  body.sfd-mobile-nav-scrolled:not(.sfd-mercury-global-light) .site-header .main-nav{
    position:relative !important;
    z-index:1 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .site-header .main-nav > *{
    position:relative !important;
    z-index:2 !important;
  }
}

@media (min-width:761px){
  .site-header > .sfd-mobile-fresh-ribbon{display:none !important;}
}


/* ==========================================================
   DEFINITIVE REPAIR — MOBILE HEADER IMAGE RIBBON
   68px independent ribbon only. It never alters hero layout.
   Existing main-nav remains only as transparent content layer.
   ========================================================== */
@media (max-width:760px){
  .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:20000 !important;
    overflow:visible !important;
  }

  .site-header .top-ribbon{
    position:relative !important;
    z-index:30 !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon{
    display:block !important;
    position:absolute !important;
    top:34px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:10 !important;
    pointer-events:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > img{
    display:block !important;
    position:absolute !important;
    top:-5px !important;
    left:-5px !important;
    width:calc(100% + 10px) !important;
    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:blur(3px) brightness(1.02) saturate(.96) !important;
    -webkit-filter:blur(3px) brightness(1.02) saturate(.96) !important;
    transform:scale(1.02) !important;
  }

  /* tiny neutral veil, not black */
  .site-header > .sfd-mobile-fresh-ribbon::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:rgba(255,255,255,.03) !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  .site-header .main-nav,
  body.sfd-mercury-global-light .site-header .main-nav,
  body:not(.sfd-mercury-global-light) .site-header .main-nav,
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav,
  body.sfd-mobile-nav-scrolled .site-header .main-nav{
    position:relative !important;
    z-index:20 !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    margin:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    overflow:visible !important;
  }

  .site-header .main-nav::before,
  .site-header .main-nav::after{
    content:none !important;
    display:none !important;
  }

  .site-header .main-nav > *{
    position:relative !important;
    z-index:25 !important;
  }
}

@media (min-width:761px){
  .site-header > .sfd-mobile-fresh-ribbon{display:none !important;}
}


/* ==========================================================
   ABSOLUTE FINAL — MOBILE FRESH RIBBON CONTENT
   The old mobile nav stays out of the first frame.
   The independent 68px ribbon itself owns logo + Flowing App + menu.
   Desktop untouched. Hero image/container untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    z-index:20015 !important;
    overflow:hidden !important;
    pointer-events:auto !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__bg{
    position:absolute !important;
    z-index:0 !important;
    inset:-5px !important;
    width:calc(100% + 10px) !important;
    height:78px !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:blur(3px) brightness(1.02) saturate(.96) !important;
    -webkit-filter:blur(3px) brightness(1.02) saturate(.96) !important;
    transform:scale(1.02) !important;
    pointer-events:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    background:rgba(8,18,22,.10) !important;
    pointer-events:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:5px 12px !important;
    pointer-events:auto !important;
  }

  .sfd-mobile-fresh-brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    text-decoration:none !important;
    overflow:visible !important;
  }
  .sfd-mobile-fresh-brand__symbol{
    display:block !important;
    width:auto !important;
    height:54px !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  .sfd-mobile-fresh-brand__wordmark{
    display:block !important;
    width:auto !important;
    height:34px !important;
    max-width:42vw !important;
    object-fit:contain !important;
    margin-left:-7px !important;
  }

  .sfd-mobile-fresh-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    flex:0 0 auto !important;
  }
  .sfd-mobile-fresh-flowing{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 13px !important;
    border:1px solid transparent !important;
    border-radius:999px !important;
    background:
      linear-gradient(rgba(8,18,22,.74),rgba(8,18,22,.74)) padding-box,
      linear-gradient(110deg,#5fe7f0,#6ecfea,#bc78f2) border-box !important;
    color:#fff !important;
    font-size:10px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }
  .sfd-mobile-fresh-menu{
    width:30px !important;
    height:40px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    cursor:pointer !important;
  }
  .sfd-mobile-fresh-menu span{
    display:block !important;
    width:23px !important;
    height:1px !important;
    background:#fff !important;
    border-radius:0 !important;
  }

  /* First frame uses ONLY the new ribbon content, preventing duplicates. */
  body:not(.sfd-mobile-nav-scrolled) .site-header .main-nav{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-brand,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-hero-actions{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.sfd-mobile-nav-scrolled .site-header > .sfd-mobile-fresh-ribbon{
    display:none !important;
  }
}

@media (max-width:390px){
  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    padding-left:8px !important;
    padding-right:8px !important;
    gap:5px !important;
  }
  .sfd-mobile-fresh-brand__symbol{height:50px !important;}
  .sfd-mobile-fresh-brand__wordmark{
    height:30px !important;
    max-width:39vw !important;
    margin-left:-7px !important;
  }
  .sfd-mobile-fresh-actions{gap:6px !important;}
  .sfd-mobile-fresh-flowing{
    height:38px !important;
    min-height:38px !important;
    padding:0 10px !important;
    font-size:9px !important;
  }
  .sfd-mobile-fresh-menu{width:27px !important;height:38px !important;}
  .sfd-mobile-fresh-menu span{width:21px !important;}
}

@media (min-width:761px){
  .site-header > .sfd-mobile-fresh-ribbon{display:none !important;}
}


/* ==========================================================
   FINAL — LIGHT GRAY TRANSLUCENT RECTANGLE ON NEW MOBILE RIBBON
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon::before{
    content:"" !important;
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:6px !important;
    bottom:6px !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:rgba(128, 136, 146, 0.58) !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon::after{
    z-index:2 !important;
    background:rgba(8,18,22,.04) !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    z-index:3 !important;
  }
}

@media (max-width:390px){
  .site-header > .sfd-mobile-fresh-ribbon::before{
    left:8px !important;
    right:8px !important;
    top:5px !important;
    bottom:5px !important;
  }
}


/* ==========================================================
   ABSOLUTE FINAL — FULL-SIZE DARK OVERLAY ON NEW MOBILE RIBBON
   Covers the ENTIRE independent ribbon edge-to-edge.
   40% darker than previous state. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:rgba(74,82,92,.72) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon::after{
    z-index:2 !important;
    background:rgba(12,18,24,.08) !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    z-index:3 !important;
  }
}

@media (max-width:390px){
  .site-header > .sfd-mobile-fresh-ribbon::before{
    inset:0 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
  }
}


/* ==========================================================
   ABSOLUTE FINAL — NEW MOBILE RIBBON REACHES MAIN IMAGE TOP
   Top ribbon = 34px. Main hero image starts at 34px + 80px.
   Therefore the independent ribbon is exactly 80px high.
   Desktop untouched. Main hero image/container untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon{
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__bg{
    inset:-5px !important;
    width:calc(100% + 10px) !important;
    height:90px !important;
    min-height:90px !important;
    max-height:90px !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon::before,
  .site-header > .sfd-mobile-fresh-ribbon::after{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
  }
}

@media (max-width:390px){
  .site-header > .sfd-mobile-fresh-ribbon{
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
  }
  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__bg{
    height:90px !important;
    min-height:90px !important;
    max-height:90px !important;
  }
}


/* ==========================================================
   FINAL — FLUSH NEW MOBILE RIBBON TO HERO IMAGE
   Remove any seam/gray line between the independent ribbon
   and the main hero image. Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon{
    height:80px !important;
    min-height:80px !important;
    max-height:80px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    overflow:hidden !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__bg{
    inset:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon::before,
  .site-header > .sfd-mobile-fresh-ribbon::after{
    inset:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }

  /* Pull the hero image up by 1px to guarantee a seamless join. */
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide.sfd-hero-zoom-in > img,
  body:not(.sfd-mobile-nav-scrolled) .sfd-lcp-hero .sfd-slide__shade{
    top:calc(var(--sfd-mobile-ribbon-h, 34px) + 79px) !important;
  }
}


/* ==========================================================
   FINAL — MOBILE FRESH RIBBON EXTEND 2PX DOWN
   Extend only the independent ribbon background/overlay by 2px
   to fully cover the seam above the main hero image.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon{
    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__bg{
    height:92px !important;
  }

  .site-header > .sfd-mobile-fresh-ribbon::before,
  .site-header > .sfd-mobile-fresh-ribbon::after{
    bottom:-2px !important;
  }
}


/* ==========================================================
   FINAL — MOBILE RIBBON OVERLAY 40% DARKER
   Only the transparent rectangle over the independent image.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon::before{
    background:rgba(44,49,55,.72) !important;
  }
}


/* ==========================================================
   FINAL — 30% MORE FROSTED / BLURRED OVERLAY ON NEW MOBILE RIBBON
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon::before{
    -webkit-backdrop-filter:blur(13px) saturate(92%) !important;
    backdrop-filter:blur(13px) saturate(92%) !important;
  }
}


/* ==========================================================
   FINAL — OVERLAY 30% DARKER ON ALL HERO SLIDES EXCEPT SOFTWARE
   Software (index 5) keeps the current overlay exactly.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:has(.sfd-slide.is-active[data-sfd-index="0"]) .site-header > .sfd-mobile-fresh-ribbon::before,
  body:has(.sfd-slide.is-active[data-sfd-index="1"]) .site-header > .sfd-mobile-fresh-ribbon::before,
  body:has(.sfd-slide.is-active[data-sfd-index="2"]) .site-header > .sfd-mobile-fresh-ribbon::before,
  body:has(.sfd-slide.is-active[data-sfd-index="3"]) .site-header > .sfd-mobile-fresh-ribbon::before,
  body:has(.sfd-slide.is-active[data-sfd-index="4"]) .site-header > .sfd-mobile-fresh-ribbon::before,
  body:has(.sfd-slide.is-active[data-sfd-index="6"]) .site-header > .sfd-mobile-fresh-ribbon::before{
    background:rgba(31,34,39,.72) !important;
  }

  body:has(.sfd-slide.is-active[data-sfd-index="5"]) .site-header > .sfd-mobile-fresh-ribbon::before{
    background:rgba(44,49,55,.72) !important;
  }
}


/* ==========================================================
   FINAL — MOBILE FRESH RIBBON LOGO 40% LARGER
   Only the Sans Frontières logo in the new mobile ribbon.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-mobile-fresh-brand__symbol{
    height:76px !important;
  }
  .sfd-mobile-fresh-brand__wordmark{
    height:48px !important;
    max-width:59vw !important;
    margin-left:-10px !important;
  }
}

@media (max-width:390px){
  .sfd-mobile-fresh-brand__symbol{
    height:70px !important;
  }
  .sfd-mobile-fresh-brand__wordmark{
    height:44px !important;
    max-width:56vw !important;
    margin-left:-10px !important;
  }
}


/* ==========================================================
   FINAL — MOVE MOBILE LOGO BLOCK TO 10PX FROM LEFT EDGE
   Only the logo + Sans Frontières text in the new mobile ribbon.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    padding-left:10px !important;
  }
  .sfd-mobile-fresh-brand{
    margin-left:0 !important;
    padding-left:0 !important;
  }
}

@media (max-width:390px){
  .site-header > .sfd-mobile-fresh-ribbon > .sfd-mobile-fresh-ribbon__content{
    padding-left:10px !important;
  }
  .sfd-mobile-fresh-brand{
    margin-left:0 !important;
    padding-left:0 !important;
  }
}


/* ==========================================================
   FINAL — MOVE MOBILE LOGO BLOCK 25PX MORE TO THE LEFT
   Relative to the previous version.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-mobile-fresh-brand{
    transform:translateX(-25px) !important;
  }
}

@media (max-width:390px){
  .sfd-mobile-fresh-brand{
    transform:translateX(-25px) !important;
  }
}


/* ==========================================================
   FINAL — MOVE MOBILE LOGO BLOCK 7PX TO THE RIGHT
   Relative to the previous version (-25px -> -18px).
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-mobile-fresh-brand{
    transform:translateX(-18px) !important;
  }
}

@media (max-width:390px){
  .sfd-mobile-fresh-brand{
    transform:translateX(-18px) !important;
  }
}


/* ==========================================================
   FINAL — SCROLLED MOBILE NAV FLUSH TO TOP
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav,
  body.sfd-mobile-nav-scrolled.sfd-mercury-global-light .site-header .main-nav,
  body.sfd-mobile-nav-scrolled:not(.sfd-mercury-global-light) .site-header .main-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    transform:none !important;
    z-index:2147483000 !important;
  }
}


/* ==========================================================
   FINAL — SCROLLED MOBILE NAV DIRECTLY BELOW MONDAY-FRIDAY RIBBON
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav,
  body.sfd-mobile-nav-scrolled.sfd-mercury-global-light .site-header .main-nav,
  body.sfd-mobile-nav-scrolled:not(.sfd-mercury-global-light) .site-header .main-nav{
    position:fixed !important;
    top:var(--sfd-mobile-ribbon-h, 34px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    transform:none !important;
    z-index:2147483000 !important;
  }
}


/* ==========================================================
   FINAL — MOVE MOBILE LOGO BLOCK 7PX MORE TO THE RIGHT
   Relative to previous version. Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  .sfd-mobile-fresh-brand{
    transform:translateX(-11px) !important;
  }
}

@media (max-width:390px){
  .sfd-mobile-fresh-brand{
    transform:translateX(-11px) !important;
  }
}


/* ==========================================================
   FINAL — PERMANENT BACKGROUND RIBBON FOR SCROLLED MOBILE HEADER
   Keeps a continuous dark ribbon behind logo / app button / menu
   while scrolling, directly below the Monday-Friday ribbon.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav,
  body.sfd-mobile-nav-scrolled.sfd-mercury-global-light .site-header .main-nav,
  body.sfd-mobile-nav-scrolled:not(.sfd-mercury-global-light) .site-header .main-nav{
    position:fixed !important;
    top:var(--sfd-mobile-ribbon-h, 34px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-height:70px !important;
    height:70px !important;
    margin:0 !important;
    background:linear-gradient(180deg, rgba(4,10,14,.96) 0%, rgba(4,10,14,.90) 100%) !important;
    background-color:rgba(4,10,14,.94) !important;
    border:0 !important;
    box-shadow:0 1px 0 rgba(255,255,255,.06) !important;
    -webkit-backdrop-filter:blur(8px) saturate(105%) !important;
    backdrop-filter:blur(8px) saturate(105%) !important;
    opacity:1 !important;
    visibility:visible !important;
    overflow:hidden !important;
    z-index:2147483000 !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav::before,
  body.sfd-mobile-nav-scrolled .site-header .main-nav::after{
    content:none !important;
    display:none !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav > .sfd-mobile-nav-live-media{
    display:none !important;
  }
}


/* ==========================================================
   FINAL — FIRST SCREEN MOBILE WORDMARK 35% LARGER
   Only the Sans Frontières Design lettering beside the main logo.
   Symbol unchanged. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-mobile-fresh-brand__wordmark{
    height:65px !important;
    max-width:72vw !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-mobile-fresh-brand__wordmark{
    height:59px !important;
    max-width:69vw !important;
  }
}


/* ==========================================================
   FINAL — FIRST SCREEN MOBILE WORDMARK 25% LARGER AGAIN
   Relative to previous version. Symbol unchanged.
   Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-mobile-fresh-brand__wordmark{
    height:81px !important;
    max-width:90vw !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled) .sfd-mobile-fresh-brand__wordmark{
    height:74px !important;
    max-width:86vw !important;
  }
}


/* ==========================================================
   FINAL — SCROLLED MOBILE HEADER: 70% TRANSPARENT + 30% MORE BLUR
   Only the second/header ribbon below Monday-Friday.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav,
  body.sfd-mobile-nav-scrolled.sfd-mercury-global-light .site-header .main-nav,
  body.sfd-mobile-nav-scrolled:not(.sfd-mercury-global-light) .site-header .main-nav{
    background:rgba(4,10,14,.30) !important;
    background-color:rgba(4,10,14,.30) !important;
    -webkit-backdrop-filter:blur(10.4px) saturate(105%) !important;
    backdrop-filter:blur(10.4px) saturate(105%) !important;
    box-shadow:none !important;
  }
}


/* ==========================================================
   FINAL — SCROLLED HEADER WORDMARK MATCHES FIRST-SCREEN RATIO
   Keep scrolled logo symbol size unchanged; enlarge only
   SANS FRONTIÈRES DESIGN lettering to match first-screen ratio.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-wordmark{
    height:49px !important;
    max-height:49px !important;
    max-width:58vw !important;
    margin-left:-8px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
}

@media (max-width:390px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-wordmark{
    height:47px !important;
    max-height:47px !important;
    max-width:56vw !important;
    margin-left:-8px !important;
  }
}


/* ==========================================================
   FINAL — SECOND MOBILE HEADER WORDMARK +20%, LOGO 5PX LEFT
   Scrolled header only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-symbol{
    transform:translateX(-5px) !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-wordmark{
    transform:scale(1.20) !important;
    transform-origin:left center !important;
  }
}


/* ==========================================================
   FINAL — SECOND HEADER: WORDMARK +15%, LOGO 3PX MORE LEFT,
   WORDMARK 8PX LEFT
   Relative to previous second-header version.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-symbol{
    transform:translateX(-8px) !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-wordmark{
    transform:translateX(-8px) scale(1.38) !important;
    transform-origin:left center !important;
  }
}

@media (max-width:390px){
  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-symbol{
    transform:translateX(-8px) !important;
  }

  body.sfd-mobile-nav-scrolled .site-header .main-nav .brand__sfd-wordmark{
    transform:translateX(-8px) scale(1.38) !important;
    transform-origin:left center !important;
  }
}


/* ==========================================================
   FINAL — SUBIR MÁS LOS TÍTULOS DE LAS 7 IMÁGENES
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h2{
    top:122px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide__copy h2{
    top:120px !important;
  }
}

/* ==========================================================
   ABSOLUTE FINAL — SUBIR REALMENTE TITULOS ACTIVOS DE LOS 7 SLIDES
   Overrides the older .sfd-slide.is-active top:174px rule.
   Mobile only. Desktop untouched.
   ========================================================== */
@media (max-width:760px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:148px !important;
  }
}

@media (max-width:390px){
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h1,
  body:not(.sfd-mobile-nav-scrolled)
  .sfd-lcp-hero .sfd-slide.is-active .sfd-slide__copy h2{
    top:146px !important;
  }
}